foto met ondertitel

[jeel2008]

hoe krijg ik nu foto met ondertitels mooi naast elkaar met css?
dit werkt niet (zie image)

	.fotomidden {
	padding: 2px;
	width: 180px;
	border: thin solid #06C;
	margin: 3px;
}

dit heb ik dus op alle drie de plaatjes toegepast, maar de plaatjes, die ieder in een div staan verschijnen onder elkaar. waarom niet naast elkaar . er is plaats zat en ik heb nergen Clear both gezegd, of iets dergelijks.
alle drie de div nesten in een grote div helpt ook niet.

 

[Goeroeboeroe]

Een div is een zogenaamd blok-element. Dat wil zeggen dat het normaal genomen altijd op 'n nieuwe regel begint. Als je dat wilt voorkomen, moet je ze floaten. Aan de css toevoegen:
float: left;
Nu wordt elke div eerst zo hoog mogelijk neergezet, dus zoveel als er op 'n regel passen, en daarna zover mogelijk naar links neergezet.
Met margin en zo kun je de onderlinge afstand beïnvloeden.

 

[jeel2008]

float: left

hallo goeroeboeroe,
klopt, dat werkt. bedankt.
en als je de tekst voor iedere foto recht onder de foto, dus precies in t midden wil uitlijnen, moet je dan een aparte cssregel aanmaken? (ik heb .tekstmidden aangemaakt, met tekstalign: center). maar zou dat ook in de css code van de foto kunnen?
ik heb ook daar tekstalign center in .fotofloatleft geprobeerd , zodat ie alles in 1x kon uitlijnen, maar dat werkte niet. blijkbaar ziet hij de foto en tekst niet als dezelfde dingen (ik zou zeggen: het is allebei inhoud en wat ik uitlijn doet er niet toe).

<div class="fotofloatleft">
                          <img src="images/links_buddy_holly.jpg" alt="Buddy Holly" width="141" height="158" />
                          www.buddyholly.com</div>

.fotofloatleft {
	margin: 3px;
	padding: 3px;
	float: left;
	width: 170px;
	border: thin solid #069;
	text-align: center;
}

trouwens, nog iets: als je het plaatje bekijkt zie je dat de twee rechtsonder wel mooi zijn uitgelijnd. de code voor de tekst staat hier tussen divs.
maar de andere, waar de code voor de tekst tussen spans staat, reageren niet.
hoe komt dat?
code van een foto met tekst in span (werkt niet) en een code van een foto met tekst in div:

 <div class="fotofloatleft">
                          <img src="images/links_buddy_holly.jpg" alt="Buddy Holly" width="141" height="158" />
                          <span class="tekstmidden">www.buddyholly.com</span></div>
                          
                           <div class="fotofloatleft">
                          <img src="images/links_buddy_holly.jpg" alt="Buddy Holly" width="141" height="158" />
                          <div class="tekstmidden">www.buddyholly.com</div></div>

 

[Goeroeboeroe]

Als je in .fotofloatleft tekst heb staan, wordt die ook horizontaal in het midden gezet als je text-align: center gebruikt in de css voor .fotofloatleft.
<img> en tekst zijn allebei inline-elementen, dus die worden allebei hiermee gecentreerd. Als dat om een of andere reden niet gebeurt, gaat er iets mis. Heb je in dat geval 'n link naar waar de code online staat?

In html zijn (ruwweg) alle elementen in twee groepen te verdelen: inline en blok (en 'n paar uitzonderingen, maar die sla ik even over). Het meest opvallende verschil: 'n blok-element begint op 'n nieuwe regel. Dat zijn o.a. <p>, <div>, <h1-6>.
Inline-elementen zijn o.a. <img>, tekst, <strong> en <span>. Die beginnen niet op 'n nieuwe regel.
'n Pagina is te vergelijken met 'n boekenkast.
'n Blok-element is te vergelijken met 'n plank in die boekenkast.
En 'n inline-element is te vergelijken met 'n boek in de kast.

Als je bij 'n <span> text-align opgeeft, werkt dat niet. De span is 'n boek: als je 'n boek opdracht geeft de bladzijden in 't midden van 't boek te zetten, schiet dat ook niet op.
'n div is 'n plank. Als je tegen de div zegt: zet het boek in het midden, of zet alle boeken in het midden, van de plank, kan dat prima.

Op dezelfde manier werkt text-align dus wel binnen 'n div, maar niet binnen 'n span.

Elk inline- of blok-element heeft bepaalde eigenschappen. Zo kan 'n <img> hoogte en breedte hebben, en 'n <span> niet. Maar 't blijft 'n inline-element.
'n Blok-element heeft een aantal eigenschappen die bij 'n inline-element niet werken. Zoals text-align, height, width, margin, padding. Maar ze hebben beide hun nut. (En sommige eigenschappen werken dus wel bij sommige gespecialiseerde inline-elementen, zoals 'n <img>).

 

[jeel2008]

css

hallo goeroeboeroe, en wederom bedankt voor de verhelderende uitleg.
rest me toch nog een vraag.
geloof het of niet, maar als je het bijgevoegde plaatje (blues.jpg) bekijkt zie je dat alles mooi uitgelijnd is.
alle plaatjes hebben een div die left floaten. ook de laatste! maar die gaat naar rechtsonder!
zeer bizar. waarom niet mooi naar links? hij heeft nl precies dezelfde class dan de rest.

en dan de tekst daaronder, de drie urls.
die zou ik bijvoorbeeld graag op de plaats hebben van waar nu het laatste blauwe kader staat (wat dus naar links zou moeten), want daar ontstaat een gapend gat.
maar wat ik ook doe, het komt veel te ver naar beneden.
enig idee waarom bovenstaande twee dingen zo zijn?

dan nog 1 ding:
daaronder beginnen blueslogos, die zijn maar zo;n 50 px hoog.
die wil ik allemaal links onder elkaar.
dat zou kunnen met left alignen in een css , en geen floatleft meegeven. vermoed ik.
maar rechts daarvan heb ik blokken met youtubefilmpjes van zo'n 400x400 px.
hoe kan ik nu links die logos onder elkaar krijgen en rechts daarvan, waar dus ook een gapend gat is, veel hogere blokken krijgen met filmpjes erin?

 

[Goeroeboeroe]

alle plaatjes hebben een div die left floaten. ook de laatste! maar die gaat naar rechtsonder!
zeer bizar. waarom niet mooi naar links? hij heeft nl precies dezelfde class dan de rest.

Geen flauw idee. Hoewel... Als ik die afbeelding vergroot, dan lijkt de middelste afbeelding rechts net 'n px of zo lager dan de andere.
Bij floaten wordt de div eerst zo hoog mogelijk gezet. Volgens mij past die onderste div met afbeelding precies net nog in die iets minder hoge afbeelding midden rechts. Daarna wordt hij naar links gezet, maar dat kan dus niet, want dan komt hij gelijk tegen de div middenonder, die net 'n px lager is.
Ik denk (weet 't niet zeker) dat 't is opgelost als je die div middenrechts iets hoger maakt. Net zo hoog als de andere ernaast.

en dan de tekst daaronder, de drie urls.
die zou ik bijvoorbeeld graag op de plaats hebben van waar nu het laatste blauwe kader staat (wat dus naar links zou moeten), want daar ontstaat een gapend gat.
maar wat ik ook doe, het komt veel te ver naar beneden.
enig idee waarom bovenstaande twee dingen zo zijn?

Ik denk (weer niet zeker) dat dat dan ook gelijk is opgelost. Je zou 't niet zeggen, maar die onderste afbeelding is naar LINKS gefloat. Dat betekent dat daarop volgende tekst e.d. RECHTS van de gefloate div worden gezet. Maar daar is geen ruimte, dus komt het eronder.

daaronder beginnen blueslogos, die zijn maar zo;n 50 px hoog.
die wil ik allemaal links onder elkaar.
dat zou kunnen met left alignen in een css , en geen floatleft meegeven. vermoed ik.
maar rechts daarvan heb ik blokken met youtubefilmpjes van zo'n 400x400 px.
hoe kan ik nu links die logos onder elkaar krijgen en rechts daarvan, waar dus ook een gapend gat is, veel hogere blokken krijgen met filmpjes erin?

Je zou zoiets kunnen proberen:

<div style="float: left;">
	<div><img src="blueslogo-1.jpg" width="400" height="50"></div>
	<div><img src="blueslogo-2.jpg" widht="400" height="50"></div>
	<div><img src="blueslogo-3.jpg" widht="400" height="50"></div>
</div>
<div style="float: right;">
	<div style="width: 400px; height: 400px;">youtube 1</div>
	<div style="width: 400px; height: 400px;">youtube 2</div>
	<div style="width: 400px; height: 400px;">youtube 3</div>
</div>

En dan natuurlijk even de css eruit plukken en in 'n stylesheet.

 

[jeel2008]

uitlijnen

hallo goeroeboeroe
wat punt 1 betreft heb je weer eens helemaal gelijk. ik wist niet dat het zo werkte.
maar t was net die ene pixel. waarom geef je in de css dan geen vaste hoogte op zal jij misschien zeggen.
wel, omdat ik niet weet wat ie dan met de marge doet.
als ik een plaatje van 30 hoog heb met padding 3 dan is er ruimte zat voor de inhoud als de hoogte 50 is.
maar als in de css staat box 50 pixels hoog, een het plaatje is 49 hoog , met padding 3, dan wordt het misschien een soepzootje omdat ie er niet weet wat ie er mee aanmoet.te weinig ruimte om EN plaatje EN aan marge te voldoen.

punt 2: klopt, is ook opgelost hierdoor.

punt 3 moet ik nog naar kijken.

bedankt maar weer, je helpt me aardig op weg.

 

[jeel2008]

links uitlijnen

hallo goeroeboeroe
als je het image bekijkt zie je dat het logo bluesforum steeds rechts blijft hangen.
maar het zou links tegen de kantlijn aankomen.
ik heb gedivd tot ik een ons woog, maar lauw loene tot nu toe.

dit is het stukje code tussen de laatste tekstregel en Bluesforum:

<a href="http://www.bluesrockpagina.nl" target="_blank">www.bluesrockpagina.nl</a>                      
                        
                   </div>
                  
         <div style="float: left;">
<a href="http://bluesforum.nl" target="_blank"><img src="images/links_bluesforum.gif" alt="Bluesforum" width="318" height="35"  title="Bluesforum"  /></a>
          </div>

er staat nu steeds float:left maar ook met alleen div, zonder 'opdracht', gebeurde dit


de enige manier waarop het wel gaat is de div een enorme breedte meegeven (bv 100% of 600 px) zodat er niks meer naast past. maar dit kan toch niet de oplossing zijn?

 

[Goeroeboeroe]

Daar is zo eigenlijk niets van te zeggen, zonder meer css en html.
Maar ik ga even gokken, afgaande op de afbeelding. Mogelijk heb je boven die div met de bluesforum.gif ook gefloat.
Als je dan de div met bluesforum ook float, komt die ernaast te staan, als er genoeg ruimte is. Dat voorkom je door aan de css voor de div met bluesforum toe te voegen:
clear: both;
Als dat het niet oplost, dan is er meer code nodig.

 

[jeel2008]

css

ok, bedankt, ik ga er later op de dag naar kijken

ps hoe zet je eigenlijk meerdere opdrachten in 1 styleregel?
je noemde bv ooit:

<div style="float: left;">


maar stel dat ik nog had willen meegeven style="width: 300px"

 

[Goeroeboeroe]

Net als in 'n aparte stylesheet, maar dan op 1 regel:

<div style="float: left; width: 300px;">

Dus met 'n ; ertussen. De laatste ; hoeft niet, maar kan beter wel zodat 't 'n soort pavlov-reflex wordt om áltijd die ; te gebruiken. Dat voorkomt veel fouten.
Maar 't is veel beter om de div 'n id of class te geven en 't dan in 'n externe stylesheet te zetten.

 

[jeel2008]

css foto

waarom zit er eigenlijk altijd zo'n kadertje om een foto?
zie www.iansiegal.nl , de foto rechtsonder bijvoorbeeld. of zie bijgevoegd image.
de class op deze foto heeft een padding aan alle kanten, maar waarom moet dat worden in beeld gebracht? ik heb nergens opdracht tot een witte rand gegeven.

 

[Goeroeboeroe]

Als 'n afbeelding in 'n link staat, krijgt hij automatisch 'n border. 'n Blauwe border. Nou is blauw m'n lievelingskleur, maar hoe verzin je het in hemelsnaam om zo'n foeilelijke knalblauwe rand standaard om 'n afbeelding te zetten. Dit moet zijn bedacht door iemand die diep, diep ongelukkig was en dat af wilde reageren op de rest van de mensheid.
Kortom: dat randje hoort er volgens de standaard. Gelukkig kun je 't heel simpel verwijderen:

a img {border: 0;}

Randje weghalen bij alle afbeeldingen binnen 'n link.

 

[jeel2008]

randje

aha
life can be so simple
bedankt

 

[jeel2008]

randje 2

hallo goeroeboeroe,
ik had zojuist een heel verhaal over randjes en marges, dat ik uiteindelijk weer gedeleted heb.
ik zat nl enorm te knoeien (zie gb3) met oa het bijschrift dat te ver naar beneden stond.
maar gelukkig toont dreamweaver in de css direct waar je kunt ingrijpen. (zie gb4)
in ieder geval bedankt voor de tips.
groeten jeel2008