DIV (css) probleem met de layout

Status
Niet open voor verdere reacties.
M

mmmvanmark

Nieuwe gebruiker
Lid geworden
25 aug 2007
Berichten
2
ik ben bezig met het bouwen van een site voor de verandering eens helemaal in css (div's)
nu zit er voor de verandering eens in FF een fout wat betreft de layout ik heb veel geprobeerd maar ik krijg het er niet uit de div id=content die sluit niet aan tegen de bovenste balk maar de div id=side wel als je niet snapt wat ik prcs bedoel dan copy paste de code

het zal misschien wel iets klein zijn dus alvast bedankt voor die gene die me helpen ;)
:D

HTML: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
	background-color:#6E6E6E;
	background-image:url(images/img1.jpg);
	background-repeat:repeat-x;
	font-family: Arial,Verdana,Sans-serif;
	font-size:14px;
}
#maintb{ 
	width:800px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	height:826px;  
	border:#cccccc 1px solid;
	background-color:#ffffff;
	color:#FF9900;
	border:#ffffff 2px solid;
}
#banner{
	height:298px;
	width:800px;
	background:url(images/ban.jpg);
}
#sidebar{
       float:left;
	width:200px;
	height:25px;
	margin-top:2px;
	background:url(images/side.jpg);
}
#navcontainer ul{
        line-height:15px;
	margin-top:2px;
	float:right;
	height:25px;
	padding-left:0px;
	margin-left:0px;
	background-color: #000000;
	color:#ffffff;
	width:598px;
	font-family:arial, helvetica, sans-serif;
}
#navcontainer ul li { 
       display:inline; 
}
#navcontainer ul li a{
        margin-right:7px;
        font-size:11px;
        text-transform:uppercase;
	padding:5px;
        background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	float:right;
}
#navcontainer ul li a:hover{
	background-color:#ffffff;
	color:#999999;
}
#side{
       float:left;
	width:200px;
	height:500px;
	background-color:#000099;
	padding:0px;
}
#content{
        float:right;
	width:598px;
	height:500px;
	background-color:#FF0000;
}
</style>
</head>

<body>
  
  <div id="maintb">
  
         <div id="banner">&nbsp;</div>
           
                  <div id="sidebar">&nbsp;</div>
                            <div id="navcontainer">
                               <ul id="navlist">
                                <li><a href="#">Item one</a></li>
                                <li><a href="#">Item two</a></li>
                                <li><a href="#">Item three</a></li>
                                <li><a href="#">Item four</a></li>
                                <li><a href="#">Item five</a></li>
                               </ul>
                             </div>
                <div id="side">side</div>
                    <div id="content">content</div>
           
  </div>
  
</body>
</html>
 
Wat ik dan altijd doe is eerste de met de margin en padding aan de gang. Het kan best zijn dat het probleem in een andere class zit.

Ook zou je de width en height aan kunnen passen. (Doe het -1 of +1 px per keer en vergeet niet de originele waarde ;)
 
hmm ik heb het al ik heb gewoon de margin-top naar -14px gedaan ik wist niet dat je in het min kon staan :S

thanks:D

HTML: 
#content{
    float:right;
	width:598px;
	height:500px;
	background-color:#FF0000;
	padding:0px;
	margin-top:-14px;
}
 
Beste Mark,

Oplossing is goed, alleen is het probleem fout. Er zit geen foutje in FF en ook niet in IE. Er zit echter wel een benaderings verschil in FF en IE. FF heeft de eigenschap om een aantal items een padding/margin te geven en die wijkt een aantal pixels af van de padding/margin die IE standaard geeft. Dat betekent dus dat de FF UL een margin van 14px kan hebben terwijl IE maar 2px toekend.

Dit is echter simpel in te stellen: neem het heft in eigen hand. Voeg boven aan je CSS toe:
* { padding:0; margin: 0}

De asterix(*) staat voor "alle elementen". Alle elementen hebben nu standaard een padding en marign van 0. Dat betekent wel dat je dus voor de UL even in moet stellen welke margin hij wel moet hebben.

Bovenaan je design is in FF de balk groter dan in IE. Dat is ook opgelost met bovenstaande regel.

Ik hoop dat je er wat aan hebt.

Wout
 
w.sickman zei:
Beste Mark,

Oplossing is goed, alleen is het probleem fout. Er zit geen foutje in FF en ook niet in IE. Er zit echter wel een benaderings verschil in FF en IE. FF heeft de eigenschap om een aantal items een padding/margin te geven en die wijkt een aantal pixels af van de padding/margin die IE standaard geeft. Dat betekent dus dat de FF UL een margin van 14px kan hebben terwijl IE maar 2px toekend.

Dit is echter simpel in te stellen: neem het heft in eigen hand. Voeg boven aan je CSS toe:
* { padding:0; margin: 0}

De asterix(*) staat voor "alle elementen". Alle elementen hebben nu standaard een padding en marign van 0. Dat betekent wel dat je dus voor de UL even in moet stellen welke margin hij wel moet hebben.

Bovenaan je design is in FF de balk groter dan in IE. Dat is ook opgelost met bovenstaande regel.

Ik hoop dat je er wat aan hebt.

Wout
Klik om te vergroten...

ik in ieder geval wel :D
 
Hoi Sickman, Erg blij met je opmerking Wout!
Dit heeft mij uren puzzelen gekost, ik kon blijven sleutelen maar bleef niet lekker aansluiten. Je * loste het allemaal op. Super :)
 
* kun je wel gebruiken maar let wel met * geef je alles een margin 0 en padding 0 het geen wat later dus weer een margin of padding moet hebben moet je weer opmaken.

waarom zou je eerst iets op 0 zetten en daarna weer opmaken als het van zichzelf al een standaard een opmaak heeft ?
 
@pum: Omdat je dan in elke browser dezelfde standaard waardes hebt ;) Oftewel CSS-reset.

Deze vraag is overigens al uit 2007, mocht er meer informatie noodzakelijk zijn gelieve een nieuwe vraag aan te maken.
Deze gaat op slot :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan