[CSS] Juiste volgorde plaatjes

[-Japser-]

Hee Allen,
Ik heb dus een ontwerpje gemaakt voor een website en even met kleurtjes uitgewerkt om het overzichtelijk te houden. Straks komen hier dus de plaatjes. Zoals je nu ziet is er heel wat naar beneden geschoven, maar dat allemaal moet naar boven, links van het blauwe blok.
Wie heeft de oplossing?

[ Voor 17% gewijzigd door -Japser- op 22-06-2021 15:51 ]

[mithras]

Allereerst, waarom dit:

HTML:

<div class="menu"><div class="menuInhoud">2M</div></div>
<div class="main"><div class="mainInhoud">4M</div></div>

Verder moet je een overflow niet toepassen op het child element met de float, maar op je container.
BTW, je kan ook beter overflow: auto; gebruiken ipv hidden omdat IE for Mac nogal buggy schijnt te zijn met een overflow:hidden;

[-Japser-]

Mithras86 schreef op maandag 09 oktober 2006 @ 17:37:
Allereerst, waarom dit:

HTML:

<div class="menu"><div class="menuInhoud">2M</div></div>
<div class="main"><div class="mainInhoud">4M</div></div>

Verder moet je een overflow niet toepassen op het child element met de float, maar op je container.
BTW, je kan ook beter overflow: auto; gebruiken ipv hidden omdat IE for Mac nogal buggy schijnt te zijn met een overflow:hidden;

Die html is, omdat ik zo heel gemakkelijk in de 'menuInhoud' de padding aan kan geven, en dus de tekst kan laten beginnen op de pixel die ik wil. Vind ik altijd fijn werken zo.
Verder staat de overflow op hidden omdat ik anders schuifbalken krijg, zoals screenshot op onderstaande screenshot ...

[disjfa]

Als je daar geen text in zet zal de schuifbalk ook niet komen hoor

Maar ik zou het groene vakje bv wat minder breed maken... Toch.

[-Japser-]

disjfa schreef op maandag 09 oktober 2006 @ 17:50:
Als je daar geen text in zet zal de schuifbalk ook niet komen hoor

Maar ik zou het groene vakje bv wat minder breed maken... Toch.

Hmm die linksonder gaat weg, maar dat rechts boven blijft hoor..
En het heeft geen zin om de groene wat minder breed te maken (al geprobeerd) want zo is de totale breedte precies 800px, net als ie hoort te zijn, en als het lichtblauwe eerste plaatje, helemaal bovenaan...

[mithras]

Maar je past je overflow nog steeds verkeerd toe, dat is juist het hele punt

Mithras86 schreef op maandag 09 oktober 2006 @ 17:37:
Verder moet je een overflow niet toepassen op het child element met de float, maar op je container.

[-Japser-]

Mithras86 schreef op maandag 09 oktober 2006 @ 18:42:
Maar je past je overflow nog steeds verkeerd toe, dat is juist het hele punt
[...]

Hmm heb nog ff wat zitten proberen, maar kom er niet uit. Zou je een stukje van mijn CSS kunnen posten waarin de overflow dan wel goed staat?

[mithras]

-Japser- schreef op maandag 09 oktober 2006 @ 18:46:
[...]

Hmm heb nog ff wat zitten proberen, maar kom er niet uit. Zou je een stukje van mijn CSS kunnen posten waarin de overflow dan wel goed staat?

Hier een voorbeeld (gebruik expres ff geen [code][/code]):

div.mainContainerCentered{
width: 800px;
margin: 0 auto;
overflow: auto;
}
div.logo{
width: 800px;
height: 122px;
float: left;
overflow: hidden;
background-color: Aqua;
}

etc.

[-Japser-]

Mithras86 schreef op maandag 09 oktober 2006 @ 21:14:
[...]

Hier een voorbeeld (gebruik expres ff geen [code][/code]):

[...]
etc.

Hm heb 'm dus nu aangepast, er is weinig veranderd, maar onder lijkt ie nu breder te zijn geworden waardoor het boven niet meer past, terwijl het bij mekaar toch echt 800px is...
Te zien op http://www.jasperleferink.nl/vb/

(dit probleem geldt trouwens in IE, en niet in FF) maar bij beide moet het dus omhoog..

[ Voor 9% gewijzigd door -Japser- op 09-10-2006 21:26 ]

[Boelie-Boelie]

Komt er tekst te staan in .onderlogo en .linksMenu? Zo nee, dan zou ik die twee divs helemaal weghalen en het plaatje de background-image van een andere div maken. Als je die divs weghaalt en .music onder .main zet, begint het er volgens mij veel meer op te lijken. Beetje spelen met margins/paddings en background-position doet de rest.

[crisp]

Je float alles naar links en verwacht dat het vervolgens als een soort puzzel in elkaar past? Zo werken floats niet helemaal
Float alleen datgene waarvoor het noodzakelijk is en probeer de rest gewoon in-flow te houden.

[-Japser-]

Boelie-Boelie schreef op dinsdag 10 oktober 2006 @ 02:44:
Komt er tekst te staan in .onderlogo en .linksMenu? Zo nee, dan zou ik die twee divs helemaal weghalen en het plaatje de background-image van een andere div maken. Als je die divs weghaalt en .music onder .main zet, begint het er volgens mij veel meer op te lijken. Beetje spelen met margins/paddings en background-position doet de rest.

Er komt geen tekst in idd, dus kan de div wel weghalen, maar in elke andere div staat al een background image en ik kan hem toch niet twee keer oproepen en laden in de html ?
En met het spelen van margins/paddings komt alles nog niet omhoog.

(ben overigens de overbodige float's aan't weghalen, deze geplaatst om te testen of het wel zou werken, maar werkt dus ook niet.)

[-Japser-]

Zo heb ik nog enkele dingen geprobeerd maar niks hielp. Nu dacht ik het op te gaan lossen met tabellen, en dus 'class' te geven, maar nog steeds werkt het niet.
Zie http://www.jasperleferink.nl/vb/indexTables.html in internet explorer (firefox maakt er helemaaaal iets anders van.)

Je ziet hierop dat onderaan totaal 3 plaatjes zich een klein stukje gaan herhalen, dat is natuurlijk niet de bedoeling en ik snap ook niet waarom hij dit doet, want de maten van de plaatjes etc kloppen gewoon.

Volgens mij gaat er iets fout in de laatste 'td' van de 'intexTables.html' want als ik de 'td class " stadrechts" ' weghaal, klopt ALLES nog (in IE dan) behalve dan dat er een plaatje genaamd 'stadrechts' nog bij moet...

Ik hoop dat iemand me kan helpen!

[-Japser-]

Niemand?