[html] Divs onder elkaar, niet over elkaar

[Verwijderd]

Waarschijnlijk is deze vraag te simpel voor woorden en ben ik veel te moeilijk aan het kijken, maar ik kom er totaal niet uit. Google is no longer my friend, dus maar even hier vragen.

De situatie;
Ik heb 2 divjes die onder elkaar moeten komen. Aangezien de bovenste div in hoogte kan verschillen kan ik aan de onderste div geen specifieke hoogte meegeven, maar moet deze echt pas beginnen _onder_ de eerste div. Op dit moment zweeft mijn onderste div echter boven mijn bovenste div.

Mijn constructie ziet er globaal zo uit;
div content
div container
divblaat1 divblaat2
divblaat3 divblaat4
/div container
div container
divjee1 divjee2
divjee3 divjee4
/div container
/div content

divblaat1 en divblaat2 zitten naast elkaar enz.

Heeft iemand de oplossing zodat de tweede container gewoon onder de eerste komt te staan? In beginsel zouden ze juist onder elkaar moeten komen dacht ik, maar ik heb heel Google en w3 al gehad en kom er even niet meer uit. Wie heeft de winnende tip?

[Verwijderd]

dan moet je position: relative; gebruiken denk ik, maargoed ik ben al een hele tijd niet meer echt into html

[ Voor 9% gewijzigd door Verwijderd op 15-02-2007 15:10 ]

[akaIDIOT]

Welke divs zitten gefloat en welke niet?

Heb je gekeken naar de "clear" css-property, die zorgt er namelijk voor dat een div pas na een floater getekend moet worden. CSS-source zou hier wel handig zijn

[Verwijderd]

Kwestie van float gebruiken idd.. met een container kan je ervoor zorgen dat door float:left; een element onder een andere komt.

[Verwijderd]

De van toepassing zijnde CSS code;

code:

#content {
    margin: 60px 20px 20px 30px;
    font-size: 12px;
}

#container {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

#splitter {
    background: #9EBFE1;
    text-indent: 40px;
    color: #FFF;
    line-height: 24px;
    font-size: 14px;
}

#gegevens {
    margin: 0 0 0 320px;
    position: absolute;
    border-left: 1px solid #D9D7D4;
}

#foto {
    margin: 0 0 0 10px; 
    width: 310px;
    position: absolute;
    border-right: 1px solid #D9D7D4;
}

#bestandsbeheer {
    margin: 30px 0 0 250px; 
    position:absolute;
}

#persagenda {
    margin: 30px 0 0 20px;
    width: 230px;
    position:absolute;
}

En de HTML code;

code:

<div id="content">
    <div id="container">
    <div id="splitter" style="width:310px; position:absolute;">Foto</div>
    <div id="splitter" style="width:510px; margin:0 0 0 310px; position:absolute;">Gegevens</div>
    <br><br>
    <div id="foto">
        
    </div>
    <div id="gegevens">
        
    </div>
    </div>

    <div id="container">
    <div id="splitter" style="width:250px; position:absolute;">Agenda</div>
    <div id="splitter" style="width:570px; margin:0 0 0 250px; position:absolute;">Bestandsbeheer</div>
    <div id="persagenda">
        Blaat
    </div>
    <div id="bestandsbeheer">
        Blaat
    </div>
    </div>
</div>

[MrSleeves]

De oorzaak ligt in ieder geval in de "position: absolute". Die zorgt voor absolute coördinatie waardoor er divs over elkaar heen liggen.
Gebruik "clear" en "float" om divs naast elkaar of onder elkaar te plaatsen.

Kijk ook hier. Nu doe je het op deze manier.

[ Voor 87% gewijzigd door MrSleeves op 15-02-2007 15:47 ]

[Verwijderd]

MrSleeves schreef op donderdag 15 februari 2007 @ 15:43:
De oorzaak ligt in ieder geval in de "position: absolute". Die zorgt voor absolute coördinatie waardoor er divs over elkaar heen liggen.
Gebruik "clear" en "float" om divs naast elkaar of onder elkaar te plaatsen.

Kijk ook hier. Nu doe je het op deze manier.

Mijn dank is groot, ik heb het aangepast en zo werkt het inderdaad prachtig.

[akaIDIOT]

komt eigenlijk nog bij dat je een ID niet meer dan 1 keer mag gebruiken, eigenlijk he , mgoe dat was niet de vraag hier (kan wel problemen opleveren als je met DOM-javascript nog dingen wil gaan doen...)

[Zoefff]

Sowieso lijkt het me verstandig om nog eens met een kritisch oog naar de code te kijken. Zodra ik iets zie als <div id="splitter"> krijg ik al jeuk, de tijden van splitters, spacers e.t.c. hebben we ver achter ons gelaten

Maak gebruik van elementen waar ze voor bedoeld zijn, google eens op 'semantiek'

[Verwijderd]

Zoefff schreef op donderdag 15 februari 2007 @ 17:10:
Sowieso lijkt het me verstandig om nog eens met een kritisch oog naar de code te kijken. Zodra ik iets zie als <div id="splitter"> krijg ik al jeuk, de tijden van splitters, spacers e.t.c. hebben we ver achter ons gelaten

Maak gebruik van elementen waar ze voor bedoeld zijn, google eens op 'semantiek'

Ach, ik had het ook 'menuitem' kunnen noemen, of 'onderdeel'. Geef het beestje een naam . Ik snap wel wat je bedoelt en ik heb ook al wat stukjes erover gelezen. Ik maak een beetje de afweging tussen de daadwerkelijke efficintie ervan en het hype gedeelte.

[Zoefff]

Dat bedoel ik niet. Je gebruikt nu om te beginnen hetzelfde id meerdere keren op een pagina, dat mag niet. Daarnaast bedoel ik meer dat je goed gebruik moet maken van de beschikbare html-elementen, wat je nu absoluut niet doet. Voor kopjes gebruik je bijvoorbeeld <hx>, tekst gaat in een <p> en menu-items zet je in een (un)ordered list.

Bovenstaande code lijkt meer op een tabel-layout omgezet naar div-jes, en dat is natuurlijk niet het idee achter een tabelloze layout. Je maakt op dit moment volgens mij helemaal geen afweging, je hebt simpelweg geen idee waar het echt om gaat

[Verwijderd]

Ik snap je punt en ik weet ook wel dat mijn code niet volledig valid is. Het is mijn manier met mijn huidige 'skill level'. Er is al een tijd een opkomst voor validated code en ik heb daar nooit veel in verdiept, omdat wat ik maak werkt. Ik ben ook wel van plan om er nog wat meer in te duiken zodat ik het een en ander aan kan passen, ik ben voorlopig toch bezig met een draft en voornamelijk met de php code die erachter zit dan met de opmaak.
Ik weet misschien niet helemaal wat de mogelijkheden zijn, maar ik weet wel hoe mijn code zich verhoudt ten opzichte van validated code en waarom ik de keuze maak om me daar niet helemaal aan te houden nu. Dat was mijn punt. Ik weet wel dat ik meer met CSS en bijv strong ipv b zou moeten doen, maar ik zit nog teveel in oldschool coding nu om me daar in deze draft teveel druk om te maken. It's a work in progress.

En waarom zou je een id eigenlijk nooit 2x mogen gebruiken?

[Verwijderd]

En waarom zou je een id eigenlijk nooit 2x mogen gebruiken?

In dat geval zou je kunnen overwegen om een class te gebruiken. (aangegeven door . ipv # in je css)
Een id is, zoals de naam al aangeeft, uniek.

En je zegt dat je code werkt, in internet explorer? Firefox misschien ook nog?
Maar op de mac, op mobiele telefoons, voor mensen die slecht zien en misschien een speciale browser gebruiken, heb je daar al een keer aan gedacht?