Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with divs

    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?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Seemed to be an issue with a height you set. Try this for your CSS, its more efficient.
    Code:
    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
    Code:
    <!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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap

    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:
    Code:
    <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:
    Code:
    div#valikko span {...}
    ...
    div#valikko span a {...}
    Edit: Dang! Beaten again...
    Last edited by ronaldb66; 09-19-2006 at 10:02 AM.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your advice. I solved the problem, and now it works how it should.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •