[CSS] 3 Kolommen met in de middelste enkel een image - Softwareontwikkeling

maandag 18 april 2005 13:43

Acties:

Verwijderd

Topicstarter

Een layout met 3 kolommen is geen probleem. Een footer daarbij is ook zo bij Google gevonden, mocht je het niet uit je hoofd weten of eigen voorbeeld code tot je beschikking hebben. Maar nu een geheel nieuw probleem, althans, voor mij.

Maak een wrapper van 800 pixels breed, gecentreerd in de pagina. Voeg hieraan toe 3 kolommen, links, rechts en een gecentreerde kolom. De linker kolom is 200 pixels breed, en de rechter ook. De middelste kolom moet een foto van 400 pixels kunnen laten zien. Hier gaat het fout voor Internet Explorer.

offtopic:
(In mijn specifieke geval gaat het uiteindelijk over een Flash-movie wat het plaatje vervangt, maar dat terzijde.)

Verschillende doctypes willen nog weleens wat uithalen, maar tot nu toe zonder succes. Firefox doet het wel goed.

Als voorbeeld heb ik een pagina online gezet. Deze pagina vind je hier:

http://www.mobdb.com/got/columns/test.html

Zoals je ziet gaat het in FF goed. Als je de link copy/paste naar IE dan zul je zien dat IE het plaatje naar beneden duwt. Meer specifiek: het gele vlak mag niet zichtbaar zijn.

Bijkomend "probleem" wat ik met andere CSS oplossingen ben tegengekomen is dit: IE heeft er een handje van onverklaarbare pixels (de 3-pixel bug?) zomaar toe te kennen aan DIV-jes, waardoor de pagina niet klopt qua ontwerp.

Ik moet nu alleen aan mijn baas uitleggen waarom ik hier een uur mee bezig ben

Het kan ook af zijn binnen 20 seconden door heel simpelweg een tabelletje

te gebruiken.

Heeft iemand wat links, kernwoorden, materiaal, tips, etc. voor me?

maandag 18 april 2005 13:55

Acties:

Verwijderd

Je laat de linker- en de rechterkolom floaten, waardoor de middelste in IE naar beneden wordt gedrukt. Ik heb ditzelfde gehad op mijn website. Het is gelijk getrokken door de middelste kolom een padding-top te geven die gelijk is aan de bovenste (paarse) header.

maandag 18 april 2005 13:57

Acties:

Sappie

De Parasitaire Capaciteit!

misschien kun je hier wat mee (ff snel in elkaar geflanst en excuses voor de lelijke kleuren

) :

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>3-col layout via CSS</title>
    <style type="text/css">
        body, html { text-align: center; margin:0; padding:0; }
        
        #container {
            width: 800px;
            margin: 0 auto;
            background: black;
            padding: 0;
        }
        
        #header {
            width: 780px;
            padding: 10px;
            height: 50px;
            background: red;
        }
        
        .sidebar {
            float: left;
            width: 180px;
            padding: 10px;
            background: green;
        }

        #middle {
            float: left;
            width: 400px;
            background: yellow;
            height: 100px;
        }
        
        #footer {
            clear: both;
            width: 780px;
            padding: 10px;
            background: blue;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="header">HEADER</div>
        <div class="sidebar">LEFT</div>
        <div id="middle">MIDDLE</div>
        <div class="sidebar">RIGHT</div>
        <div id="footer">FOOTER</div>       
    </div>
</body>
</html>

[ Voor 49% gewijzigd door Sappie op 18-04-2005 14:18 ]

Specs | Audioscrobbler

maandag 18 april 2005 16:06

Acties:

Blue-eagle

De laatste werkte perfect!

donderdag 21 april 2005 20:34

Acties:

Pendaco

Vogon Poetry FTW!

Ik ben ook met die code van Sappie bezig geweest, alleen heb ik hem iets anders gebruikt.
Ik hoef alleen de 2 sidebars zonder het middelste plaatje (en natuurlijk de header & footer).

Nu ben ik in Dreamweaver bezig maar die 2 sidebars willen met geen mogelijkheid naast elkaar blijven staan.

Als ik een kleine breedte in pixels opgeef komen ze wel naast mekaar maar vullen ze beide niet de totale breedte van de rest (header en footer) op.
Maak ik ze op een grootte zodat ze in Dreamweaver naast elkaar staan, dan komen ze uiteindelijk in ie & firefox onder elkaar te staan

hierbij de html

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>3-col layout via CSS</title>
    <link href="css/index_new.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="container">
        <div id="header">HEADER</div>
        
        <div id="title">title</div>
        <div class="sidebar">LEFT</div>
        <div class="sidebar">RIGHT</div>
        
        <div id="footer">FOOTER</div>        
    </div>
</body>
</html>

en css

code:

body, html {
    text-align: center;
    margin:0;
    padding:0;
    background-color: #CCCCCC;
}
        
        #container {
            width: 750px;
            margin: 0 auto;
            padding: 0;
        }
        
        #header {
    width: 750px;
    padding: 10px;
    height: 20px;
    background: #FFFFFF;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #CCFF99;
    margin-top: 10px;
        }
        
        .sidebar {
    float: left;
    width: 385px;
    background: #f2f2f2;
    padding-top: 10px;
    padding-bottom: 10px;
        }
        
        
        #footer {
            clear: both;
            width: 750px;
            padding: 10px;
            background: #FFFFFF url(../Pictures/spacer1.gif) repeat-x;
            height: 50px;
        }
#title {
    background-color: #FFFFFF;
    width: 750px;
    padding: 10px;
    margin-top: 10px;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #CCFF99;
}

Iemand een idee, of nog beter een oplossing?

donderdag 21 april 2005 20:59

Acties:

Sappie

De Parasitaire Capaciteit!

Zo ff snel: 2 * 385 is meer dan 750

maak de sidebars eens 375px breed.

Specs | Audioscrobbler

donderdag 21 april 2005 21:58

Acties:

Pendaco

Vogon Poetry FTW!

Sappie schreef op donderdag 21 april 2005 @ 20:59:
Zo ff snel: 2 * 385 is meer dan 750
maak de sidebars eens 375px breed.

mm dat had ik niet eens gezien, thnx

maarr..

onderstaand plaatje is het resultaat van 375px breed

snap jij t nog, ik niet meer

Afbeeldingslocatie: http://home.aim.avans.nl/s135595/Pictures/site_test.jpg

vrijdag 22 april 2005 12:54

Acties:

Sappie

De Parasitaire Capaciteit!

aangezien je het W3C box-model gebruikt worden de padding en margin en borders nog bij je width (en height) opgeteld. Je header, title en footer hebben daarom een breedte van 770px. je moet dus van deze div's de width veranderen in 730px wil je de 10px padding gebruiken.

[ Voor 4% gewijzigd door Sappie op 22-04-2005 12:55 ]

Specs | Audioscrobbler

vrijdag 22 april 2005 14:32

Acties:

Verwijderd

Ja maar beter gebruikt je helemaal geen padding, dan kom je ook niet in de problemen. Als je dan toch padding wil gebruiken doe dat dan met child elementen. Zodoende hoef je ook geen hacks te gebruiken.

vrijdag 22 april 2005 14:35

Acties:

Sappie

De Parasitaire Capaciteit!

Waar zie jij hacks? En ik zou niet weten waarom je beter geen padding zou moeten gebruiken.

Specs | Audioscrobbler

vrijdag 22 april 2005 21:37

Acties:

Pendaco

Vogon Poetry FTW!

Sappie schreef op vrijdag 22 april 2005 @ 12:54:
aangezien je het W3C box-model gebruikt worden de padding en margin en borders nog bij je width (en height) opgeteld. Je header, title en footer hebben daarom een breedte van 770px. je moet dus van deze div's de width veranderen in 730px wil je de 10px padding gebruiken.

Bij deze super bedankt $_/-\o_$ , het is gelukt

Het blijft toch een lastig fenomeen dat CSS