Float en centreren probleem
Ik zit met het volgende probleem:
Ik heb een fotoalbum met tabbladen. Afhankelijk van het aantal foto's worden er divjes aangemaakt met een link naar een ander tabblad.
Bv: tab1 - tab2 - tab3 - tab4
Nu zet ik deze divjes naast elkaar met float:left, en het geheel staat in een container-div
Nu wil ik graag alles centreren, dus dat de divjes midden boven het fotoalbum staan.
Probleem is, dat door de float:left, de divjes altijd links staan.
ik kan dit oplossen door de container-div te centreren, maar dat werkt alleen als ik de breedte van de container weet, en die is afhankelijk van het aantal foto's in het album (volgt u me nog?)
Korte CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<style>
#container{
margin: 0 auto;
}
.tab{
float: left;
margin-right:3px;
padding:2px;
}
</style>
#container{
margin: 0 auto;
}
.tab{
float: left;
margin-right:3px;
padding:2px;
}
</style>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#container{
margin: 0 auto;
}
div#tabcontainer
{
text-align: center;
}
.tab{
display: inline-block;
margin-right:3px;
padding:2px;
}
margin: 0 auto;
}
div#tabcontainer
{
text-align: center;
}
.tab{
display: inline-block;
margin-right:3px;
padding:2px;
}
Ik heb ik dit probleem ook op mijn site. Hierin heb ik een variabel aantal menu items die gecentreerd staan.
De oplossing die ik heb is met JavaScript kijken hoeveel items er zijn en dan een simpel rekensommetje (width * aantal) waaruit vervolgens een breedte komt die ik aan de #container meegeef.
Vervolgens kun je ook nog kijken of iemand js uit heeft staan en dan die met inline-block stylen.
Het hele fotoalbum draait op JS/JQuery, dus als mensen js uit hebben staan, hebben ze ook niks aan een inline-block.
Ps. Ik had nog niet gehoord van inline-block. Wat is er zo vies aan?
EDIT:
Ik heb het voor elkaar:
Code (php)
1
2
3
4
5
2
3
4
5
$(function(){
var aantal_tabs = $("#container div").size();
var div_width = (aantal_tabs-4) * 31 + 340;
$('div#container').width(div_width);
});
var aantal_tabs = $("#container div").size();
var div_width = (aantal_tabs-4) * 31 + 340;
$('div#container').width(div_width);
});
ik heb 4 andere divjes in de container zitten met een totale width van 340, vandaar de wat langere rekensom
Gewijzigd op 04/09/2011 13:37:06 door Tobias Tobias
Gewijzigd op 13/09/2011 08:44:12 door Frank C
Wouter J op 04/09/2011 12:04:58:
Inline-block is heel vies, ik zou dan nog eerder gaan voor een JavaScript oplossing.
....
Vervolgens kun je ook nog kijken of iemand js uit heeft staan en dan die met inline-block stylen.
....
Vervolgens kun je ook nog kijken of iemand js uit heeft staan en dan die met inline-block stylen.
Javascript is nooit een oplossing boven CSS tenzij het niet anders kan! Niet om het feit dat men javascript kan uitzetten (dat heeft nagenoeg niemand meer).
Dank voor de link. Ik kom later nog een keer terug op de techniek die je gebruikt hebt. Voor nu ben ik echter benieuwd naar de gedachte achter "ik post hier liever geen links ivm de hoge google-ranking van phphulp". Ik ben een groentje op het gebied van SEO, maar begrijp ik goed dat als je site veel links naar andere sites bevat je ranking naar beneden gaat? En als het links naar andere pagina's op je eigen site zijn?
Nee, ik bedoel dat phphulp hoog staat bij google-resultaten, ne mijn reacties hier dus ook. Ik lees regelmatig verzoekjes van posters om een post aan te laten passen omdat hun naam of een link erin staat, en ik neem liever geen risico's...
Wouter J op 04/09/2011 12:04:58:
Inline-block is heel vies, ik zou dan nog eerder gaan voor een JavaScript oplossing.
Ik heb ik dit probleem ook op mijn site. Hierin heb ik een variabel aantal menu items die gecentreerd staan.
De oplossing die ik heb is met JavaScript kijken hoeveel items er zijn en dan een simpel rekensommetje (width * aantal) waaruit vervolgens een breedte komt die ik aan de #container meegeef.
Vervolgens kun je ook nog kijken of iemand js uit heeft staan en dan die met inline-block stylen.
Ik heb ik dit probleem ook op mijn site. Hierin heb ik een variabel aantal menu items die gecentreerd staan.
De oplossing die ik heb is met JavaScript kijken hoeveel items er zijn en dan een simpel rekensommetje (width * aantal) waaruit vervolgens een breedte komt die ik aan de #container meegeef.
Vervolgens kun je ook nog kijken of iemand js uit heeft staan en dan die met inline-block stylen.
Nog steeds geen antwoord op vraag waaron een inline-block vies is
Gewijzigd op 07/10/2011 15:33:58 door Ger van Steenderen
Ger van Steenderen op 07/10/2011 15:33:02:
[..quote..]
Nog steeds geen antwoord op vraag waaron een inline-block vies is
Nog steeds geen antwoord op vraag waaron een inline-block vies is
Met CSS heb je 2 basis displays: Block en Inline. Een block element is bijv. de content, header, footer, menubar, enz. Een inline element is een span tag, een achor tag, een afbeelding, enz.
Nu hebben sommige browsers bedacht dat je ook nog een inline-block element kan hebben. Dit is opzich natuurlijk een raar idee, een element in een zin die de eigenschappen heeft van een block element. Alsof je een mens heb met eigenschappen van een boom...
Met inline-block geef je aan dat het element dat je hebt in een zin staat. Maar dat staat het helemaal niet, je hebt immers verschillende blokken naast elkaar staan, het is geen zin maar een opsomming. Daarom moet je ook niet net doen alsof het in een zin staat.
En er zijn heel wat verschillen tussen het eind resultaat van display: block inline of inline-block.
Daarnaast geeft de css validator van w3.org geen fout noch een waarschuwing op op een style sheet die een class met display: inline-block bevat
Ger van Steenderen:
Daarnaast geeft de css validator van w3.org geen fout noch een waarschuwing op op een style sheet die een class met display: inline-block bevat
Het is inderdaad valid, maar dat wil nog niet zeggen dat het goed is om het te gebruiken. Tabellen voor een lay-out zijn ook valid, maar ik (en iedereen) raad het ten sterkste af. Inline CSS is ook valid, enz.
Maar ik vind het wel adhoc om zomaar iets vies te noemen, als je toch vergelijkingen wil maken met het dagelijkse leven dan kan ik een magnetron ook vies vinden