[HTML + CSS] Float center? - Softwareontwikkeling

vrijdag 2 juni 2006 20:49

Acties:

Topicstarter

Ik ben bezig met het maken van een 'simpele' layout voor een fotoalbum. Het idee is dat er 1 container div komt met een breedte van 600px. Hierin komen allemaal kleine blokken van 200px*240px met daarin een foto en 1 a 2 regels text. Deze blokken moeten naast elkaar komen en de rij opvullen en vervolgens op de volgende rij verder gaan. Hiervoor gebruik ik gewoon een float: left en dat werkt opzich goed. Het enige probleem is dat ik graag de onderste rij met blokken in het midden gecentreerd wil hebben. Dit geldt dus ook voor de bovenste rij wanneer er minder dan 3 blokken aanwezig zijn.

Hier gaat het echter fout. Ik krijg het niet voor elkaar om die blokken te centreren.

Ik heb met de searchfunctie al wel een poos gezocht en kon eigenlijk maar 1 topic vinden met precies hetzelfde probleem. Echter is daar ook niet echt een oplossing gegeven behalve dat je tabellen moet gebruiken. Toch gaat het tegen me principe in om tables te gebruiken voor alles wat met layout te maken heeft. Het betreft namelijk niet echt tabulaira data imo. Het betreffende topic is: [rml][ HTML/CSS]images met daaronder tekst naast elkaar[/rml]

De sourcecode die ik op het moment gebruik:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    div#container {
        position: relative;
        margin: 0 auto;
        width: 600px;
        text-align: center;
    }

    div.box {
        width: 196px;
        height: 240px;
        border: 2px solid #FF0000;
        float: left;
    }

</style>
</head>
<body>
  <div id="container">
    <div class="box">a picture and some text here</div>
    <div class="box">a picture and some text here</div>
    <div class="box">a picture and some text here</div>
    <div class="box">a picture and some text here</div>
  </div>
</body>

* In de code heb ik gebruik gemaakt van div als blockelement. Dit is semantisch gezien misschien niet de beste. Hierover graag geen opmerkingen want waarschijnlijk zal ik geen div daarvoor gebruiken in de uiteindelijke versie.

[ Voor 17% gewijzigd door DamadmOO op 25-10-2006 11:41 ]

vrijdag 2 juni 2006 22:54

Acties:

user109731

Dit is volgens mij niet mogelijk zonder JavaScript te gebruiken.

Wat ik weleens heb gebruikt is dit:

HTML:

<div id="content1" class="content">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>
<div id="content2" class="content">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

En dan in je CSS zoiets:

Cascading Stylesheet:

.content {
    height:100%;
    width:40%;
    float:left;
}
.float {
    width:70px;
    height:70px;
    background-color:lime;
    border:1px dotted blue;
}
#content1 .float { float:right; }
#content2 .float { float:left; }

Maar goed, dit is natuurlijk verre van ideaal.

Zeker voor gegenereerde content is het lastig om alles in de goede div te zetten, en het centreert niet 'echt'.

vrijdag 2 juni 2006 23:26

Acties:

DamadmOO

Topicstarter

Ik heb het inmiddels al met een dirty fix opgelost.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Test</title>
  <style type="text/css">
    div#container {
        position: relative;
        margin: 0 auto;
        width: 600px;
        text-align: center;
    }

    div.box {
        width: 196px;
        height: 240px;
        border: 2px solid #FF0000;
        float: left;
    }

    div.three {
        width: 600px;
        margin: 0 auto;
    }

    div.two {
        width: 400px;
        margin: 0 auto;
    }

    div.one {
        width: 200px;
        margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="three">
      <div class="box">some text here</div>
      <div class="box">some text here</div>
      <div class="box">some text here</div>
    </div>
    <div class="two">
      <div class="box">some text here</div>
      <div class="box">some text here</div>
    </div>
    <div class="one">
      <div class="box">some text here</div>
    </div>
  </div>
</body>

Groot nadeel is dat het natuurlijk niet werkt wanneer een box een variable breedte heeft. En je moet tijdens het genereren van de div's ook rekening houden met het plaatsen in een goede row. Maar ach voor nu moet het maar. Kon verder geen enkele manier bedenken die wel werkte. Ik zou mijn manier opzich nog wel kunnen aanpassen zodat het ook werkt met variable breedtes maar dan nog vindt ik het maar een beetje een workaround.

Ben ik echt de enige die zoiets wil maken? Het lijkt mij opzich toch niet zo heel speciaal. Persoonlijk zou ik het niet erg vinden als voor dit een soort van float: center komt binnen css. Hoe deze geimplementeerd zou moeten worden weet ik niet precies maar het zou toch wel mogelijk moeten zijn. Het is opzich niet zo heel verschillend van een text-align: center behalve dat het om block elementen gaat in plaats van inline elementen.

[ Voor 26% gewijzigd door DamadmOO op 02-06-2006 23:28 . Reden: indenting ]

zaterdag 3 juni 2006 00:15

Acties:

Niakmo

ik heb een soortgelijk probleem opgelost door elke rij in een aparte div te plaatjes. Aangezien mijn content uitgelezen werd met php/mysql kon ik zo heel makkelijk die rijen genereren. In jou geval zou je de rijen dus centreren, als er gewoon 3 foto's inzitten zal hij gewoon even breed zijn als de holder. Zodra er maar 2 foto's in zitten zal hij ze centreren.

zaterdag 3 juni 2006 00:18

Acties:

DamadmOO

Topicstarter

Daar zat ik ook aan te denken. Alleen wil ik tekst precies onder de foto hebben met als gevolg dat je dus een bloklevel element moet gebruiken. Deze staan automatisch onder elkaar en moet je dus floaten om dat goed te krijgen. Als je kijkt naar me 2e gedeelte code dan zie je ook dat elke rij opzich een div heeft gekregen

zaterdag 3 juni 2006 03:19

Acties:

djluc

Dit is echt een irritant probleem. Ben nu al zeker een half uur aan het kloten maar het lijkt gewoon onmogelijk!

Als iemand het wel voor elkaar krijg als je bijvoorbeeld classes er aan hangt heb ik wel een stukje JS waarmee je bijvoorbeeld een classe "last" enzovoorts aan het laatste element kunt hangen.

zaterdag 3 juni 2006 16:17

Acties:

Niakmo

DamadmOO schreef op zaterdag 03 juni 2006 @ 00:18:
Daar zat ik ook aan te denken. Alleen wil ik tekst precies onder de foto hebben met als gevolg dat je dus een bloklevel element moet gebruiken. Deze staan automatisch onder elkaar en moet je dus floaten om dat goed te krijgen. Als je kijkt naar me 2e gedeelte code dan zie je ook dat elke rij opzich een div heeft gekregen

ik zie even niet in waarom je persee een bloklevel element moet gebruiken en je testcase is niet meer berijkbaar.

zaterdag 3 juni 2006 16:37

Acties:

DamadmOO

Topicstarter

Link naar de testcase was verkeerd (oops). Heb het zojuist gefixed.

zaterdag 3 juni 2006 18:29

Acties:

Niakmo

je huidige oplossing is ook de enige die ik kan bedenken. Hoe genereer je je content? Of is de content statisch. Met je huidige oplossing kan je gewoon de laatste div een andere class/id mee geven zodat die zich ander gedraagd.

zondag 4 juni 2006 01:04

Acties:

djluc

Je weet niet of je 1 laatste hebt (dus op de laatste regel) of meerdere. Dus een class is in principe ook niet handig. * djluc denkt er weer over na maar het lukt niet

zondag 4 juni 2006 15:56

Acties:

Verwijderd

Zit op dit ogenblik met juist hetzelfde probleem,
het dit uit gemakzucht serverside opgelost .. maar een client-side oplossing lijkt me veel netter.
Eventjes de webdev-toolbar bovenhalen

Edit: http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins, ziet er op het eerste zicht naar uit dat dit niet zal lukken zonder hulp van een extern script.

[ Voor 40% gewijzigd door Verwijderd op 04-06-2006 16:49 . Reden: Link toegevoegd ]

maandag 5 juni 2006 03:27

Acties:

kaydie

Niet echt netjes, maar hij werkt wel:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
  <title>Test</title> 
  <style type="text/css"> 
    div#container { 
        position: relative; 
        margin: 0 auto; 
        width: 600px; 
        text-align: center; 
        font-size:1px;
        line-height:1px;
        display:block;
    } 

    div.box {
        margin:0;
        font-size: 12pt;
        line-height:1.2em;
        width: 196px;
        border: 2px solid #F00;
        height: 240px;
        display: inline-block;
        display: -moz-inline-box;
    } 
</style> 
</head> 
<body> 
  <div id="container"> 
    <div class="box">a picture and some text here</div> 
    <div class="box">a picture and some text here</div> 
    <div class="box">a picture and some text here</div> 
    <div class="box">a picture and some text here</div> 
  </div> 
</body>

Mocht het in IE6 niet werken (kan het zelf hier niet testen), probeer dan eens van de divs met class box span's te maken. Ik geloof dat inline-block alleen werkt met elementen die van origine een display inline hebben in IE6...

[ Voor 24% gewijzigd door kaydie op 05-06-2006 03:32 ]