[CSS] layout probleem! - Softwareontwikkeling

zondag 12 oktober 2003 19:09

Acties:

Topicstarter

Ik probeer dus het volgende te bereiken dmv layout maken via CSS:

Een header aan de bovenkant van de pagina met daarin het logo van het bedrijf en een menubalk.
Daaronder twee kolommen 1 voor de teksten en 1 voor aanvullende info (is smaller dus)
Daaronder een footer met wat contact info etc...

Nu heb ik het hele f*cking (excusez le mot, of zoiets

) internet en de search van dit forum gebruikt en ben ik al een heel eind gekomen. (ook nadat ik mijn CSS info weer vanuit mijn boeken had opgefrist).
Ik heb het nu in mozilla voor elkaar om de header en de twee kolommen daaronder te maken (footer nog maar niet mee begonnen

)
Maar in MSIE komt de tweede kolom onder de eerste!
Wat doe ik fout? Ik zie het niet meer na een week kloten (sorry ben maar een amateur)

de html:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet href="test.css" type="text/css">

</head>
<body>
<div id="content">
    <div id="header">Dit is de header!</div>
    <div id="leftcontent">Dit is het linker menu!</div>
    <div id="rightcontent">Dit is het main gedeelte!</div>
</div>
</body>
</html>

de CSS:

code:

div * {
box-sizing:border-box;
-moz-box-sizing:border-box;
}

body {  
background-color:#99B3CC;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#content {
height:100%;
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:center;
}

#rightcontent {
width:250px;
padding-bottom:10px;
float:left;
background:#fff;
border:1px solid #000000;
}

#leftcontent {
width:500px;
padding:0px;
float:left;
border:1px solid #000000;
background-color:#fff;
}

#header {
background-color:#ffff00;
border:1px solid #000000;
padding:0px;
height:53px;
}

#ondertitel {
background:#fff;
height:17px;
font-size:9px;
font-style:italic;
text-align:right;
padding-right:5px;
padding-top:2px;
}

please help me!!! alvast bedankt!

Ik zie nu ook dat ik zelfs hier de layout vern**k!

[ Voor 9% gewijzigd door -TheNose- op 12-10-2003 19:09 ]

zondag 12 oktober 2003 19:18

Acties:

Verwijderd

#rightcontent is ook float: left ? moet dat niet dan float: right zijn?
enne tis waarschijnlijk ook net te krap,.. 500 + 250px en dan die border eromheen nog

[ Voor 39% gewijzigd door Verwijderd op 12-10-2003 19:23 ]

zondag 12 oktober 2003 19:20

Acties:

-TheNose-

Topicstarter

Nope de oplossing voor dit kleine probleem is n dit topic beschreven:
DocType probleem IE6
ik heb de url uit mijn doctype definitie gehaald en presto IE laat hem ook zien!

zondag 12 oktober 2003 19:24

Acties:

Paling1

R 8.5

Als je het eens probeert met deze dingen in je css:

code:

#rightcontent {
width:248px;
padding-bottom:10px;
float:right;
background:#fff;
border:1px solid #000000;
}

#leftcontent {
width:498px;
padding:0px;
float:left;
border:1px solid #000000;
background-color:#fff;
}

Dan werkt het bij mij wel in IE6 met SP1

Ik heb effe de breedtes van de divs aangepast, want het lijkt wel alsof ie de border er nog bij optelt. En ik heb de 'float' op "right" gezet bij de rightcontent.

Of tie nu nog werkt in Mozilla weet ik niet hoor.....

edit:

Vreemd hoor, als je doctype uit je html haalt dan werkt het wel.

Alleen is die dan niet meer helemaal volgens de W3C-regels!!

[ Voor 14% gewijzigd door Paling1 op 12-10-2003 19:27 ]

zondag 12 oktober 2003 19:24

Acties:

Verwijderd

nou fijn dat de search je dan weer verder heeft geholpen

zondag 12 oktober 2003 19:25

Acties:

PeetR

nope; Heeft wel degelijk te maken dat de #rightcontent float: right; moet zijn. Vervolgens beide breedtes 2 px kleiner maken. Komt omdat je een border van 1 px. heb. zo werkt het wel:

code:

div * {
box-sizing:border-box;
-moz-box-sizing:border-box;
}

body {  
background-color:#99B3CC;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#content {
height:100%;
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:center;
}

#rightcontent {
width:248px;
padding-bottom:10px;
float:right;
background:#fff;
border:1px solid #000000;
}

#leftcontent {
width:498px;
padding:0px;
float:left;
border:1px solid #000000;
background-color:#fff;
}

#header {
background-color:#ffff00;
border:1px solid #000000;
padding:0px;
height:53px;
}

#ondertitel {
background:#fff;
height:17px;
font-size:9px;
font-style:italic;
text-align:right;
padding-right:5px;
padding-top:2px;
}

edit:
te laat moet sneller leren typen

[ Voor 3% gewijzigd door PeetR op 12-10-2003 19:26 . Reden: dubbelpost ]

Your time as a student is the best time of your life

zondag 12 oktober 2003 20:38

Acties:

-TheNose-

Topicstarter

[quote]PeetR schreef op 12 October 2003 @ 19:25:
nope; Heeft wel degelijk te maken dat de #rightcontent float: right; moet zijn. Vervolgens beide breedtes 2 px kleiner maken. Komt omdat je een border van 1 px. heb. zo werkt het wel:

code:

1	allemaal code zie boven :)

Als ik deze code gebruik werkt het niet in EN mozilla EN MSIE! Had het net zelf bijna voor elkaar

Maar dit stukje wordt heel anders geinterpreteerd door mozilla en MSIE 6:

code:

1	border:1px solid #000000;

MSIE 6 telt die ene pixel van de border erbij en mozilla niet!

zondag 12 oktober 2003 20:54

Acties:

crisp

Devver

Pixelated

-CKY2K- schreef op 12 oktober 2003 @ 20:38:
[...]
MSIE 6 telt die ene pixel van de border erbij en mozilla niet!

Zoek eens op 'boxmodel'

Intentionally left blank

zondag 12 oktober 2003 22:27

Acties:

-TheNose-

Topicstarter

Ok ik heb gezocht op boxmodels en een hoop frustrerende dingen gevonden (waarom niet allemaal gewoon de standaard implementeren???) maar goed, ik heb dus mijn document type dinges aangepast zodat de boxen hetzelfde geinterpreteerd worden. Nu wil ik alleen een footer toevoegen, maar daar gaat het qua plaatsing weer fout.

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel=stylesheet href="test.css" type="text/css">

</head>
<body>
<div id="maincontainer">
    <div id="header">Dit is de header!</div>
    <div id="leftcontent">Dit is het linker menu!</div>
    <div id="rightcontent">Dit is het main gedeelte!</div>
    <div id="footer">Dit is de footer!</div>
</div>
</body>
</html>

css:

code:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

body {  
background-color:#99B3CC;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#maincontainer {
height:100%;
width:750px;
margin-right:auto;
margin-left:auto;
margin-top:0px;
padding:0px;
text-align:center;
}

#footer {
background-color:#ffffff;
border:1px solid #000000;
margin:10px 0px 0px;
height:53px;
font-size:9px;
font-style:italic;
text-align:right;
padding:0px;
z-index:1;
}

#rightcontent {
margin:0px 0px 0px;
width:40%;
padding-bottom:0px;
float:right;
background:#fff;
border:1px solid #000000;
}

#leftcontent {
margin:0px 0px 0px;
width:60%;
padding:0px;
float:left;
border:1px solid #000000;
background-color:#fff;
}

#header {
background-color:#ffff00;
border:1px solid #000000;
margin:0px 0px 0px;
padding:0px;
height:53px;
}

IE geeft deze prima weer, maar mozilla plaatst de footer ONDER de vorige twee divjes! AAAAHHHH nou ja aldoende leert men, maar kan iemand me toch even helpen?

[ Voor 20% gewijzigd door -TheNose- op 12-10-2003 22:30 ]

zondag 12 oktober 2003 22:44

Acties:

crisp

Devver

Pixelated

was het niet zo dat floats in IE wel ruimte innamen, maar in Mozilla niet?
iig zijn hierin nog wel verschillen tussen de verschillende browsers.
Wat ik ook nog wel eens wil doen is met JS een andere stylesheet includen op basis van browser-detectie - niet optimaal maar wel een stuk effectiever dan dit soort designs zonder hacks (-moz-box-sizing noem ik al een hack) goed te krijgen...

Intentionally left blank

zondag 12 oktober 2003 23:08

Acties:

-TheNose-

Topicstarter

Daar istie weer, heb mijn footer probleem voorlopig (moet nog op andere browsers dan MSIE en Mozilla testen) opgelost door die ook het elemant float:left mee te geven, dan komt hij bij beiden netjes onder de vorige divjes!

Indien meer problemen volgen dan horen jullie weer van me!

Oh 1 ding, moet ik dan de header ook een float:left geven om de code helemaal compleet te maken?

maandag 13 oktober 2003 10:25

Acties:

IschaGast

Hier misschien wat handige links:
Layout-o-Matic
css discuss
Wiki

maandag 13 oktober 2003 12:24

Acties:

-TheNose-

Topicstarter

IschaGast schreef op 13 October 2003 @ 10:25:
Hier misschien wat handige links:
Layout-o-Matic
css discuss
Wiki

Layout-o-matic? Ik wil geen voorgekauwde code hebben...wil wel zelf snappen waarom ik bepaalde code klop.

Voorlopig gaat het vrij aardig nu met het ontwerp, je komt wel steeds weer andere kleine probleempjes tegen, maar goed als ik zo de topics doorlees hier over css ben ik niet de enige die hier last van heeft!

maandag 13 oktober 2003 14:02

Acties:

Clay

cookie erbij?

Vaak is het gebruik van de float juist het probleem

Persoonlijk zie ik de float enkel als een hulpmidden om binnen content blokken (meestal plaatjes, maar kunnen ook korte "notes" zijn oid, ala post-it) rechts of links uit te lijnen, met de tekst daaromheen lopend, meer niet. Voor het positioneren van design elementen, dus menu's en content delen, is float imo niet zo handig; omdat het nooit garandeert dat het floatende element ook blijft staan waar die staat. Resize je browser, en alles kan onder elkaar komen.

Wat veel gebruikt wordt bij het maken van colommen is de combinatie van (vaak) het content deel met brede margins rechts (en of links) om ruimte te maken voor andere colommen die met position:absolute ernaast gezet worden. Hoe je ook resized, het zal nooit van z'n plaats komen.

[ Voor 6% gewijzigd door Clay op 13-10-2003 14:03 ]

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin