[CSS] Container element werkt niet?

[Slagers]

Ik zal zelf wel aan het prutsen zijn, maar ik zie het gewoon ff niet meer.

Site: http://www.skate-off.nl/index.php/index_kaal
CSS: http://www.skate-off.nl/index.php?css=weblog/weblog_css

Nou heb ik een container-element 'dehelezooi' aangemaakt, maar volgens mij werkt deze niet. Waar blijft hij? Hij zou het hele middengedeelte volgens mij moeten omvatten, waardoor daar dus ook de achtergrond wit is. Maar ik vind hem niet terug...

[Zoefff]

Je positioneert alles absoluut, waardoor je alle elementen uit de 'flow' haalt. Je div 'dehelezooi' word dus niet opgerekt door de rest van de elementen, en blijft gewoon 0px groot bovenaan de pagina staan. Geef hem maar eens een 'border:10px solid red' mee, dan zie je wat ik bedoel.

Een oplossing is om 'dehelezooi' (ook) een vaste grootte mee te geven, maar dat is nogal vies. Beter kan je de rest allemaal relatief positioneren zodat 'dehelezooi' gewoon zo ver word opgerekt als nodig is.

[Gonadan]

Zoefff schreef op dinsdag 18 april 2006 @ 16:35:
Een oplossing is om 'dehelezooi' (ook) een vaste grootte mee te geven, maar dat is nogal vies. Beter kan je de rest allemaal relatief positioneren zodat 'dehelezooi' gewoon zo ver word opgerekt als nodig is.

Waarom is dat nogal vies? Ik probeer zelf juist de hele site op het scherm te laten passen.
En dan heeft m'n main content div toch echt een vaste grootte nodig

[JHS]

Omdat het volgens mij niet je feitelijke probleem oplost: de absolute positionering van al die elementen bínnen je main content div. Als je daarnaast, om andere redenen, die div een vaste grootte mee wil geven is het een ander verhaal .

Punt is overigens wel dat je dan beter 100% kan doen, aangezien iemand zijn scherm op een andere resolutie heeft staan. Maar eerlijkgezegd zie ik dan nog niet echt de meerwaarde van de main content div, omdat je dan scrollbalken binnen die div moet krijgen wil je het kunnen laten zien als je content te groot is.

[Zoefff]

Nouja, het absoluut positioneren van al je elementen is verre van flexibel. Daarnaast is het gewoon niet nodig. Let wel, ik heb het dus over het absoluut positioneren, niet over het meegeven van een vaste breedte. Daar kan ik vaak nog wel in meegaan.

Maar neem als voorbeeld je header (#topmenu en #menuknoppen) en je content (#weblog). Deze drie elementen heb je allemaal een vaste positie gegeven. Als je nu 1 van de drie een paar pixels groter of kleiner maakt, moet je de positie van de andere 2 elementen ook veranderen, omdat ze niet automatisch zullen meebewegen. Was alles relatief gepositioneerd, dan zouden de andere 2 gewoon netjes op de eerste aansluiten.

Soms zijn er wel degelijk argumenten voor absolute positionering te vinden, maar in dit geval bied het afaik alleen maar nadelen t.o.v. relatieve positionering

[Slagers]

Ben bezig het geheel relatief te positioneren. Maar eens kijken of dat me gaat lukken.

[Slagers]

http://www.skate-off.nl/index.php/index_kaal_relatief
Hier kun je mijn vorderingen zien. Begint al wel ergens op te lijken.

Rood is kleur van container (dehelezooi) en paarse is van weblog gedeelte. Ik snap alleen nog niet waar die balk boven de berichten vandaan komt... Witte gedeelte met tekstblokken zou wat mij betreft helemaal bovenaan moeten beginnen.

EDIT: in FireFox that is... in IE laat hij dat paarse gedeelte boven logs niet zien... help!

[ Voor 12% gewijzigd door Slagers op 18-04-2006 17:32 ]

[Slagers]

Heb nu alle positions van absolute in relative gewijzigd en het is een puinhoop:
http://skate-off.nl/index.php/index_kaal_relatief

Nu weet ik het weer waarom ik begonnen ben met absolute ;-)

Kan iemand me ajb ff assisteren, ik zit de hele dag op die code te turen en zie het gewoon niet meer....

[Zoefff]

Ik zie nog allemaal absolute dingen staan? Verkeerde stylesheet misschien?

[Slagers]

Verwijzing naar stylesheet was beetje vaag. Maar nu

code:

<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=weblog/weblog_css}' />
<style type='text/css' media='screen'>@import "{stylesheet=weblog/weblog_css_kaal_relatief}";</style>

Daar heb ik nu

code:

<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=weblog/weblog_css_kaal_relatief}' />
<style type='text/css' media='screen'>@import "{stylesheet=weblog/weblog_css_kaal_relatief}";</style>

Van gemaakt. Nu wordt het geheel ook niet meer gecentreerd, maar zou de css wel de goede moeten zijn. *argh*

[ Voor 19% gewijzigd door Slagers op 18-04-2006 18:36 ]

[Zoefff]

Tsja euh

Je maakt er nu wel een beetje een zootje van

Botweg overal 'absolute' vervangen door 'relative' heeft natuurlijk niet zo heel veel zin. Kijk bijvoorbeeld eens naar

Cascading Stylesheet:

position:relative;left:0px;top:240px;

Als je dan de boel relatief positioneert, waarom geef je dan nog absolute waarden op?

[Slagers]

Heb dat bij de meeste elementen ook wel aangepast. Maar dat leverde nog een puinzooi op.
Snap er echt geen fluit meer van.

EDIT: Het paarse vlak is volgens mij de achtergrondkleur van het 'weblog' element', maar dat komt dus heel ergens anders te staan.

Heb het door jouw genoemde getal nu aangepast.

[ Voor 43% gewijzigd door Slagers op 18-04-2006 18:42 ]

[JHS]

Misschien is het het beste als je even afstand en pauze neemt van je code, daarna zie je het vaak een stuk beter . Ook zou ik persoonlijk gewoon álle positioneringszaken uit je CSS slopen, en vervolgens opnieuw beginnen. Daar komt het namelijk wel op neer, als je overstapt van absolute naar relatieve positionering.

[Slagers]

Ik had het geheel in eerste instantie juist absoluut opgezet omdat het me relatief niet wou lukken. Was toen eigenlijk al tegen beter weten in, omdat ik overal al las dat relatief gewoon beter was. En nu blijkt dus ook dat de gewenste layout alleen kan worden uitgevoerd door relatief te positioneren.

Maar het zijn volgens mij maar een paar elementen en nu al positioneren de achtergrond en de inhoud anders.

[Zoefff]

Wat JHS zegt is vaak wel waar, mik je complete opmaak weg en begin even rustig overnieuw. Een quick & dirty opzetje:

Cascading Stylesheet:

body {
    background-color:#000000;
    font-size: 11px;
    font-family: "Trebuchet MS", Helvetica, Verdana;
    
    width:760px;
    margin:0px auto 0px auto;
}
hr {
    display:none;
}
#menu {
    padding-left:0px;
    margin-left:0px;
    background-color:#0093D2;
}
    #menu li {
        list-style-type:none;
        display:inline;
    }
#menuknoppenlijst {
    padding-left:0px;
    margin-left:0px;
}
    #menuknoppenlijst li {
        display:inline;
        padding:0px 5px 0px 5px;
    }
    #menuknoppenlijst img {
        border:0px;
    }

#weblog {
    background-color:#FFFFFF;
}
    .log {
        width:360px;
        padding:10px;
        float:left;
        height:120px;
    }
    .log img {
        float:right;
        border:1px solid black;
    }
    .log h4 {
        margin:0px;
        color:#0093D2;
        text-transform:uppercase;
        border-top:1px solid #0093D2;
    }
    .log p {
        line-height: 14pt;
    }

HTML:

<ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="http://www.skate-off.nl/index.php/weblog/rss_2.0/">RSS</a></li>
    <li><a href="/stamcafe/">Stamcafe</a></li>
    <li><a href="/links/">Links</a></li>
    <li><a href="http://www.skate-off.nl/index.php/weblog/archief/">Archief</a></li>
    <li><a href="http://www.skate-off.nl/index.php/member/login/">Login</a></li>
    <li><a href="http://www.skate-off.nl/index.php/member/register/">Registreren</a></li>
</ul>

<ul id="menuknoppenlijst">
     <li><a href="/"><img src="http://www.skate-off.nl/images/illustraties/baasje1.jpg" alt="button"/></a></li>
     <li><a  href="/"><img src="http://www.skate-off.nl/images/illustraties/baasje2.jpg" alt="button"/></a></li>
     <li><a href="/"><img src="http://www.skate-off.nl/images/illustraties/baasje3.jpg" alt="button"/></a></li>
</ul>

<div id="weblog">
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/goud/"><img src="http://www.skate-off.nl/images/berichtploaties/wust.jpg" alt="Wust"/></a>
        <h4>Goud!</h4>
        <p><i>We</i> hebben goud! Ons aller <a href="http://www.ireenwust.nl">Ireen Wust</a> schaatste gisteren namelijk iedereen naar huis en met een tijd van 4.02,43 op de 3000 meter mocht zij het podium beklimmen. (<a href="http://www.skate-off.nl/index.php/weblog/comments/goud/">0</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/warden/"><img src="http://www.skate-off.nl/images/berichtploaties/warden.jpg" alt="Warden"/></a>
        <h4>Warden</h4>
        <p>Warden Dave wordt bedankt voor zijn ondersteuning bij de diverse CSS problemen. Hoop het nu verder alleen op te lossen. (<a href="http://www.skate-off.nl/index.php/weblog/comments/warden/">3</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/watskeburt/"><img src="http://www.roosbeef.nl/Foto/Rijnfestijn/thumbs/rijnfestijnthumb13.jpg" alt="Roos"/></a>
        <h4>Watskeburt</h4>
        <p>Had dit mp3-tje al een paar dagen willen posten, maar ik vergat het om welke reden dan ook om dat ook daadwerkelijk te doen (kerstborrels?). Maar hier is dan <a href="http://www.hatchoo.nl/mp3/roosbeef_watskeburt_buzzaward_18122005.mp3">Watskeburt</a> vertolkt door <a href="http://www.roosbeef.nl" >Roosbeef</a>. <a href="http://www.skate-off.nl/index.php/weblog/comments/watskeburt/">Lees meer...</a> (<a href="http://www.skate-off.nl/index.php/weblog/comments/watskeburt/">0</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/porem/"><img src="http://www.skate-off.nl/images/berichtploaties/poot.jpg" alt="Foto's maken dus!"/></a>
        <h4>Porem</h4>
        <p>Phasellus vitae arcu. Nunc eget est luctus dui euismod semper. Vivamus consequat, lorem ac congue facilisis, felis metus dictum nibh, sed tempus libero dui sit amet.
        En wat als ik nou teveel tekst heb???? nounounou? (<a href="http://www.skate-off.nl/index.php/weblog/comments/porem/">11</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/aait_verdan/"><img src="http://www.skate-off.nl/images/berichtploaties/mt.jpg" alt="nog een ploatie"/></a>
        <h4>Aait verdan</h4>
        <p>Quisque aliquet odio ut risus. Donec nulla ipsum, tincidunt ac, elementum eu, ultricies ac, tellus. Nulla ut sem. Quisque id lorem. Donec eleifend dignissim augue.
        (<a href="http://www.skate-off.nl/index.php/weblog/comments/aait_verdan/">0</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/testen/"><img src="http://www.skate-off.nl/images/berichtploaties/stamcafe.jpg" alt="cafe"/></a>
        <h4>Testen</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas scelerisque. Duis ac ante. Pellentesque a massa vulputate. <a href="http://www.skate-off.nl/index.php/weblog/comments/testen/">Lees meer...</a> (<a href="http://www.skate-off.nl/index.php/weblog/comments/testen/">4</a>)</p>
    </div>
    <hr>
    <div class="log">
        <a href="http://www.skate-off.nl/index.php/weblog/comments/lorem_enzo/"><img src="http://www.skate-off.nl/images/berichtploaties/poot.jpg" alt="Foto's maken dus!"/></a>
        <h4>Lorem enzo</h4>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas scelerisque. <a href="http://www.skate-off.nl/index.php/weblog/comments/lorem_enzo/">Lees meer...</a> (<a href="http://www.skate-off.nl/index.php/weblog/comments/lorem_enzo/">0</a>)</p>
    </div>
    <br style="clear:both;">
</div>

Werkt goed in Fx, nog niet helemaal oke in IE. Maar ik denk dat het een flinke zet de goede kant op is. Een voorbeeld kan je vinden op http://zoefff.gotdns.com/got/skateoff.htm

[Slagers]

Dank voor de hulp. Ik ga nu lekker afstand nemen en voetbal kijken.