login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Afbeeldingen centreren lukt niet via css (tekst wel) (Opgelost)

Offline Urbanusfan - 01/03/2015 08:53
Avatar van UrbanusfanLid Ik wil een nieuw design in elkaar steken dat ook mobiel werkt, alles werkt vrij goed. Maar nu zie ik waarschijnlijk iets kleins over het hoofd, het lukt me namelijk niet om een afbeelding te centreren.

Zie onderaan de 5 afbeeldingen op volgende (test)-pagina:
http://www.urba...vertelt=15

De tekst staat anders wel mooi gecentreerd.
Dit staat in css:

center { align: center; font-size:13px; text-align: center; font-family: "Comic Sans MS",Verdana,Arial,Helvetica,sans-serif,"Lucida Grande","Lucida Sans Unicode"; }

De grote cover van de strip die centraal staat op de pagina heeft hetzelfde probleem, alleen staat hier geen tekst onder en valt het minder op, maar deze wil dus ook niet centreren. Hetzelfde met de 'vooruit' en 'achteruit'-afbeeldingen.

De algemen info rechts op de pagina (albumn°, enz) staat ook gecentreerd met dezelfde class en werkt dan weer wel. ( <p class="center"> )

De vraag is eenvoudig, waarom werkt het enkel bij tekst en negeren de afbeeldingen deze opmaak?

Alvast bedankt voor de hulp.

6 antwoorden

Gesponsorde links
Offline Thomas - 01/03/2015 15:07
Avatar van Thomas Moderator Een p(aragraaf) is een block-level element. Dat wil zeggen dat deze altijd de maximaal beschikbare breedte in beslag neemt. Al die divs daarintegen in je footer (volgens mij kun je het wel met minder af) behalve de grid2 klasse (width: 140px) zijn dimensie-loos.

In de layout die ik zie op mijn laptop (de 960.css variant) staat de inhoud van #footer-inside sowieso al niet gecentreerd - de inhoud vult deze niet uit:
marge afbeelding 1: 10px;
afbeelding 1: 140px;
marges 1 en 2: 20px;
afbeelding 2: 140px;
marges 2 en 3: 20px;
afbeelding 3: 140px;
marges 3 en 4: 20px;
afbeelding 4: 140px;
marges 4 en 5: 20px;
afbeelding 5: 140px;
marge afbeelding 5: 10px;

Dit is 800px als ik mij niet vergis, en niet 960px.
Dus zelfs als je deze cellen individueel centreert, staat het geheel nog steeds niet gecentreerd.

Wat ik zou doen is het volgende: als je per beeldscherm-resolutie toch een vaste breedte hebt: maak hier dan gebruik van. Bijvoorbeeld, je moet (in dit geval) 5 afbeeldingen verdelen over ca. 960px. Omdat je container_12 class toch een horizontale auto-margin heeft: maak hier 900px van en geef elke afbeelding een div van 180px breed (5 stuks). En als je 2x10px als marge gebruikt, trek hier dan 20px vanaf. Daarnaast is het een idee om de hele div klikbaar te maken door van de hyperlink een block-level element te maken en deze in de div uit te vullen.

Zoiets dus:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html>
  5. <style type="text/css">
  6. div.container   { background-color: #ccccff; width: 900px; margin: 0 auto; }
  7. div.element     { display: block; float: left; width: 160px; margin: 0 10px; text-align: center; background-color: #ccffcc; }
  8. div.element a   { display: block; width: 100%; height: 100%; }
  9. div.clear       { clear: both; }
  11. </head>
  12.  
  14. <div class="container">
  15.     <div class="element">
  16.         <a href="index.htm"><img src="pixel.gif" height="100" width="140" alt="" /><br />- LALA -</a>
  17.     </div>
  18.  
  19.     <div class="element">
  20.         <a href="index.htm"><img src="pixel.gif" height="100" width="140" alt="" /><br />- LALA -</a>
  21.     </div>
  22.  
  23.     <div class="element">
  24.         <a href="index.htm"><img src="pixel.gif" height="100" width="140" alt="" /><br />- LALA -</a>
  25.     </div>
  26.  
  27.     <div class="element">
  28.         <a href="index.htm"><img src="pixel.gif" height="100" width="140" alt="" /><br />- LALA -</a>
  29.     </div>
  30.  
  31.     <div class="element">
  32.         <a href="index.htm"><img src="pixel.gif" height="100" width="140" alt="" /><br />- LALA -</a>
  33.     </div>
  34.     <div class="clear"><!-- clear --></div>
  35. </div>
  36. </body>
  37. </html>

Het kan dus een stuk simpeler dan al die extra divs die je nu gebruikt en eigenlijk niets doen.
Bedankt door: Urbanusfan
Offline Urbanusfan - 01/03/2015 22:01 (laatste wijziging 02/03/2015 16:12)
Avatar van Urbanusfan Lid Ik heb de nodige wijzigingen gedaan. Veel div's zijn eruit gehaald, dat maakt de pagina al veel overzichtelijker.

Ik heb nu een class 'gridcenter 3' (180 breed x 5 = 900). Dat geeft dan een mooie verdeling over het design. Echter het uitlijnen zit er nog altijd niet in. Volgende waarde staan in de css:

display: block;
margin-left: auto;
margin-right: auto;
width: 95%;
float: left;

Ik kan niet met een vast waarde werken, zoals goede tip gegeven, soms gaan de afbeeldingen in die div breeder zijn (bv. 155 x 5). Daarom dat ik een auto margin left en right geef (waarvan ik dacht dat het dan een centering zou geven).

Wat zie ik nu over het hoofd?
Alvast bedankt voor de tip.
Offline Thomas - 02/03/2015 16:23 (laatste wijziging 02/03/2015 16:25)
Avatar van Thomas Moderator "a img" is een block level element middels style.css.

Als je dit overschrijft/ongedaan maakt voor je footer div, en dan van je hyperlink een block level element maakt (zoals eerder beschreven) en hierin je text betrekt (zowel img als tekst binnen de hyperlink) dan zou het goed moeten gaan.

EDIT: je hoeft overigens niet met marges te werken binnen je hyperlinks (onthoud ook dat marges van toepassing zijn op de *buitenkant* van een element). Als je je hyperlinks opblaast (dmv display: block; width: 100%; height: 100%; ) dan kun je gewoon text-align: center gebruiken om de inhoud (= je afbeelding + tekst) te centreren.
Offline Urbanusfan - 02/03/2015 17:10
Avatar van Urbanusfan Lid Ik heb de "a img" uit de css gehaald.

Ik heb 'schrik' dat ik van een hyperlink een block level maak dat die link actief gaat worden als je via een smartphone zit te scrollen. Want daar verschijnen de vijf links vlak onder elkaar.

Blijft vreemd dat de tekst rechts, met albumn° enz niet gecentreerd staat.
Offline Thomas - 02/03/2015 20:06
Avatar van Thomas Moderator Ik weet niet wat je precies veranderd hebt, maar nu is de gehele breedte in deze div op elk moment onderdeel van een hyperlink, terwijl in mijn voorbeeld uitsparingen zitten in de vorm van marges.

Heb je geprobeerd of dat wat jij beschrijft echt een probleem is? Ik kan mij zo voorstellen dat als iemand aan het scrollen is er sowieso geen links gevolgd worden (ook al veeg je over een hyperlink heen - dit is toch een andere aansturing?).
Offline Urbanusfan - 03/03/2015 17:18 (laatste wijziging 09/03/2015 21:28)
Avatar van Urbanusfan Lid Ondertussen al wat opgeschoten, pagina is nu 'opgekuist' en blijven nog enkele moeilijkheden over waarbij ik m'n hoofd breek.

Achter elke link komt wit (begint een nieuwe regel), maar kan niet meteen vinden in welke css dat staat. Hoe is dit te achterhalen?

Je merkt het hier aan de tekst onder het filmpje (de link staat op een eigen regel):
http://www.urba...svertelt=1
Ook onderaan waar de links staan met de albumcovers zie je de tekst lager verschijnen dan nodig is.

Waar ik ook mee vast zit is de tekst onder het DVD hoesje, dat neemt gans de breedte in.
Nu dacht ik te werken zoals met een 'table', ik zet een blok links en rechts en dan komt alles mooi in het midden. DIV's van 225 px / 450 px / 225 px, maar gezien ik DIV's leeg laat (in dit geval de twee van 225 breed) verschijnt die 450 DIV niet zoals ik had verwacht.

Eigenlijk kom ik hier terug bij misschien de eerste vraag: kan ik de inhoud van een DIV vanuit css centreren en DIV's in elkaar doen passen. Bv. een DIV van 900 breed die de DIV van 450 breed gecentreerd zet?
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s