Hi all,
I am sure something like this has been covered somewhere so I am hoping
a quick answer or pointer may suffice, however a couple of days
trawling and I can't find anything on it.
I'm building a layout and for reasons of PDA and text based browsers I
want to have my primary navigation at the bottom of the HTML layout.
Thus the main content and supplementar content are positioned higher in
the document structure then the links go at the end.
However for proper browsers I want to put my links into a header and
push them to the top of the page.
You can see my HTML below with at the moment an embedded stylesheet for
testing. It works as expected in Mozilla however in IE6 I am getting a
strange bug which started because of another bug.
If I sized my 2 columns to make up 100% then they wouldn't float next
to each other - it was as though they were too big to fit the space so
I dropped the size by 1% making the total 99% and they fit fine.
However the header then disappeared ENTIRELY from view....
If anyone can shed any light on this it would be greatly appreciated as
I'd like to structure my HTML properly and not have to compromise on
this.
Cheers
AndrewF
HTML HERE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dt d">
<html>
<head>
<!-- scripts etc all go in here -->
<script language="javas cript">
</script>
<style type="text/css">
body#tk_com {font-size: 0.8em; font-family: Verdana, Arial, Helvetica,
sans serif; margin: 0;}
body#tk_com div#container { margin: 0px auto; width: 70em; border: 1px
solid red;}
body#tk_com * h1 {font-size: 1.3em; font-weight: bold;}
body#tk_com * h2 { font-size: 1.1em; font-weight: bold;}
body#tk_com * h3 { font-size: 0.9em; font-weight: bold;}
/** define main header area so the nav can be repositioned into it. **/
body#tk_com div#container {margin-top: 150px; }
/** make the header info stuff come up from the bottom of the page **/
body#tk_com div#container div#header_info {position: absolute; top: 0;
margin-left: -1px; border: 1px solid green; width: 70em;}
/** make the nav stuff here **/
body#tk_com div#container div#header_info div#nav {margin-top: 123px;}
body#tk_com div#container div#header_info div#nav h3{display: none;}
body#tk_com div#container div#header_info div#nav ul {margin: 0px;
height: 25px; background-color: #000;}
body#tk_com div#container div#header_info div#nav ul li {display:
inline; margin: 0;}
/** make the main content area here **/
body#tk_com div#container div#main_conten t {width: 79%; float: left;
border: 1px solid red;}
/** make the supplementary content area here **/
body#tk_com div#container div#supplementa ry_info {width: 20%; float:
right; border: 1px solid blue;}
/** make the footer here **/
body#tk_com div#container div#footer {clear: both;}
</style>
</head>
<body id="tk_com">
<div id="container" >
<div id="main_conten t">
<div id="intro">
<h1>Page title</h1>
<div id="summary">
<p>summary texzt fjdlfdklfjsdl</p>
</div>
</div>
<div id="main_info" >
<h2>Sub head</h2>
<p>fhjfkj fdkjfhdslkj dslfkjhdslfkd fksjhf dsal</p>
</div>
</div>
<div id="supplementa ry_info">
<div id="specials">
<h3>Specials header</h3>
<p>Specials text etc</p>
</div>
<div id="related_inf o">
<div class="related" >
<h3>Related header</h3>
<p>Text about the related item</p>
</div>
<div class="related" >
<h3>Related header</h3>
<p>Text about the related item</p>
</div>
</div>
</div>
<div id="header_info ">
<div id="nav">
<h3>Site Navigation</h3>
<ul>
<li><a href="courses"> Courses</a></li>
<li><a href="courses"> News</a></li>
<li><a href="courses"> Contact</a></li>
<li><a href="courses"> Gallery</a></li>
<li><a href="courses"> Location</a></li>
<li><a href="courses"> Facilities</a></li>
<li><a href="courses"> Safety</a></li>
<li><a href="courses"> Links</a></li>
<li><a href="courses"> About Us</a></li>
</ul>
</div>
</div>
<div id="footer">
<p id="crightNotic e">Copyright © 2003 - 2006 TK. Powered by XML
∞. Hosted by clustered.net</p>
<p>some extra text in here yada yada yada yada</p>
</div>
</div>
</body>
</html>
