2 replies [Last post]
Zerro
Zerro's picture
Offline
newbie
Last seen: 12 years 13 weeks ago
Timezone: GMT+1
Joined: 2010-02-13
Posts: 3
Points: 6

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 &nbsp; &nbsp; &nbsp;
							</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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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.

Zerro
Zerro's picture
Offline
newbie
Last seen: 12 years 13 weeks ago
Timezone: GMT+1
Joined: 2010-02-13
Posts: 3
Points: 6

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!