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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Page Layout 2

Status
Not open for further replies.
Cheech

Cheech

Technical User
Nov 6, 2000
2,933
EU
I want a page to act similar to the code below. The only way I can get it to be totally fluid is to use a table in the header & footer div's, but I know this is wrong. I would also like the main content to efectivly wrap around the nav so that the space below is used as well. The content of the main area can be any size and I need this to push the footer to the bottom of the page at all times.

Can anyone explain to me what I am doing wrong with the css please.
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
.style1 {
	color: #F58400;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight: bold;
}
html, body { margin: 0; padding: 0; }
#header { 
  width: 100%;
  float: left;
}
#maincontainer {
  width: 100%;
  float: left;
}
#nav {
  width: 20%;
  float: left;
}
#main {
  float: right;
  width: 80%;
}
#footer {
	width: 100%;
	float: left;
} 
#nsLogo {
	position:absolute;
	width:200px;
	height:52px;
	z-index:1;
	top: 0px;
	right: 80px;
}
-->
</style>
</head>

<body>
<div id="header">
<table width="100%">
<tr>
<td width="294" height="60" align="left">
<h3 class="style1">Interactive teaching: Science </h3>
</td>
<td width="274">&nbsp;</td>
<td align="right" width="273"><img src="images/Logo1.gif" width="200" height="55" /></td>
</tr></table>
</div>
<div id="maincontainer">
<div id="main">
<p>Whee</p>
<p>Ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure
dolor excepteur sint occaecat. Velit esse cillum dolore quis nostrud exercitation
mollit anim id est laborum.</p>
<p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Sed do eiusmod
tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Ut aliquip
ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum.</p>
<p>Excepteur sint occaecat ut labore et dolore magna aliqua. Sed do eiusmod tempor
incididunt ut enim ad minim veniam, quis nostrud exercitation. Duis aute irure
dolor consectetur adipisicing elit, mollit anim id est laborum. Sed do eiusmod
tempor incididunt lorem ipsum dolor sit amet, cupidatat non proident. Ullamco laboris
nisi in reprehenderit in voluptate consectetur adipisicing elit.</p><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Sed do eiusmod
tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Ut aliquip
ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum.</p>
<p>Excepteur sint occaecat ut labore et dolore magna aliqua. Sed do eiusmod tempor
incididunt ut enim ad minim veniam, quis nostrud exercitation. Duis aute irure
dolor consectetur adipisicing elit, mollit anim id est laborum. Sed do eiusmod
tempor incididunt lorem ipsum dolor sit amet, cupidatat non proident. Ullamco laboris
nisi in reprehenderit in voluptate consectetur adipisicing elit.</p><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Sed do eiusmod
tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Ut aliquip
ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum.</p>
<p>Excepteur sint occaecat ut labore et dolore magna aliqua. Sed do eiusmod tempor
incididunt ut enim ad minim veniam, quis nostrud exercitation. Duis aute irure
dolor consectetur adipisicing elit, mollit anim id est laborum. Sed do eiusmod
tempor incididunt lorem ipsum dolor sit amet, cupidatat non proident. Ullamco laboris
nisi in reprehenderit in voluptate consectetur adipisicing elit.</p><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Sed do eiusmod
tempor incididunt consectetur adipisicing elit, duis aute irure dolor. Ut aliquip
ex ea commodo consequat. Velit esse cillum dolore mollit anim id est laborum.</p>
<p>Excepteur sint occaecat ut labore et dolore magna aliqua. Sed do eiusmod tempor
incididunt ut enim ad minim veniam, quis nostrud exercitation. Duis aute irure
dolor consectetur adipisicing elit, mollit anim id est laborum. Sed do eiusmod
tempor incididunt lorem ipsum dolor sit amet, cupidatat non proident. Ullamco laboris
nisi in reprehenderit in voluptate consectetur adipisicing elit.</p>
</div>
<div id="nav">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>
</div>
<div id="footer"><table width="100%" cellspacing="2">
<tr>
<td width="24%" align="left"><img src="images/logo2.gif" width="200" height="50" /></td>
<td width="76%" align="right" valign="bottom">Copy right etc</td>
</tr></table></div>
</body>
</html>

[Peace][Pipe]
 
Sort by date Sort by votes
I forgot to mention that this needs to be cross browser & still work if Javascript is disabled..

[Peace][Pipe]
 
Upvote 0 Downvote
For the top and bottom bits you can use nested divs floated left and right. I changed this
Code: 
<div id="header">
<table width="100%">
<tr>
<td width="294" height="60" align="left">
<h3 class="style1">Interactive teaching: Science </h3>
</td>
<td width="274">&nbsp;</td>
<td align="right" width="273"><img src="000001.jpg" width="200" height="55" /></td>
</tr></table>
</div>
to this
Code: 
<div id="header">
<div style="float:left; width:35%;">
<h3 class="style1">Interactive teaching: Science </h3></div>
<div style="float:right;"><img src="000001.jpg" width="200" height="55" /></div>
</div>
You can pull the CSS out into your main css as you go. Similar for the bottom of course.

To make your main text flow round the menu I unfloated #main and allowed its width to grow, then removed fixed width from #nav and gave it padding instead
Code: 
#nav {
 /* width: 20%; */
 padding:20px;
  float: left;
}
#main {
  /*
  float: right;
  width: 80%; */ 
}

That appears to get you close to what you're after

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
Seems to work OK in FF, IE7, and IE6 - Sorry about the wrong pics in the code above - forgot to change them back!

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints
 
Upvote 0 Downvote
Further to what johnwm said, I'd mark up your header like this:
Code: 
<div id="header">
  <h1>Interactive teaching: Science</h1>
</div>
Then put this in the style-sheet:
Code: 
#header {
   padding-right: 200px;
   background: url(Images/logo1.gif) top right no-repeat;
   min-height: 55px;
}

* html #header { height: 55px; } /* IE6 version of min-height */

#header h1 {
    color: #F58400;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.2em; /* or whatever you like */
    margin: 0; /*ditto*/
    padding: 0; /*ditto*/
}
The title within the header looks like a whole page title to me, so it should be a <h1> rather than a <h3>. If you don't like the size/spacing of <h1>s, you can change that in the CSS.

You also don't need to clutter your markup with a floated-right logo <img>. I've just used a non-repeating background image instead, giving the <div> enough padding to ensure the text doesn't overlay it.

(Note: I've not had the time to test the above code, so it may still need some tweaking to get it just right)

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
154
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
150
Carlvic
Carlvic
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
216
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top