...

View Full Version : Problem with divs



Nomadic
09-19-2006, 09:19 AM
http://huikea.net/beta

So I've got a problem here with my home page's new layout. There is a 10px gap between the menu and the contents (div#valikko and div#sisalto). I think the gap's in the div#sisalto, but I can't get rid of it. Can anyone help?

_Aerospace_Eng_
09-19-2006, 09:46 AM
Seemed to be an issue with a height you set. Try this for your CSS, its more efficient.

body {
background:#FFF url(tausta.png) repeat-x top;
margin:0;
padding:0;
}

#iso1 {
width:720px;
background:url(iso1.png) repeat-y;
margin:0 auto;
}

#iso2 {
width:720px;
background:url(iso2.png) repeat-y right;
}

#otsikko {
background:transparent url(otsikko_yla.png);
width:700px;
height:190px;
margin-left:10px;
}

#valikko {
background:transparent url(otsikko_ala.png);
width:700px;
height:40px;
margin-left:10px;
color:red;
font-size:16px;
text-align:right;
font-family:tahoma, helvetica, sans-serif;
}

#valikko a {
color:#fff;
text-decoration:none;
font-weight:900;
text-align:center;
font-family:monospace;
vertical-align:bottom;
}

#valikko a:hover {
color:#ccc;
text-transform:uppercase;
}

#mainyla {
width:700px;
background:url(maintausta.png) top no-repeat;
}

#mainfade {
width:700px;
background:url(mainfade.png) top repeat-x;
margin-left:10px;
min-height:460px;
}

* html #mainfade {
height:460px;
}

#sisalto {
width:696px;
background:#FFF url(sisaltotausta.png) repeat-y;
margin:auto;
}

#sisalto h1 {
margin-left:5px;
margin-right:5px;
}

#sisalto h2 {
margin-left:10px;
margin-right:10px;
}

#sisalto p {
margin-left:15px;
margin-right:15px;
}
Try this for your markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>Huikea.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="gfx/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="iso1">
<div id="iso2">
<div id="otsikko">&nbsp;</div>
<div id="valikko"> <br/>
&raquo; <a href="index.php">etusivu</a> &raquo; <a href="yhteystiedot.php">yhteystiedot</a> &raquo; <a href="portfolio.php">portfolio</a> &raquo; <a href="linkit.php?sarja=0">linkit</a> &raquo; <a href="tiedostot.php">tiedostot</a> &raquo; <a href="muuta.php">muuta</a> &raquo; </div>
<div id="mainfade">
<!-- SIS&#196;LT&#214; -->
<div id="sisalto"> <img src="gfx/maintausta.png" alt="Huikea.net" />
<h1>Huikea.net</h1>
<h2>Keskener&auml;inen</h2>
<p> Huikea.net on Nomadicin eli Miika Arposen henkil&ouml;kohtainen kotisivu. Kokeilen
t&auml;ll&auml; erin&auml;k&ouml;isi&auml; systeemej&auml;, skriptej&auml; sun muita, joten koettakaa kest&auml;&auml;:)<br/>
<br/>
Huikea.net todellakin on viel&auml; keskener&auml;inen, mutta jotakin sis&auml;lt&ouml;&auml; alkaa jo l&ouml;yty&auml;.
Ja <a href="vieraskirja.php">vieraskirjaankin</a> on lupa kirjoittaa. </p>
<h2>Randomquote</h2>
<p> <b>Nurella on ollut muutama hyv&auml; vapari.</b><br/>
-- Antti Muurinen, <i>jalkapallomaajoukkueemme ent. p&auml;&auml;valmentaja </i><br/>
<br/>
</p>
<p> Sivu ollut netiss&auml;:<br/>
1 vuosi 131 p&auml;iv&auml;&auml; 4 tuntia 59 minuuttia <br/>
<br/>
<br/>
</p>
</div>
<!-- /SIS&#196;LT&#214; -->
</div>
</div>
</div>
</body>
</html>
One thing I noticed is you were using the same ID more than once. You can't do that. IDs can only be used one time. Make use of the reason why CSS is what it is, cascading. Look at how I used one ID and then just a generic a to style all of the links in your navigation rather than have a span around them all.

ronaldb66
09-19-2006, 09:59 AM
I couldn't find any immediate cause; try to remove the background images for a while and work with recognisable background colors and/or borders to see where all the various elements end up. You might need to work with a specific line height on the menu items to sort this out.

By the way: using an id value multiple times is wrong; id's must be unique.
So this:

<span id="valikkoa"><a href="index.php">etusivu</a></span>
<span id="valikkoa"><a href="yhteystiedot.php">yhteystiedot</a></span>
<span id="valikkoa"><a href="portfolio.php">portfolio</a></span>
<span id="valikkoa"><a href="linkit.php?sarja=0">linkit</a></span>
<span id="valikkoa"><a href="tiedostot.php">tiedostot</a></span>
<span id="valikkoa"><a href="muuta.php">muuta</a></span>
is a bad idea. Either use 'class="valikkoa" ' and adjust your styles, or even better, get rid of it completely and select these spans using the parent element's id:

div#valikko span {...}
...
div#valikko span a {...}

Dang! Beaten again...

Nomadic
09-19-2006, 10:28 AM
Thanks for your advice. I solved the problem, and now it works how it should.

_Aerospace_Eng_
09-19-2006, 04:34 PM
I gave you new markup for a reason. The markup you have now is invalid. The markup I gave you is valid. You have your link to your stylesheet in your body tags and you also use special characters that should be converted to html entities.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum