afbeeldingen horizontaal centreren

Vragen over html, css en aanverwante onderwerpen die met het maken van 'n site te maken hebben. In principe, vanwege tijdgebrek, alleen over code op deze site, maar je kunt natuurlijk altijd proberen...
Plaats reactie
Robbie
Berichten: 2
Lid geworden op: di 27 aug 2013, 10:50

afbeeldingen horizontaal centreren

Bericht door Robbie »

Hallo,
ik ben nieuw op het forum. Ik ben deze css site aan het doorlezen geweest(ook om te kijken voor een antwoord op mijn probleem) en merk ook hier dat er veel kan met css. Dat is heel mooi maar je kan het jezelf met blijkbaar niet genoeg kennis ook best wel moeilijk maken, en dat is wat ik bij mijzelf aan het doen ben :( .

Wat ik wil is dat ik fotoalbums met naam erboven horizontaal centraal in een div wil plaatsen en ik ben vanaf gisteren veel aan het puzzelen geweest met display:block of inline-block, eigenlijk wel alle display, en bijvoorbeeld met float: left of right en nog veel meer maar ik krijg de afbeeldingen en bijbehorende naam niet horizontaal gecentreerd. Om wat ik bedoel wat duidelijker te maken is hier de pagina waar ik het over heb;http://www.robcnossen.nl/
Ik wil die twee afbeeldingen naast elkaar in het grijze vak hebben in plaats van onder elkaar.

Kan iemand mij hierbij helpen? Als er iets niet duidelijk is vraag het me.
Bedankt...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: afbeeldingen horizontaal centreren

Bericht door Goeroeboeroe »

Hallo,

Eerst even de min of meer standaard-opmerking. Dit is 'n uiterst klein forum, en in feite ben ik de enige die hier antwoord geeft (tot nu toe). Het is eigenlijk meer bedoeld voor vragen over de hier gevonden voorbeelden. Maakt verder niet uit, maar het kan prima dat het soms even 'n tijd duurt voor je antwoord krijgt. Bovendien kijken op 'n groter forum meer mensen mee, waardoor fouten eerder worden opgemerkt.
Dat even terzijde.

Je zou zoiets kunnen doen:

Code: Selecteer alles

<!DOCTYPE html>
<html lang="nl">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		body {
			background-color:#000;
		}
		#wrap {
			 border:1px solid #333;
			 text-align:center;
			 margin-top:10%;
			    height: 200px;
			    background: #0F0F0F;
		}
		#wrap img {
			margin:8px;
			border:1px solid #666;		        
		}
		#wrap img:hover {
			border:1px solid #CCC;
		}
		#wrap h2 a {
			text-decoration:none;
			color:#666;
		}
		#wrap div {
			display: inline-block;
			width: 120px;
		}
	</style>
	<title>Untitled Document</title>
</head>
<body>
<div id="wrap">
	<div>
		<h2><a href="view_album.php?album_id=8">Holland</a></h2>
		<a href="view_album.php?album_id=8"><img src="uploads/thumbs/8/KONICA MINOLTA DIGITAL CAMERA_428.jpeg" alt="" width="100" height="100"></a>
	</div>
	<div>
		<h2><a href="view_album.php?album_id=9">Belgie</a></h2>
		<a href="view_album.php?album_id=9"><img src="uploads/thumbs/9/PICT0170.JPG" alt="" width="100" height="100"></a>
	</div>
</div>
</body>
</html>
Even iets meer antwoorden dan wat je vroeg. Dat is 'n onhebbelijke gewoonte van mij, grinnik. Ik heb het even snel gedaan en weet niet precies wat het uiteindelijke doel is, dus helemaal kant-en-klaar is het niet.
* Je gebruikt hoofdletters in de namen van de afbeeldingen, en spaties. Dat is 'n slecht idee, want daar ga je heel snel fouten mee maken. Bovendien worden hoofd- en kleine letters verschillend behandeld door verschillende systemen. Op Windows maakt het niet uit, maar als je site op 'n Linux-server komt te staan (meest gebruikte systeem), dan is er wel verschil en zoek je je ongans naar waarom je afbeelding niet verschijnt. Ik zou alleen kleine letters gebruiken, consequent.
* Spaties mogen niet in bestandsnamen, dat kan problemen gaan geven. Vervangen door een - (afbreekteken) of _ (onderstreping). Zoekmachines zien twee woorden gescheiden door een - als twee woorden, en gescheiden door een _ als één woord. Als je afbeelding dus 'twee huizen.jpg' heet, zou ik hem 'twee-huizen.jpg' noemen. Want mensen zoeken wel op 'twee' en 'huizen', maar niet op 'twee_huizen'.
* Ik zou het doctype veranderen (en <html> en <meta charset ...>) naar wat hierboven staat. Veel simpeler en als je ooit html5 dingen wilt gebruiken, zit je gelijk goed. Bij <html> heb ik de taal toegevoegd: lang="nl". Is handig voor screenreaders e.d., en voor sommige zoekmachines mogelijk ook. Als je html als doctype gebruikt, kan die spatie+/ aan het eind van veel tags vervallen.
* Ik heb de code laten inspringen. Daardoor vind je veel eerder fouten.
* Bij de <img>'s kan title=""weg. Dat is namelijk standaard al zo. De title wordt gebruikt om iets zichtbaar te maken als je er met de muis op hangt. Wat er wel bij moet is alt="omschrijving van de afbeelding". Dat is van belang voor screenreaders, zoekmachines, e.d. Als het om 'n onbelangrijke afbeelding gaat, moet er alt="" bij: <img src="ik-ben-alleen-maar-versiering.jpg" alt="">
* div#imagebar is eigenlijk verdwenen. In plaats daarvan zijn er twee divs teruggekomen, één voor elke <h2> en <img>. De css die bij #imagebar stond, is voor het grootste deel naar #wrap verplaatst.
* min-height: 100% is weggehaald. Dat heeft hier geen enkel nut, want er staat niets onderaan de pagina of zo wat altijd onderaan het scherm moet staan. Bovendien is er meer css nodig, anders werkt dit niet, en het kan ook problemen opleveren op mobieltjes en zo.
* position: fixed is weggehaald. Heeft hier geen enkel nut. Het zorgt ervoor dat iets niet scrolt, maar altijd stil blijft staan. Op mobieltjes e.d. kan het delen van de pagina laten verdwijnen, dus heel voorzichtig mee zijn.
* top: 60% kan dan ook weg, want dat werkt alleen bij 'n position. Heb ik vervangen door margin-top bij #wrap. Een marge in procenten is altijd gebaseerd op de breedte van de ouder, ook een marge in de hoogte. Op een (veel) smaller scherm wordt de marge dus (veel) kleiner, waardoor ook op mobieltjes e.d. de hele pagina is te zien.
* #imagebar img is veranderd in #wrap img. inline-block is niet nodig, want een <img> is weliswaar een inline-element (net zoals tekst), maar met wat bijzondere eigenschappen. Een border en marge kan er altijd aan worden gegeven. En hoe minder css, hoe overzichtelijker en zo.
* #imagebar img:hover is vervangen door #wrap img:hover
* Nieuw zijn de twee divs rondom thumb en <h2>. Die worden aangesproken met #wrap div: de divs binnen #wrap. Een div begint normaal genomen op een nieuwe regel (blok-elelement). Door display: inline-block; gebeurt dat niet, maar komen ze naast elkaar. Dat gebeurt ook bij display: inline;, maar met inline-block kun je ook eigenschappen als width blijven gebruiken, die bij een blok-element werken. De divs hebben een breedte gekregen, waardoor je ze op 'n bepaalde afstand kunt zetten.
Door thumb en <h2> in een eigen div te zetten, kun je ze als één geheel gaan behandelen. Ze blijven als het ware altijd bij elkaar. En omdat inline-block is gebruikt, werkt text-align: center ook op deze divs. Staan ze dus horizontaal gecentreerd.
* Bij de <img> missen hoogte en breedte. Als dat kan, is het 'n goede gewoonte die op te geven. De browser reserveert er dan alvast ruimte voor:
<img src="uploads/thumbs/8/koninca-minolta-digital-camera-428.jpeg" alt="Mijn konica" width="100" height="100">. Zoiets.

Nou, ik denk dat je hier wel weer even mee vooruit kunt. Succes!
Robbie
Berichten: 2
Lid geworden op: di 27 aug 2013, 10:50

Re: afbeeldingen horizontaal centreren

Bericht door Robbie »

Eerst even de min of meer standaard-opmerking. Dit is 'n uiterst klein forum, en in feite ben ik de enige die hier antwoord geeft (tot nu toe). Het is eigenlijk meer bedoeld voor vragen over de hier gevonden voorbeelden.
Oke, dat had ik niet begrepen, mijn excuses hiervoor. Des te meer waardeer ik je antwoord en wat voor antwoord, niet gering.
Ik heb al je adviezen opgevolgd, vandaar dat mijn antwoord even op zich liet wachten ;) .

Het werkt prima en de code ziet er een stuk overzichtelijker uit.

Mijn dank is groot...
Goeroeboeroe
Beheerder
Berichten: 312
Lid geworden op: zo 21 nov 2010, 02:08
Contacteer:

Re: afbeeldingen horizontaal centreren

Bericht door Goeroeboeroe »

Nee, nee, geen excuses. Dat staat eigenlijk nergens. Ik gebruik het alleen even om uit te leggen dat het soms 'n tijdje kan duren.
Mooi dat het werkte!
Plaats reactie