CSS Kolommen

[mhproductions]

Ik heb een probleempje met CSS!

Ik heb op: http://mhproductions.pand...schoenmakers/monturen.php een pagina met links een menu en rechts de content van de pagina, maar in IE6, FireFox en Opera schiet het menu naar de bodem (onder de content). Alleen in IE7 werkt de pagina correct

Hieronder staat het stylesheet:

code:

/* Main Stylesheet */

body {
    background-color: #fffce7;
    color: #91b829;
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0px 0px 0px 0px;
    text-align: center;
}

a {
    color: #91b829;
    text-decoration: underline;
}

a:hover {
    color: #91b829;
    text-decoration: none;
}

/* Page */

#wrapper {
    margin: 4px 4px 4px 4px;
    padding: 0px 0px 0px 0px;
    width: 800px;
}

#content_top {
    width: 582px;
    height: 20px;
    margin: 4px 12px 0px 4px;
    padding: 0px 0px 0px 0px;
    background-image: url(images/page_top.gif);
    background-repeat: no-repeat;
    float: right;
}

#content {
    width: 582px;
    margin: 0px 12px 0px 4px;
    padding: 5px 0px 10px 0px;
    background-image: url(images/page_body.gif);
    background-repeat: repeat-y;
    float: right;
    clear: right;
}

#content p {
    margin-left: 25px;
    margin-right: 25px;
    text-align: left;
}

.kop{
    font-size: 18px;
    font-weight: bold;
    margin-left: 25px;
    margin-right: 25px;
    text-align: left;
}

#content_bottom {
    width: 582px;
    height: 45px;
    margin: 0px 12px 4px 4px;
    padding: 0px 0px 0px 0px;
    background-image: url(images/page_bottom.gif);
    background-repeat: no-repeat;
    float: right;
    clear: right;
}

#copyright {
    margin-top: 30px;
    margin-bottom: 5px;
    font-size: 10px;
    color: #f47920;
}

#logo {
    width: 190px;
    height: 190px;
    margin: 4px 4px 4px 8px;
    padding: 0px 0px 0px 0px;
    background-image: url(images/intro_button06a.jpg);
    background-repeat: no-repeat;
    float: left;
}

#sublogo {
    width: 190px;
    height: 190px;
    margin: 4px 4px 4px 8px;
    padding: 0px 0px 0px 0px;
    float: left;
    clear: left;
}

#buttons {
    width: 190px;
    height: 190px;
    margin: 0px 4px 4px 8px;
    padding: 0px 0px 0px 0px;
    float: left;
    clear: left;
}

#buttons img {
    margin: 4px 0px 4px 0px;
    border: 0px;
}

Weet iemand wat het probleem is, want ik kom er niet uit...

Alvast bedankt

[StevenK]

Volgens mij probeer je twee boxen die elk een 'clear' hebben naast elkaar te zetten ?

Wat je volgens mij wilt, kun je beter bereiken door je #wrapper een position: mee te geven, waardoor je je content absoluut binnen die wrapper kunt positioneren.

[TeeDee]

En als je de 'buttons' nu eens eerst in je source plaatst, en dan pas de content?

[BasieP]

TeeDee schreef op woensdag 22 maart 2006 @ 11:33:
En als je de 'buttons' nu eens eerst in je source plaatst, en dan pas de content?

en dan er achter komt dat float: right dat niet zo leuk vind?

nee de TS doet idd wat fout bij het clearen van ze floats

de normale float:right layout is dit:

HTML:

<div id="wrapper">
  <div id="content" style="float:right;">
  <div id="menu" style="float:right;">
  <br clear="all">
</div>

logischer (wat de meeste daarom ook doen) is echter links beginnen,
en dan word ie zo:

HTML:

<div id="wrapper">
  <div id="menu" style="float:left;">
  <div id="content" style="float:left;">
  <br clear="all">
</div>

die wrapper is natuurlijk optioneel in beide gevallen

[ Voor 50% gewijzigd door BasieP op 22-03-2006 11:36 ]

[TeeDee]

BasieP schreef op woensdag 22 maart 2006 @ 11:35:
[...]
en dan er achter komt dat float: right dat niet zo leuk vind?

Bugger, je hebt gelijk. Te snel gekeken.
_{het lijkt me dan in ieder geval voor de opbouw van je document beter}

[BasieP]

TeeDee schreef op woensdag 22 maart 2006 @ 11:39:
[...]
_{het lijkt me dan in ieder geval voor de opbouw van je document beter}

eensch

[ Voor 10% gewijzigd door BasieP op 22-03-2006 11:42 ]

[mhproductions]

Ik heb jullie tips geprobeerd, maar als ik clear all doe, dan gaat alles door elkaar staan...

Ik heb ook alles in de goede volgorde gezet (eerst menu en dan content) maar ook dat heeft geen effect...

Iemand nog een andere tip?

Alvast bedankt

[StevenK]

mhproductions schreef op woensdag 22 maart 2006 @ 18:35:
Ik heb jullie tips geprobeerd, maar als ik clear all doe, dan gaat alles door elkaar staan...

Ik heb ook alles in de goede volgorde gezet (eerst menu en dan content) maar ook dat heeft geen effect...

Iemand nog een andere tip?

Alvast bedankt

Zoals ik al eerder zei:

Zorg dat je wrapper een position heeft, dan kun je de andere boxen met position:absolute neerzetten, dan hoef je geen gebruik te maken van het nog steeds slecht ondersteunde 'float' en 'clear'.

[Boelie-Boelie]

StevenK schreef op woensdag 22 maart 2006 @ 18:38:
Zorg dat je wrapper een position heeft, dan kun je de andere boxen met position:absolute neerzetten, dan hoef je geen gebruik te maken van het nog steeds slecht ondersteunde 'float' en 'clear'.

Elke methode heeft zo z'n nadelen, ook die van jou, maar aan ondersteuning ontbreekt het niet.

Het maken van een twee-kolomslayout met floats wordt uitgelegd op 456 Berea Street.

Een menu kun je beter maken zoals in het Listutorial wordt uitgelegd (evt. met CSS rollover images). En kopjes maak je met heading-elementen (<h1>, <h2>, etc.), niet door het gebruik van de volgende

code:

<p><div class="kop">Monturen</div></p>

[ Voor 31% gewijzigd door Boelie-Boelie op 22-03-2006 20:14 . Reden: Extra tips toegevoegd ]

[StevenK]

Boelie-Boelie schreef op woensdag 22 maart 2006 @ 20:06:
[...]

Elke methode heeft zo z'n nadelen, ook die van jou, maar aan ondersteuning ontbreekt het niet.

Ik kom anders nog steeds heel veel shit in voornamelijk IE tegen als ik teveel float / clear gebruik. IE heeft nu éénmaal een brakke CSS ondersteuning.

[ Voor 9% gewijzigd door StevenK op 22-03-2006 22:43 ]

[mhproductions]

ik heb het werkend gekregen! Heel erg bedankt!!!