Uitlijnen floating divs - Softwareontwikkeling

woensdag 4 juni 2008 00:09

Acties:

Verwijderd

Topicstarter

Ik zit al een paar avonden te prutsen met het uitlijnen van floating divs.

Het doel van de divs is dat de vlakken zo worden uitgelijnd dat als de pagina smaller is dat ze op de volgende regel komen te staan.
Graag zou ik de verschillende vlakken uitgelijnd hebben over de breedte van de container, zodat er een ruimte ontstaat tussen de vlakken die vervolgens netjes uitgelijnd worden. Dus de vlakken krijgen netzoals bij de justify optie overal dezelfde marge.

Wie o wie kan mij helpen

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
.container
{
width:100%;
text-align:justify;
}
.vlak
{
width:140px;
height:150px;
float: left;
background-color:#999999;
}
</style>
<body>

<div class="container">
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>
<div class="vlak">vlak 1</div>

</div>
</body>
</html>

[ Voor 4% gewijzigd door Verwijderd op 04-06-2008 00:36 ]

woensdag 4 juni 2008 00:26

Acties:

curry684

left part of the evil twins

Allereerst: welkom op GoT

Zet je code even tussen [code=html] en [/code] tags, dat maakt het stukken leesbaarder voor ons.

Als ik je goed begrijp wil je iets dat niet simpelweg kan zonder iets aan extra markup te gebruiken - je zult extra divisions moeten introduceren om je vlakken welke de positionering verzorgen, en de vlakken zelf daar weer binnen positioneren.

[edit]
Scrap that, je wil een variabel aantal elementen op een regel justifyen afhankelijk van het formaat van de container? Dat kan naar mijn beste weten niet. Als iemand een hack (zonder Javascript of computed properties vanzelfsprekend) hiervoor weet ben ik wel benieuwd overigens

[ Voor 27% gewijzigd door curry684 op 04-06-2008 00:36 ]

Professionele website nodig?

woensdag 4 juni 2008 00:32

Acties:

TheBorg

Resistance is futile.

Kun je een plaatje maken van wat je wil?

woensdag 4 juni 2008 00:39

Acties:

curry684

left part of the evil twins

TheBorg schreef op woensdag 04 juni 2008 @ 00:32:
Kun je een plaatje maken van wat je wil?

Stel je hebt blokken van 100px breed. Nu wil hij afhankelijk van de browsergrootte een aantal blokken per regel tonen en dat ze automatisch doorvloeien naar de volgende regel. De crux zit 'm dat ie wil 'justifyen' binnen de container. Dus bij browserbreedtes van:
- 800px: 8 blokken zonder tussenruimte.
- 870px: 8 blokken met 10 pixels ertussen
- 980px: 9 blokken met 10 pixels ertussen
- 1045px: 10 blokken met 5 pixels ertussen

Dit kan niet zonder clientside speciale berekeningen te doen of IE-specific calculated properties te gebruiken.

Professionele website nodig?

woensdag 4 juni 2008 02:09

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ik ben niet zo van het voorkauwen of kant-en-klare oplossingen dumpen, maar allez....

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
            .container
            {
                text-align:justify;
                text-justify:distribute-all-lines;
            }
            .vlak
            {
                text-align: left;
                display: -moz-inline-box;  /* Moz */
                display: inline-block;     /* Op, Saf, IE */ 
                width: 140px;
                height: 150px;
                background-color: #999999;
            }
        </style>
        <!--[if IE]><style>.vlak {display:inline;}</style><![endif]--> 
    </head>
    <body>
        <div class="container">
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
            <div class="vlak">vlak 1</div>
        </div>
    </body>
</html>

Zonder JS en cross-browser (IE7, FF2, Opera 9.27 en Safari 3 (Win)) getest.

curry684 schreef op woensdag 04 juni 2008 @ 00:26:
[edit]
Scrap that, je wil een variabel aantal elementen op een regel justifyen afhankelijk van het formaat van de container? Dat kan naar mijn beste weten niet. Als iemand een hack (zonder Javascript of computed properties vanzelfsprekend) hiervoor weet ben ik wel benieuwd overigens

Mooi is anders, maar het werkt

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 4 juni 2008 02:18

Acties:

curry684

left part of the evil twins

Not to mention dat je CSS3 properties gebruikt met waardes die niet bestaan

De text-align definities maken het ook spannend, die lijken te definieren dat 'justify' alleen op tekst geldt terwijl de rest van de mogelijke waardes wel op inline elementen mag werken.

[ Voor 153% gewijzigd door curry684 op 04-06-2008 02:22 ]

Professionele website nodig?

woensdag 4 juni 2008 02:21

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

curry684 schreef op woensdag 04 juni 2008 @ 02:18:
Not to mention dat je CSS3 properties gebruikt met waardes die niet bestaan

Welles

(En ja, ik ben sarcastisch en het 100% met je eens... maar hey, het werkt

)

edit:

inter-ideograph, inter-cluster en distribute doen 't ook volgens mij

Daar heb je je CSS3 compliancy _{v.w.b. de text-align dan}

[ Voor 15% gewijzigd door RobIII op 04-06-2008 02:28 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 4 juni 2008 02:22

Acties:

curry684

left part of the evil twins

W3C > MS

Professionele website nodig?

woensdag 4 juni 2008 08:57

Acties:

Verwijderd

Topicstarter

Maar hoe zou je zoiets oplossen? Misschien is dat wel een veel interessantere discussie dan te praten over de regels. Want als het werkt dan kunnen de regels nog zo veel vertellen.

Verders had ik eerst een tabel, hierin werden de vlakken netjes uitgelijnd. Alleen met een tabel zet je het aantaantal per regel vast.

woensdag 4 juni 2008 10:20

Acties:

curry684

left part of the evil twins

Praten over de regels is altijd interessant, omdat je door het volgens van de regels afdwingt dat je website in alle huidige en toekomstige browsers zal werken. Dat deze hack toevallig in alle gangbare browsers werkt garandeert niets over IE8 of de volgende rebuild van Mozilla of de comeback van Netscape met een eigen browser of weet ik het.

Men dacht in 1998 met Frontpage 97 ook dat sites goed waren omdat ze in alle gangbare browsers (IE, IE en IE) goed werkten. Look what it's brought us.

Voor het probleem zelf ben je wmb een non-issue aan het creeren. Je moet gewoon geen unlimited-width containers maken op een website, dat vloekt met ieder usability-beginsel (ik heb zelf een desktop van ongeveer 3600 bij 1200 pixels, daar word je scheel van als alles horizontaal blijft doorlopen).

[ Voor 8% gewijzigd door curry684 op 04-06-2008 10:21 ]

Professionele website nodig?

woensdag 4 juni 2008 11:20

Acties:

Verwijderd

Topicstarter

De oplossing is voor in een PHP script voor widgets. Het script wordt in verschillende breedtes geladen, afhankelijk van de breedte van de widget die door de gebruiker zelf in te stellen is. Om brede randen te voorkomen moeten de blokken netjes gecentreerd uitgelijnd worden, de ene keer met 3 op een rij, dan weer 4 op een rij. Dan weer met een marge van 10px dan weer een parge van 1 px. Wie zal het zeggen, de oplossing van de divs ten opzichte van de tabel was eenvoudig, anders verspringen de blokken niet naar de volgende regel.

Voor dit probleem zoek ik een oplossing.

woensdag 4 juni 2008 12:04

Acties:

Guillome

test

RobIII schreef op woensdag 04 juni 2008 @ 02:09:

En wat is het verschil met display block of inline-block?

If then else matters! - I5 12600KF, Asus Tuf GT501, Asus Tuf OC 3080, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router

woensdag 4 juni 2008 16:07

Acties:

Verwijderd

Topicstarter

Hoe bedoel je?

woensdag 4 juni 2008 16:28

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Guillome schreef op woensdag 04 juni 2008 @ 12:04:
[...]

En wat is het verschil met display block of inline-block?

quote: http://www.w3.org/TR/CSS21/visuren.html#display-prop
block
This value causes an element to generate a block box.
inline-block
This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

Moeilijk he, al die documentatie lezen...

[ Voor 46% gewijzigd door RobIII op 04-06-2008 16:29 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 4 juni 2008 16:37

Acties:

Guillome

test

... bedankt ...

[ Voor 9% gewijzigd door Guillome op 04-06-2008 16:38 ]

If then else matters! - I5 12600KF, Asus Tuf GT501, Asus Tuf OC 3080, Asus Tuf Gaming H670 Pro, 48GB, Corsair RM850X PSU, SN850 1TB, Arctic Liquid Freezer 280, ASUS RT-AX1800U router