Automatisch uitlijnen.. ofzo

[ZpAz]

Hallo,

Ik ben bezig met een startpagina variant te maken, nu wil ik dat er diverse vlakken ook van verschillende breedtes op kunnen komen, er komen 4 breedtes, een kwart, de helft, 3/4, en een hele breedte zeg maar.

Op de voorbeeldpagina die ik heb, heb ik allemaal breedtes van een kwart, en een halfe (de tekst content vak).

Nu staan alle vakken op float left, alle vlakken kunnen verschillen in hoogte en kunnen dus 4 verschillende breedtes hebben.

Zoals je ziet staan de laatste twee vlakken erg naar onderen, is het niet mogelijk dat deze automatisch ook netjes aansluiten? (In dit geval moeten ze dus een stuk omhoog).

Wat ik bedoel is dus of het mogelijk is of alle content vlakken altijd netjes op elkaar aan kunnen sluiten, hoe hoog of breed deze ook is.

De voorbeeldpagina: http://www.indev.nl/dev/startinhoud/ alvast bedankt.

[NetForce1]

Volgens mij gaat je dat niet lukken met standaard html/css, ik heb ook wel eens zo'n component gemaakt in Javascript (voor gebruik binnen het Echo framework), maar daar kan ik de source niet van delen helaas.

[RobIII]

Misschien dat je hier iets aan hebt; ik heb dit soortgelijk probleem ook gehad (en opgelost). Natuurlijk wel even de height van #searchresults div halen dan

[ Voor 30% gewijzigd door RobIII op 28-04-2008 19:41 ]

[Kvn]

Hmmm, mooie oplossing, ook wel eens mee geworsteld

off-topic: @ZpAz: Kijk indev.nl eens na, jobs for proffesionals?

[tonyisgaaf]

Als je weet dat een aantal elementen samen een breedte van 100% hebben, plaats je daarna toch gewoon een

HTML:

<br style="clear: both;" />

[ZpAz]

Ik weet niet hoeveel elementen er achter elkaar komen, en ik weet niet hoe breed ze zijn, en ik weet niet hoe hoog ze zijn. Dus dat werkt niet.

edit:

Alhoewel, aangezien ik het uit een db laad is het opzich ook wel weer mogelijk denk ik.

[ Voor 25% gewijzigd door ZpAz op 29-04-2008 10:47 ]

[RobIII]

Je hebt 4 'vaste' kolommen (mijn probleem had te maken met het feit dat ik die blokken 'liquid' wou plaatsen); dus je kunt om de 4 kolommen natuurlijk prima die br zetten.

[ZpAz]

Maar het is niet altijd 4 kollomen, het kan 1, 2, 3, of 4 kollommen zijn, aan de hand van de breedte die de gebruiker heeft gekozen, deze heeft 4 keuzes. 1/4, helft, 3/4, volledige breedte.

[tonyisgaaf]

Als je die breedtes serverside weet, kun je dat toch uitrekenen? Zelfs clientside moet met JS kunnen.

ZpAz schreef op dinsdag 29 april 2008 @ 18:28:
Maar het is niet altijd 4 kollomen, het kan 1, 2, 3, of 4 kollommen zijn, aan de hand van de breedte die de gebruiker heeft gekozen, deze heeft 4 keuzes. 1/4, helft, 3/4, volledige breedte.

Volgens mij is er hier een terminologie verschil: ook naar mijn mening heb je 4 kolommen, waarover je al naar gelang de voorkeuren van de gebruiker verschillende blokken verdeeld, die blijkbaar één, twee, drie of vier kolommen breed kunnen zijn. Lijkt mij een eenvoudig sommetje.

[ Voor 74% gewijzigd door tonyisgaaf op 29-04-2008 18:53 ]

[ZpAz]

Okee, maar ik denk niet dat ik er met ee <br /> ding uit kom, aangezien ik het straks ook nog draggable wil maken, zoals je bijvoorbeeld kan hebben op de iGoogle pagina. (De gene die de pagina onderhoud kan dan zo de content verplaatsen)

[ZpAz]

RobIII schreef op dinsdag 29 april 2008 @ 10:49:
Je hebt 4 'vaste' kolommen (mijn probleem had te maken met het feit dat ik die blokken 'liquid' wou plaatsen); dus je kunt om de 4 kolommen natuurlijk prima die br zetten.

Ik heb nu je code gebruikt, maar nu zet hij de 'inner_content' naast de kopjes.

de code die ik heb toegepast ipv de float:

code:

.normal_content, .small_content {   
     display       : -moz-inline-box;  /* Moz */
     display       : inline-block;     /* Op, Saf, IE */
     vertical-align: top;              /* IE Mac */
     _display:inline;
     *display:inline; }  
    
.small_content .inner_content {
    width:204px; }
    
.normal_content .inner_content {
    width:437px; }

Ik heb wat zitten spelen met position:relative, absolte, en overflow.. maar dat was zonder resultaat.

Het online voorbeeld:
www.indev.nl/dev/startinhoud/

[RobIII]

Heb je wel enig idee wat je aan 't doen bent dan? Of pak je gewoon je hagelpistool en hoop je dat je wel doel treft met 25+ pellets in 1 schot? In andere woorden; ben je in het wilde weg dingen aan 't toepassen of ben je gericht naar een oplossing aan 't zoeken?

[ZpAz]

Nuja, ik heb om eerlijk te zijn echt geen idee hoe het daardoor precies reageert... normaal ben ik wel redelijk 'gevorderd' in CSS enzo, maar ik heb zelf nog nooit zoiets moeten toepassen.

[RobIII]

Dan is het misschien verstandig(er) om je eerst eens in de materie te verdiepen en uit te zoeken hou het zou moeten werken; daarna pas je je theorie toe op je case (of een uitgeklede test-case om mee te stoeien en te zien hoe iets reageert) en dan is het nog een kwestie van bijschaven waar nodig en de puntjes op de i. In het donker met een honkbalknuppel om je heenslaan en hopen dat je iets raakt is natuurlijk niet 'the way to go' in dit soort gevallen; je moet gericht bezig zijn/gaan.

[ZpAz]

Okee, en kan je me dan ook zoekwoorden ofzo geven, waarmee ik mijn 'probleem' kan omschrijven, en nuttige informatie kan vinden in google?

[RobIII]

Die lijken me inmiddels voldoende aanwezig in dit topic; in het wilde weg float / relative / absolute / overflow en display-modes gaan toepassen en niet weten wat waarvoor dient is precies de reden waarom ik dit aankaart

[ Voor 6% gewijzigd door RobIII op 30-04-2008 14:53 ]

[ZpAz]

RobIII schreef op woensdag 30 april 2008 @ 14:49:
Die lijken me inmiddels voldoende aanwezig in dit topic; in het wilde weg float / relative / absolute gaan toepassen en niet weten wat waarvoor dient is precies de reden waarom ik dit aankaart

Nu weet ik wel wat float, position e.d doet, dus daar hoef ik niet op te zoeken, ook weet ik nu dus dat dit niet de oplossing is. Maar is er niet een zoekwoord wat beschrijft wat mijn probleem is en dat ik daar op kan zoeken?

[RobIII]

Doe eens net als ik in dat topic deed en begin gewoon met een basic/uitgeklede testcase om je probleem te reproduceren; dan zit er niet allerlei HTML en/of CSS in de weg die je zicht op het daadwerkelijke probleem belemmert en je kunt veel makkelijker aanpassingen maken en kijken wat wel/niet werkt.

[ Voor 6% gewijzigd door RobIII op 30-04-2008 15:09 ]

[tonyisgaaf]

ZpAz schreef op woensdag 30 april 2008 @ 14:54:
[...]


Nu weet ik wel wat float, position e.d doet, dus daar hoef ik niet op te zoeken, ook weet ik nu dus dat dit niet de oplossing is. Maar is er niet een zoekwoord wat beschrijft wat mijn probleem is en dat ik daar op kan zoeken?

offtopic:
Je weet het klaarblijkelijk niet, anders had je de verschillende oplossingen wel begrepen en inhoudelijk duidelijke argumenten gebruikt waarom je de één na de andere suggestie afschiet/als niet geschikt beoordeelt. Het komt daarnaast op mij ook redelijk betweterig over om een smily te plaatsen achter elke "dat kan dus niet". Als je het toch al weet, dan hoef je onze hulp dus niet te vragen.

Je hebt je zoekwoorden inderdaad al ruim voldoende gekregen. Wat je kunt bereiken met een float: left/right en een <br style="clear: both;" /> lijkt qua gedrag op een display: inline-block/-moz-inline-box;

[ZpAz]

tonyisgaaf schreef op woensdag 30 april 2008 @ 16:42:
[...]

offtopic:
Je weet het klaarblijkelijk niet, anders had je de verschillende oplossingen wel begrepen en inhoudelijk duidelijke argumenten gebruikt waarom je de één na de andere suggestie afschiet/als niet geschikt beoordeelt. Het komt daarnaast op mij ook redelijk betweterig over om een smily te plaatsen achter elke "dat kan dus niet". Als je het toch al weet, dan hoef je onze hulp dus niet te vragen.

Je hebt je zoekwoorden inderdaad al ruim voldoende gekregen. Wat je kunt bereiken met een float: left/right en een <br style="clear: both;" /> lijkt qua gedrag op een display: inline-block/-moz-inline-box;

Imho dat jij het beterweterig vind overkomen is jou probleem, je hoeft niet te reageren, er zijn hier ook wel mensen die gelukkig wel willen helpen. Soms dit forum zo frustrerend aangezien de mensen er vanuit gaan dat je niets hebt geprobeert om het te bereiken, en krijg je alleen maar antwoorden van heb je al gezocht.. of een beetje initiatief mag ook wel. Imho probeer ik eerst altijd vanalles zelf voordat ik vraag. Dan leer ik er ook nog wat van.

Maar ik zal even uitleggen waarom ik niets heb aan de <br style="clear:both;">

Als ik alles float, komt alles wel bij elkaar, maar is er een blokje minder lang dan gaat het vreemd staan zeg maar, dat was het hele vraagstelling van dit topic.

Nu kan ik uitrekenen (aangezien ik het uit een db haal) wanneer de totale breedte 100% of meer is, dan moet ik zorgen dat er op tijd een <br /> komt. So far so good.

Maar nu wil ik het draggable maken met JS, en dat hij automatisch op de juiste plek snapt zeg maar, dat werkt niet.. Want dan zitten de <br />'s in de weg, welke ik dan on the fly ook weer moet berekenen en er in moet zetten of er uit moet halen.

Dus ik zocht na een oplossing zonder <br />

Nu weet ik wel hoe dingen reageren als float, positioneren van relative en absolute was mischien wel een 'goede' manier, die kon werken. Maar dat werkte blijkbaar niet.

Als je het voorbeeld bekijkt zie je dat de inner_div naast het kopje gedeelte komt. Dus ik dacht, ik zet de outer div van elk blok op relative, en de inner_div op absolute, zodat ik deze kon positioneren ten op zichte van de outer div van dat block maar dat werkte dus niet.

edit: Speciaal voor jou.....