Float en centreren probleem

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tobias Tobias

Tobias Tobias

04/09/2011 11:36:10
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
<style>
#container{
    margin: 0 auto;
}

.tab{
    float: left;
    margin-right:3px;
    padding:2px;    
}
</style>
 
PHP hulp

PHP hulp

08/03/2021 03:44:55
 
Mark L

Mark L

04/09/2011 11:44:21
Quote Anchor link
En werkt het met een inline-block? Let op de div#tabcontainer (die moet je er dan nog in de html bij plaatsen)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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;    
}
 
Wouter J

Wouter J

04/09/2011 12:04:58
Quote Anchor link
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.
 
Tobias Tobias

Tobias Tobias

04/09/2011 12:46:19
Quote Anchor link
Ik zal naar de JS-oplossing gaan kijken.
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
$(function(){
    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
 
Frank  C

Frank C

13/09/2011 05:12:01
Quote Anchor link
Interessant. Kun je mij een pm sturen met de link naar de site als het operationeel is, of de link hier posten als het nu al operationeel is?
Gewijzigd op 13/09/2011 08:44:12 door Frank C
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

13/09/2011 08:47:22
Quote Anchor link
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.

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).
 
Tobias Tobias

Tobias Tobias

16/09/2011 10:32:54
Quote Anchor link
@ Frank C: Zie je pm, ik post hier liever geen links ivm de hoge google-ranking van phphulp...
 
Frank  C

Frank C

22/09/2011 11:40:09
Quote Anchor link
@ Tobias:
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?
 
Tobias Tobias

Tobias Tobias

22/09/2011 16:35:03
Quote Anchor link
@ Frank C:
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...
 
Frank  C

Frank C

22/09/2011 17:39:17
Quote Anchor link
OK. Thanks.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

07/10/2011 15:33:02
Quote Anchor link
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.

Nog steeds geen antwoord op vraag waaron een inline-block vies is
Gewijzigd op 07/10/2011 15:33:58 door Ger van Steenderen
 
Wouter J

Wouter J

07/10/2011 16:17:23
Quote Anchor link
Ger van Steenderen op 07/10/2011 15:33:02:
[..quote..]
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

07/10/2011 17:13:17
Quote Anchor link
Volgens mij vat je de term inline te letterlijk op.
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
 
Wouter J

Wouter J

07/10/2011 17:41:40
Quote Anchor link
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.
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

07/10/2011 18:44:38
Quote Anchor link
Ik moet eerlijk bekennen dat css maken niet mijn favo bezigheid is, maar het hoort nu eenmaal bij.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.