Probleem met centreren

[555Martijn]

Dag,

Probleempje is nogal lastig uit te leggen dus kijk maar;

Het gaat om de 'vind: x' linkjes. Zoals je bij het eerst boek zie is dat netjes gecentreerd maar als de tekst daarboven korter is is het niet netjes gecentreerd (zoals bij het 4e boek) door de image. Dit is ook goed te zien op de 'scifi' pagina.

Dus; Als tekst te kort is, is het niet gecentreerd (door de foto). Hoe los ik dit het besten op?

 

[csshunter]

Hoi 555martijn,
Bij een "korte tekst" zit ie wel gecentreerd, maar dan in het midden van de afstand die rechts overblijft naast de cover van het boek. Dit komt omdat het image van het boek een {float:left} heeft.
Om 'm echt gecentreerd over de volle breedte (inclusief de cover-breedte) te krijgen, moet er links en rechts de 110px breedte van een cover van af. Dan gaat het altijd goed, ook als er een lange tekst is, en de vind-items of de "meer info"-buttons pas beginnen na de onderkant van de cover.
Daarmee moet het dus worden:

#boek ul {
   margin: 5px 110px;
}

Er is tegelijkertijd 5px afstand onder en boven toegevoegd, zodat de buttons wat minder pal onder de tekst erboven komen.

Attentie: je hebt alle div's van de boeken hetzelfde <div id="boek">...</div> meegegeven. De foutcorrectie van de browsers pakt dit meestal goed op, maar een ID is eigenlijk een unieke naam, die maar één keer op een pagina mag voorkomen. Wil je aan een aantal <div>'s dezelfde eigenschappen toekennen, dan moet het een class zijn: <div class="boek">...</div>.
In de stylesheets worden die aangegeven met een punt voor de naam i.p.v. het hekje #.
Als de class is doorgevoerd voor de boek-div's, wordt de css voor de centrering dan:

.boek ul {
   margin: 5px 110px;
}

(ook de andere css zal even nagelopen moeten worden op #boek die .boek moet worden)

Met vriendelijke groet,
CSShunter

 

[555Martijn]

Top :thumb:! Precies wat ik zocht. Ook bedankt voor de ID tip wist niet dat die uniek moest zijn . Thanks!