Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table replacement 1

Status
Not open for further replies.
newbiewonkinobie

newbiewonkinobie

Technical User
Dec 29, 2002
80
US
After reading several posts here, I noticed that tables are not recommended anymore; typically "divs" or something else is recommended instead. I know how to layout a web page with tables using a header, and 2 columns below it. For example the left column being 30% of the screen, and the right column being 60% of the screen.
How can I do this without tables?
I want to have links in the left column, and different "stuff" in the right column, and this template would be used for all pages of a website. Any suggestions would be greatly appreciated.

Flores
 
Sort by date Sort by votes
One place to start is to google 'css tutorials'
or
'css column layout'

and check some of the links.

traingamer
 
Upvote 0 Downvote
Code: 
<html><head><title>test</title>
<style>#header{position:relative;clear:both; background-color:red;}
#leftCol{position:relative; float:left;background-color:blue;}
#rightCol{position:relative; float:right;background-color:yellow}</style>
</head><body><div id = "header">test</div><div id = "leftCol">test</div><div id = "rightCol">test</div></body></html>
Like this ??? hope that helps

Glen
 
Upvote 0 Downvote
Code: 
<html><head><title>test</title>
<style>#header{position:relative;clear:both; background-color:red;}
#leftCol{position:relative; width:30%;float:left;background-color:blue;}
#rightCol{position:relative; width:70%;float:right;background-color:yellow}</style>
</head><body><div id = "header">test</div><div id = "leftCol">test</div><div id = "rightCol">test</div></body></html>
OOPs this is better for what you want.

Glen
 
Upvote 0 Downvote
Well here's a start
Code: 
<html><head><title>test</title>
<style>#header{
position:relative;
clear:both; 
border-style:solid;
border-width:3px;
border-color:black; 
background-color:red;
margin-left:100px;
margin-right:100px;
height:15%;
}
#leftCol{position:relative;
width:20.6%;
height:125%;
float:left;
border-style:solid;
border-width:3px;
border-color:black; 
background-color:blue;
margin-left:50px;
margin-right:0px;
}
#rightCol{position:relative;
width:59%; 
height:125%;
float:right;
border-style:solid;
border-color:black;
border-width:3px;
background-color:yellow;
margin-right:50px;
margin-left:-1px 
}

</style>
</head><body>
<div id = "header">test</div>
<div id = "leftCol">test</div>
<div id = "rightCol">test</div>
</body></html>

Glen
 
Upvote 0 Downvote
oops again!!!shopuld be;
Code: 
#rightCol{position:relative;
width:52.7%; 
height:125%;
float:right;
border-style:solid;
border-color:black;
border-width:3px;
background-color:yellow;
margin-right:50px;
margin-left:-1px 
}

Glen
 
Upvote 0 Downvote
Glenmac, once again, thanks for all your help. I modified the colors and played around with it last night (the layout) and here is what I came up with:


2 problems:
1: If viewed @ 800 x 600 in internet explorer, it looks kinda right, but if viewed at 1024 x 768, there is a big gap between the columns; how can I make the 2 columns touch? Should I give the columns fixed numbers instead of percentage widths?

2: The colors are kinda what I am looking for in Internet Explorer, but if I use Netscape, the "<p> </p>" class doesn't show the intended colors in the right column.

Again, all help will be appreciated.

Flores
 
Upvote 0 Downvote
I beleive if you change the margin widths to a percentage it will help with problem # 1 as the browser keeps the px measurement and divides the screen with that taken into account . It will take some fiddling though. I tried that but as it was just an example didn't carry through.
I can't duplicate your color problem and the css looks correct sorry. Good luck!

Glen
 
Upvote 0 Downvote
Had some time here you go;
Code: 
<html><head><title>test</title>
<style>
body {

scrollbar-base-color:#000000;
scrollbar-track-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#23262c;
scrollbar-3dlight-color:#23262c;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#23262c;
font-family: Verdana, sans-serif;
[COLOR=red]background-color:#222222;[/color]
}
#header{
position:relative;
clear:both;
text-align: center;
font-size:20pt;
color: #EFE7DF; 
border-style:solid;
border-width:3px;
border-color:dimgray; 
background-color:#23262c;
[COLOR=red]margin-left:10%;
margin-right:10%;[/color]
height:15%;
}
#leftCol{position:relative;
width:23.2%;
height:125%;
float:left;
border-style:solid;
border-width:3px;
border-color:dimgray; 
background-color:#23262c;
[COLOR=red]margin-left:5%;[/color]
margin-right:0px;
}
#rightCol{position:relative;
width:57%; 
height:125%;
float:right;
border-style:solid;
border-color:dimgray;
border-width:3px;
background-color:#23262c;
[COLOR=red]margin-right:5%;[/color]
margin-left:-1px 
}
A.menulink {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
font-family:arial;
font-size:14pt;
color: #EFE7DF;
border: none;
}
A.menulink:hover {
color: white;
letter-spacing:1px;
border: solid 1px dimgray;
background-color:black;
}
p { 
text-indent: 2em; 
margin-top: 0; 
margin-bottom: 0; 
color="#EFE7DF";
padding-left: 0.2em;
font-size:12pt;
 }
</style>
</head><BODY>
    <DIV id="header">
      Paul-Flores
    </DIV>
    <DIV id="leftCol">
      <A href="[URL unfurl="true"]http://www.paul-flores.com"[/URL] class="menulink">Home</A>
	  <A href="[URL unfurl="true"]http://www.paul-flores.com/solidworks"[/URL] class="menulink">Solidworks</A>
	  <A href="[URL unfurl="true"]http://www.paul-flores.com/sheetmetal"[/URL] class="menulink">Sheet Metal</A>
    </DIV>
    <DIV id="rightCol">
      <P>
        This would be my homepage
      </P>
      <BR>
       
      <P>
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
        brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
        jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
        the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      </P>
    </DIV>
  </BODY>
</HTML>
Hope that's closer to what you need.

Glen
 
Upvote 0 Downvote
Great help, thanks. I will play with it tonight and hopefully get it right. For awhile I was thinking about putting the header, left column, and right column inside another div for it to "layout" correctly, but the boxes link will help also.

Flores
 
Upvote 0 Downvote
That did it! [2thumbsup] Thanks for taking the time to actually help. I should now be able to fix it tonight.

Gracias,
Flores
 
Upvote 0 Downvote
BTW the code I gave you doesn't work in NS. This does, with a few of my musings added. It looks a lot closer to the example you gave, I think.
Code: 
<html><head><title>test</title>
<style>
body {
[COLOR=red]scrolling:auto;[/color]
scrollbar-base-color:#000000;
scrollbar-track-color:#000000;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#23262c;
scrollbar-3dlight-color:#23262c;
scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color:#23262c;
font-family: Verdana, sans-serif;
background-color:#222222;
}
#header{
position:relative;
clear:both;
text-align: center;
font-size:20pt;
color: #EFE7DF;
border-top: 10px solid dimgray;
border-bottom: 10px solid dimgray ;
border-left:1px solid dimgray;
border-right:1px solid dimgray;
background-color:#23262c;
margin-left:10%;
margin-right:10%;
height:15%;
}
#links{
position:relative;
clear:both;
font-size:5pt;
color: #EFE7DF; 
border-left:1px solid dimgray;
border-right:1px solid dimgray;
border-top:ridge 5px solid gray;
border-bottom: 5px solid gray ;
background-color:#23262c;
margin-left:10%;
margin-right:10%;
height:5%;
}
#leftCol{
position:relative;
width:23.2%;
height:75%;
float:left;
border-right:1px solid dimgray;
border-left:1px solid dimgray;
border-bottom:1px solid dimgray;
 
background-color:#23262c;
[COLOR=red]margin-left:10%;[/color]
margin-right:-1px;
}
#rightCol{position:relative;
width:56.5%; 
height:75%;
float:right;
border-right:1px solid dimgray ; 
border-left:1px solid dimgray;
border-bottom:1px solid dimgray;
background-color:#23262c;
[COLOR=red]margin-right:10%;[/color]

}
A.menulink {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
font-family:arial;
font-size:14pt;
color: #EFE7DF;
border: none;
}
A.menulink:hover {
color: white;
letter-spacing:1px;
border: solid 1px dimgray;
background-color:black;
}
p{ 
text-indent: 2em; 
margin-top: 0; 
margin-bottom: 0; 
color:white;
padding-left: 0.2em;
font-size:12pt;
 }
[COLOR=red]A.link {
vertical-align:text-top;
text-decoration: none;
font-family:arial;
font-size:10pt;
color: #EFE7DF;
border: none;
}
A.link:hover {
color: white;
letter-spacing:1px;
border: solid 1px dimgray;
background-color:black;
}[/color]
</style>
</head><BODY scroll = "auto">
    <DIV id="header">
      Paul-Flores
    </DIV>
   [COLOR=red] <DIV id="links">
     <A href="[URL unfurl="true"]http://www.paul-flores.com/solidworks"[/URL] class="link">first link</A>
<A href="[URL unfurl="true"]http://www.paul-flores.com/solidworks"[/URL] class="link">second link</A>
<A href="[URL unfurl="true"]http://www.paul-flores.com/solidworks"[/URL] class="link">third link</A>
    </DIV>[/color]
    <DIV id="leftCol">
      <A href="[URL unfurl="true"]http://www.paul-flores.com"[/URL] class="menulink">Home</A>
	  <A href="[URL unfurl="true"]http://www.paul-flores.com/solidworks"[/URL] class="menulink">Solidworks</A>
	  <A href="[URL unfurl="true"]http://www.paul-flores.com/sheetmetal"[/URL] class="menulink">Sheet Metal</A>
    </DIV>
    <DIV id="rightCol">
      <P>
        This would be my homepage
      </P>
      <BR>
       
      <P>
        The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick
        brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox
        jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over
        the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
      </P>
    </DIV>
  </BODY>
</HTML>

Glen
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
499
spamjim
spamjim
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
100
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
98
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
87
vacunita
vacunita
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
102
lupidol
lupidol

Part and Inventory Search

Sponsor

Back
Top