[CSS/DIV] Nut van een container

[toost]

Hey ik heb een vraagje,

omdat ik hier de vorige keer ben dood geflamed over mijn gebruik van tabellen, moest eens snel naar <div> overstappen ben ik hier mee aan de slag gegaan.

Opzich heb ik het aardig onder de knie nu maar op een aantal site's wordt over containers gesproken, maar hier zie ik het nut niet van in. Ik zal even met een simpel voorbeeldje laten zien wat ik bedoel.

code:

<div style="width:900; height:721; background:#ffffff; position: relative;">
    
    <div style="width:900; height:100; background:#f2ce08; position: absolute;">

    </div>
    
    <div style="width:235; height:621; background:#f2220c; position: absolute; top: 100;">

    </div>

    <div style="width:665; height:621; background:#1bfc30; position: absolute; left: 235; position: absolute; top: 100;">

    </div>
    
</div>

Dit is een voorbeeldje met een container, (Nee ik heb hier nog geen externe css inverwerkt omdat het een voorbeeldje is).

maar als je de buitenste <div> weglaat krijg je precies het zelfde. Wat doet zo'n container precies? En is een container nodig?

edit1: Ik heb al wel gevonden dat je de positionering van je gedockte div's makkelijker kunt wijzigen door een div container.

[ Voor 21% gewijzigd door toost op 19-07-2006 11:55 ]

[Victor]

Op deze manier haalt het ook helemaal niets uit, aangezien je al je elementen uit de flow van de documentstructuur haalt met de position: absolute. Containers worden meestal gebruikt om elementen die allemaal op dezelfde plaats moeten komen (denk aan kolommen, of het centreren van een fixed width website) te groeperen en zo met één selector op de juiste plaats te zetten.

Bovendien kunnen ze soms gebruikt worden om het resultaat van een position of een float te beinvloeden.

[toost]

Maar als ik die position: absolute weghaal dan verschuiven er een aantal elementen waardoor ze niet meer op hun plaats staan. Of kan ik dit beter alleen met top en left (of right) gebruiken.
Want ik heb het idee dat ik die elementen in de container dock om ze zo goed neer te zetten qua positie en als ik dan de position weghaal dan pakt hij dus de top van de pagina ipv de container.

dus volgens mij moet ik of een container gebruiken met daarin de elementen met position op absolute, of ik gebruik geen container maar moet dan alle elementen een eigen left en top mee geven en dus zitten te kloten qua positie als ik de site bv. gecentreerd wil hebben

[ Voor 61% gewijzigd door toost op 19-07-2006 12:02 ]

[RM-rf]

toost schreef op woensdag 19 juli 2006 @ 11:56:
Maar als ik die position: absolute weghaal dan verschuiven er een aantal elementen waardoor ze niet meer op hun plaats staan. Of kan ik dit beter alleen met top en left (of right) gebruiken.

tja, als het voor jou essentieel is dat de elementen binnen de container absoluut gepositioneerd worden..
dus de continer wel relatief met de flow gepositioneerd wordt maar de elementen erin 'vastgezet' worden, moet je dat doen ...

Ik vraag me echter wel een beetje af of je qua concept daar niet nog steeds vastzit aan de 'Idee' van een tabelstructuur...:
waar je dus hetezelfde kent, van een TR, met daarin TD's 'vastgezet'...

Het zou goed zijn om van dat vooropgezette idee af te komen...
meestal kan het behulpzaam zijn om je te verdiepen in semantische structuren, om los te komen van de HTML-structuur als iets dat Visueel gepresenteerd wordt.
Semantisch denken concentreerd zich op de code in eerste zin te zien als een 'structuralisering' van de inhoud in 'kloppende' tags die overeenkomen met de inhoud en daarna eigenlijk pas als laatste het invoegen van deze structuren in eventueel een DIV, om deze ook visueel te kunnen presenteren...

eigenlijk een compleet omgedraaide werkwijze als het werken met tabellen, waar designers vaak eerst een tabelstructuur opzetten die een bepaalde layout meekrijgt en dan pas als laatste eigenlijk pas de inhoud iin de pagine invoegen

[Victor]

Om die twee DIV's naast elkaar te zetten kun je beter float gebruiken dan position: absolute. Probeer sowieso het gebruik van position: absolute te vermijden, aangezien het hele vreemde resultaten kan geven. Op het moment dat een element absoluut gepositioneerd is, heeft het geen invloed meer op de omliggende elementen, en zullen achtergronden niet meeschalen of het kan over andere content heen kunnen vallen e.d.

[acemoo]

In de container moet je met relative werken inplaats van absolute.
Nog liever, werk met floats, werk zonder positions.

[toost]

ok ik ga eens naar floats kijken ipv position.

Wat betreft het verhaal van RM-rf daar moet ik eens goed naar kijken, want dat is voor mij lastig te volgen.

Mijn website's zijn over het algemeen erg grafisch ontwikkelt, dus ik gebruikte altijd tabellen met plaatjes als achtergrond. Het enige nadeel was dan dus wel dat de pagina's statisch waren qua witdh en height. Het liefste zou ik dit dus ook veranderen, maar ik heb eerlijk gezegd geen idee hoe, want je blijft toch met die plaatjes en hun size zitten (en ik dacht dat je een bgimage geen size% mee kan geven).

Zoizo om mee te gaan met de techniek wilde ik dus naar div overstappen. Het idee wat ik dus had is inderdaad vrijgelijk aan tabel structuur, maar als ik jou verhaal begrijp moet ik dat vergeten en gewoon per div een top en left waarde mee geven, en verder geen structuur gebruiken. Of ik begrijp je verkeerd

[Civil]

Hier een klein voorbeeldje met floats.

HTML:

<div style="width:900px;">
    
    <div style="height:100px; background:#f2ce08;">header</div>
    
    <div style="width:235px; background:#f2220c; float: left;">menu</div>
    
    <div style="width:665px; background:#1bfc30; float: left;">content</div>
    
    <div style="background: #FFA500; clear: left;">footer</div>
    
</div>

[RM-rf]

toost schreef op woensdag 19 juli 2006 @ 12:13:

Zoizo om mee te gaan met de techniek wilde ik dus naar div overstappen. Het idee wat ik dus had is inderdaad vrijgelijk aan tabel structuur, maar als ik jou verhaal begrijp moet ik dat vergeten en gewoon per div een top en left waarde mee geven, en verder geen structuur gebruiken. Of ik begrijp je verkeerd

deels ben je volgens mij wel op de juist weg,
maar je moet afstappen van het idee dat DIVs een 'betere' tag zou zijn dan tabellen, en dat je gewoon DIVs moet gaan gebruiken ipv van tabellen, maar wel op precies dezelfde manier als je vroeger met tabellen deed, dus gaan denken 'vanuit het design', of vanuit de visuele presebtatie...

wil je technische problemen oplossen en flexibeler worden in je design,
lukt dat enkel door uit de content-structuur te denken...
er allereerst voor te zorgen dat je code zelf 'logisch' is, een goed structuurindeling kent, zònder dat je daarbij direkt al denkt aan de visuele presentatie.

Uiteindelijk laat zich de visuele presentatie ook achteraf toevoegen, meestal redelijk snel met enkele CSS-properties (positionering)
zelfs veel grafische trucjes zijn best mogelijk, maar je moet je ook afvragen of dat nu wel zo zinnig is, om 'trucjes' toe te voegen die betekenen dat je codes moet toevoegen, die verder geen inhoudelijke nut heeft (natuurlijk kun je dat wel doen, maar het functionalistische denken zorgt er bij veel deigners ook voor dat ze automatisch ook een 'less-is-more'stelling aannemen, een 'form-follows-functionality': begrippen die al sinds Bauhaus bestaan)

[Boelie-Boelie]

Zie ook het topic [rml]Boelie-Boelie in "[ HTML] Floating layers Firefox probleem"[/rml] voor meer info over floats.

[toost]

RM-rf schreef op woensdag 19 juli 2006 @ 12:46:
[...]

Uiteindelijk laat zich de visuele presentatie ook achteraf toevoegen, meestal redelijk snel met enkele CSS-properties (positionering)
zelfs veel grafische trucjes zijn best mogelijk, maar je moet je ook afvragen of dat nu wel zo zinnig is, om 'trucjes' toe te voegen die betekenen dat je codes moet toevoegen, die verder geen inhoudelijke nut heeft (natuurlijk kun je dat wel doen, maar het functionalistische denken zorgt er bij veel deigners ook voor dat ze automatisch ook een 'less-is-more'stelling aannemen, een 'form-follows-functionality': begrippen die al sinds Bauhaus bestaan)

Maar het less-is-more principe heeft niet altijd zijn waarde. Het ligt aan het doel van de website. Zo ben ik op het moment een website voor een rotary club aan het maken, deze willen een simpele, strakke, professioneel ogende website. Dus inderdaad niet te veel poespas. Maar zo ben ik ook met een website bezig voor bouwclub (maken carnaval wagens), en daar moet het design er uit springen, dus Juist veel dingen die geen inhoudelijk nut (geen extra informatie) hebben, maar puur om de identiteit van de bouwclub weer te geven.

wil je technische problemen oplossen en flexibeler worden in je design,
lukt dat enkel door uit de content-structuur te denken...
er allereerst voor te zorgen dat je code zelf 'logisch' is, een goed structuurindeling kent, zònder dat je daarbij direkt al denkt aan de visuele presentatie.

Ik denk dat ik voor dit deel een goede documentatie nodig heb om dit door te krijgen (kan je iets aan bevelen, boek oid). Want op het moment werk ik als volgt:

1. bekijken van informatie en menu items, hier structuur voor bedenken (denk aan benodigde ruimte voor informatie en menu)
2. Om deze structuur een grafische schil maken. (In adobe cs2)
3. Het ontwerp uitsneiden en de afbeeldingen appart opslaan en daar een simpele html uit maken.
( de vakken die een enkele kleur hebben uiteraard geen plaatje maar een achtergrondkleur).

Verder ga ik dan de html knip en plakken in diverse include bestanden zodat de php bestanden geen tot weinig html bevatten.

Maar vaak loop ik dan inderdaad tegen een aantal technische problemen aan zoals het automatisch aanpassen van de site op de scherm grote ed. En hierdoor mis ik vaak een stukje flexibiliteit.

Nu wil ik hier geen kant en klare oplossingen voor, want ik wil het wel zelf onder de knie krijgen, maar een duw in de goede richting is wel iets wat ik nodig heb.

Maar als je met het bedenken van een goede structuur zonder visualisatie het zelfde bedoeld als ik bij punt 1, dan kan ik je aardig volgen, maar ik kan me haast niet voorstellen dat ik een site ontwikkel waar ik achteraf pas het design qua layout (niet qua textopmaak) ga inpassen. Maar misschien zit daar het probleem.


edit: thnx civil voor het voorbeeld ik ga er even naar kijken

[ Voor 3% gewijzigd door toost op 20-07-2006 10:29 ]

[Boelie-Boelie]

toost schreef op donderdag 20 juli 2006 @ 10:28:
Maar zo ben ik ook met een website bezig voor bouwclub (maken carnaval wagens), en daar moet het design er uit springen, dus Juist veel dingen die geen inhoudelijk nut (geen extra informatie) hebben, maar puur om de identiteit van de bouwclub weer te geven.

RM-rf bedoelt volgens mij meer dat de code niet vervuild hoeft te worden met allerlei tabelcellen of in jouw geval div'jes, maar dat je op basis van de content op de pagina bepaalt welke HTML-elementen nodig zijn. Dus denk niet 'dit hoort bij elkaar, dus dat moet in een div', maar bedenk of je het ook kunt groeperen als alinea (p), lijst (ol, ul), etc., zonder er steeds een div omheen te zetten. Vandaar less is more.

toost schreef op donderdag 20 juli 2006 @ 10:28:
ik kan me haast niet voorstellen dat ik een site ontwikkel waar ik achteraf pas het design qua layout (niet qua textopmaak) ga inpassen.

Kijk eens op http://csszengarden.com . Door het menu rechts kun je het design wisselen. De grap van deze site is dat de onderliggende HTML onveranderd blijft; het enige dat verandert, is de keuze van stylesheet. Daar zie je ook meteen dat je het design rustig kunt houden, maar je kunt het design er ook uit laten springen.
Het idee is dus zoals gezegd dat je simpelweg je tekst structureert (hoofdstukkop, paragraafkop, alinea, menu, etc.), zonder al te veel na te denken waar het op de pagina moet komen. Later ga je met CSS aan de gang. Daarmee kun je deze pagina-elementen vormgeven, zoals het meegeven van een achtergrondplaatje (bijv. een slice uit je Photoshopdesign), achtergrondkleur, afmetingen, positie (vaak met margins en niet zozeer met absolute positionering).

Hoewel in beta, kijk eens op http://modernmarkup.nl voor meer info (of check een boek uit één van deze reviews, of bijv. HTML en CSS, de basis ).

[toost]

boelie-boelie erg bedankt ik ga het eens goed doornemen.

Ik ben zelf een boek over DHTML & CSS tegen gekomen : DHTML and CSS for the World Wide Web

Ik denk dat ik dat boek maar eens aan ga schaffen, ik denk dat dat meer richting mijn probleem gaat. Want HTML zelf dat kan ik wel, en de basis van css ook redelijk, alleen het dynamische gedeelte, dus het werken met div elementen en deze compleet stylen dat mis ik dus nog.

[ Voor 77% gewijzigd door toost op 20-07-2006 13:23 ]

[Verwijderd]

"Eric Meyer on CSS" en zijn opvolger "More Eric Meyer on CSS" (hoe origineel;) zijn ook 2 aardige boeken.