Sat, 2010-02-13 21:01
First of all, Hello everyone,
and thanks for watching or starting to watch this thread.
The site i'm going to refer to is : HERE u can also download a .zip file as it is (html,css+img) on the site.
So far everything i worked on, i managed to do what i wanted with it (with a lot of searching, etc)
maybe with some things i don't need, but i validated it and it seemed ok.
The only thing that keeps bugging me is the div with wich i fill the gap between the menu and the footer.
so far i tried testing it with : FireFox -> gap, IE8 -> gap, GoogleChrome -> works
why the one works and the other doesn't, i really don't know.
below here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <head> <meta name="description" content="De website voor het project 'Split-Range', een theoretisch onderzoek naar een proefstand voor 'Split-Range'" /> <meta name="keywords" content="Project, Split-range, Denayer, Professional Bachelor EM, Automatisatie, Regeltechniek" /> <meta name="author" content="meta-tags generator" /> <title>..:: Split-Range ::..</title> <meta http-equiv='Content-type' content='text/html;charset=utf-8' /> <!-- charset = utf-8 --> <link href='styleSR.css' rel='stylesheet' type='text/css' /> </head> <body> <div id='wrapper'> <!--[if (IE 6)|(IE 7)]> <div style="text-align: center;"> <![endif]--> <div id='header'> </div> <div id='menu'> <br /> <br /> <a href="index.html" onmouseover='l1.src="afb/mo.png"' onmouseout='l1.src="afb/mt.png"'> <img src="afb/mt.png" alt="Home" id='l1' />::Home </a> <br /> <a href="site-example.png" onmouseover='l2.src="afb/mo.png"' onmouseout='l2.src="afb/mt.png"'> <img src="afb/mt.png" alt="probeer" id='l2' />::What i am trying </a> <br /> <a href="Website.zip" onmouseover='l3.src="afb/mo.png"' onmouseout='l3.src="afb/mt.png"'> <img src="afb/mt.png" alt="probeer" id='l3' />::Zip-File </a> </div> <div id='overg'> <img src='afb/overg.png' alt='overgang' /> </div> <div id='titel'> ::Home </div> <div id='content'> <br /> <br /> <!-- Deze behouden om een mooie afstand te hebben van de titelbalk --> Here comes the content , whatever it should be... the .zip is this site till now, without the link to the .zip <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /> and here is the gap </div> <div id='menud'> </div> <!--[if (IE 6)|(IE 7)]> </div> <![endif]--> <div id='end'> <br /><br /><br />:: Webmaster : ... </div><!-- width=600 background=afb.end.png colSpan=2 height=46 --> </div> </body> </html>
and here's the css
body { background-image:url('afb/Backgrnd.png'); font-family:verdana; text-align:center; border: 0px; margin: 0; padding: 0; height: 100%; } } #container { min-height:100%; position:relative; } #wrapper { min-height:100%; width: 600px; margin: auto; } #header{ background-image:url('afb/header.png'); width: 600px; height: 150px; top:0px; } #menu { background-image:url('afb/menu.png'); width: 130px; height: 300px; float: left; text-align: left; border: 0px; } #menud { background-image:url('afb/menu_tus.png'); position:absolute; margin-top: -150px; clear: both; width: 130px; height: auto; min-height: 100%; float: left; top: 450px; z-index:-1 } #overg { float:left; position:relative; width:470px; height:75px; margin-top: -300px; margin-left: 130px; } #titel { float: left; position:relative; width:470px; height:30px; font-family: verdana font-size: 10px font-weight: bold; text-align: right; margin-top: -225px; margin-left: 130px; background-image:url('afb/titel.png'); } #menu img { border: 0px; } #end { bottom:0px; width:600px; height:80px; z-index:-1; clear:both; background-image:url('afb/end.png'); position:relative; } #content { float:left text-align: left; position: relative; width: 470px; height: auto; margin-top: 105px; margin-left: 130px; background-color: white; } a { color: black; font-family: verdana; text-decoration: none; font-size: 11px; {
I really hope u can help me with this gap!
tnx in advance
Sun, 2010-02-14 21:38
#1
It's to do with the 100%
It's to do with the 100% height.
Try taking the background image from menud and using it as the background for content.
That will give the appearance of 100% height as long as the content is higher then the menu.
Mon, 2010-02-15 20:42
#2
Didn't think of it
Damn , i totally didn't think about something like that as my solution :s
actually a nice way to work around it! though i need to make my width to 600 instead.
Thanks!