hoe kan ik bijschrift netjes onder een foto plaatsen

Status
Niet open voor verdere reacties.
M

merlijn16

Gebruiker
Lid geworden
2 mrt 2010
Berichten
132
Ik heb in de css deze code staan
Code: 
img.floatlinks{
        float: left;
        margin-top:4px;
        margin-right:15px;
}
img.floatrechts{
        float: right;
        margin-top:4px;
        margin-left:15px;
}

en in de xhtml pagina deze:
HTML: 
<p><img src="images/foto1.jpg" height="150" alt="" class="floatrechts" /></p>
Nu zou ik er graag een bijschrift onder willen zetten. Weet iemand hoe ik dit moet doen?
 
Dat is heel makkelijk. 'n <img> is 'n inline-element, net zoals tekst. Dus als je na de <img> gewoon 'n <br /> zet, komt de tekst daarachter gewoon onder de afbeelding:
HTML: 
<p><img src="images/foto1.jpg" height="150" alt="" class="floatrechts" /><br />Ik ben tekst en ik kom onder de afbeelding te staan</p>
Als de tekst breder is dan de afbeelding, blijft hij op 1 regel staan, dus wordt te breed. Dat kun je voorkomen door aan de <p> een breedte te geven.
In de css voor de <p> kun je ook dingen als text-align: center, enz. zetten.
 
Kleine correctie: het is een float die aan het img gehangen is, dan komt de <br>tekst er op deze manier gewoon naast, alleen 1 regel lager dan zonder br. ;)
De float-class moet dus naar de <p> verhuisd worden, dan gaat het goed.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
bedankt voor jullie reactie.
Van de voorbeeldjes is nr 3 wat ik bedoel. Echter als ik in de broncode kijk, weet ik niet hoe ik dit in de css moet gaan aanpassen.
Ik heb namelijk afbeeldingen die allemaal verschillend van grootte zijn. En soms links soms rechts naast tekst geplaatst moeten worden. En soms een aantal afbeeldingen naast elkaar.
Vrijwel altijd met bijschrift eronder.

Hoe kan ik dit het beste aanpakken?
 
heb wat pogingen gedaan, maar wil niet echt lukken. Ik krijg nu de tekst naast de afbeelding ook binnen de border. De dotted border gaat over de gehele paginabreedte.

Had dit van de codes gemaakt.
in de pagina:
HTML: 
<p class="imagerechts"><img src="images/plaatje.jpg" height="150" alt="" class="floatrechts" />

en dit in de css
Code: 
.floatrechts {
	float: right;
	margin-top:4px;
	margin-left:15px;
	}
hr {
	clear: right;
	}
.imagerechts {
	float: right;
	width: 150px;
	margin-top:4px;
	margin-left:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
}
.floatlinks {
	float: left;
	margin-top:4px;
	margin-left:15px;
	}
hr {
	clear: left;
	}
.imagelinks {
	float: left;
	width: 150px;
	margin-top:4px;
	margin-left:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
}
 
ik weet inmiddels wel waar het fout zit. Ik had een dubbele class gebruikt.
Als ik er dit van maak komt onderschrift netjes onder afbeelding binnen de border, echter border is gehele pagina breed. De overige paginatekst komt er daardoor onder te staan.
HTML: 
<p class="imagerechts"><img src="images/plaatje.jpg" height="150" alt="" /><br />
	Ik ben bijschrift-tekst en ik kom precies onder de afbeelding te staan.</p>
Ik denk dat dit door <p> veroorzaakt wordt.

Als ik dit er van maak komt pagina tekst wel netjes naast de afbeelding. Echter krijg ik geen bijschrift van het plaatje er netjes onder.
HTML: 
<img src="images/plaatje.jpg" height="160" alt="" class="imagelinks" /><br />

Dit heb ik in de css
Code: 
}
.floatrechts {
	float: right;
	margin-top:4px;
	margin-left:15px;
	}
hr {
	clear: right;
	}
.imagerechts {
	float: right;
	width: 150px;
	margin-top:4px;
	margin-left:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
}
.floatlinks {
	float: left;
	margin-top:4px;
	margin-left:15px;
	}
hr {
	clear: left;
	}
.imagelinks {
	float: left;
	width: 150px;
	margin-top:4px;
	margin-left:15px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
}
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	margin-left: 25px;
	margin-bottom: 20px;
	width: 633px;
}
iemand enig idee waar de fout zit?
 
Hoi Merlijn,
Ik stap even over de laatste heen, en ga even terug naar:
... afbeeldingen die allemaal verschillend van grootte zijn. En soms links soms rechts naast tekst geplaatst moeten worden. En soms een aantal afbeeldingen naast elkaar.
Vrijwel altijd met bijschrift eronder.
Hoe kan ik dit het beste aanpakken?
Klik om te vergroten...
Dat is best wel een lastige, als ze allemaal een verschillende breedte hebben.
Je zou bijna aan een tabel gaan denken... :confused:
Maar CSS is niet voor één gat gevangen. Hierin kunnen we het gedrag van een tabel simuleren, zonder dat het een tabel hoeft te zijn. :)
Dat gaat via de instructie {display: table;} of {display: tabel-cell;}. In ons geval kunnen we de eerste gebruiken.
Dat gaat prima-de-luxe in de browsers: Firefox, Opera, Safari , Chrome en Internet Explorer 8.
Zoals je ziet:
  • Er hoeft zelfs geen breedte van de afbeeldingen opgegeven te worden.
  • De onderschiften regelen zichzelf er mooi smal onder.
  • De plaatjes kunnen zonder moeite links of rechts gezet worden.
  • Ze mogen verschillend van formaat zijn.
  • Ze kunnen ook in een rijtje naast elkaar staan.
  • En ook links en rechts tegelijk, al of niet in een rijtje.
  • In de html hoef je daarvoor niet moeilijk te doen: alleen het geven van een class-naam voor links of rechts is genoeg.:cool:
Maar nu! Internet Explorer 7... die wil niet.
Om die aan de praat te krijgen, kan ik zo gauw niets anders verzinnen dan:
  • De breedte van elke afbeelding opgeven in de <img> tag.
  • En diezelfde breedte opnemen in een style-eigenschap voor de <p> waar het img in zit.
  • Dat werkt prettiger dan al die <p>'s een eigen ID geven, en dan in het stylesheet al die ID's een eigen breedte geven. Kan natuurlijk ook, en is kwalitatief een stuk beter, maar ja, je hebt dan minder overzicht (ook als je een plaatje gaat vervangen enzo).
En dan ... Internet Explorer 6... Daar durf ik toch bijna niet naar te gaan kijken. :o
Maar moed gevat, diep adem gehaald, en: een zoete beloning! Hij doet het zowaar met dezelfde ingrepen als voor IE7. :D
Hiermee hebben we nu een universele oplossing:
Werkt dat bij jou ook?

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Succes! Ik heb nog een vereenvoudiging.
Nu de <p> en het <img> in voorbeeld 3 steeds alletwee een concrete breedte hebben gekregen, kan de {display:table;} die nodig was voor voorbeeld 2, er weer uit:
Scheelt weer een regeltje css. :)

CSShunter

[edit]En nog even een paar verdwaalde vishaakjes uit een commentaar gehaald: nu valideert ie.[/edit]

[edit]En het er per ongeluk ingeslopen Transitional Doctype naar Strict Doctype veranderd, want dat is beter voor mens & machine.[/edit]
 
Laatst bewerkt:
Ahem. Ik weet niet wat ik gisteren heb gedaan, in ieder geval niet wat ik hier heb neergezet. Bij mij werkte 't namelijk wel. Maar ik heb de code dus kennelijk volkomen verkeerd overgenomen toen ik 'm hier neerzette. Sorry.
Aangezien 't nu kennelijk is opgelost, trek ik mij maar bescheiden terug.
 
Aan een boom zo volgeladen met tintelende tips en uitstekende uitleggen mist men 1, 2 afgevallen pruimpjes niet, Goeroeboeroe! :)
 
<offtopic>Jawel, jawel, en dank je en zo, maar ik had m'n jaarlijkse fout al gemaakt. :shocked: </offtopic)
 
bedankt voor jullie hulp. Ik krijg de plaatjes nu netjes op zijn plek met de omschrijving eronder.
Ik heb nog een vraag over dit stukje uit de broncode.
Code: 
font-size: .85em;
wat houdt die .85 in? Ik dacht lettergrootte, maar dat werkt niet als ik ander getal er van maak.
Ik zou de lettergrootte onder plaatje heel iets kleiner willen als paginatekst.
 
Dat is de lettergrootte. Als ik 'm verander in de broncode van csshunter, werkt 't gewoon.
Maar jij schrijft .85
Dat staat voor 0.85
Je moet 't veranderen in 0.7 of zo om echt verschil te zien, niet in .84
Misschien deed je dat al, maar voor de zekerheid.
't Enige andere dat ik zo snel kan bedenken is dat 'n andere selector meer selectiviteit (gewicht) heeft.
Code: 
div#pietje p#marietje span#dinges {font-size: 1em:}
'wint' van
Code: 
span#dinges {font-size: 0.85em;}
Daar bestaan rekenregels voor, maar die worden niet altijd goed toegepast door (o verrassing) IE 6, en het is veel simpeler om het gewoon even uit te proberen. Hoe langer je die onderste regel dus maakt, hoe meer 'gewicht' hij gaat krijgen.
 
Laatst bewerkt:
er gebeurt niets als ik er font-size: 0.7em; van maak.

In de gewone pagina tekst gebruik ik px om grootte van tekst aan te geven.
Code: 
font-size: 14px;
Als ik dat in de css zet bij de code van de illustratie gebeurt er ook niks als ik er bijv. 8px van maak.

hmm in de broncode van csshunter, werkt 't gewoon. Zo slim was ik nog niet om dat uit te proberen.
Dat .85 wordt in mijn site veel groter weergegeven dan in de pagina van csshunter. Daar is het wel een mooie lettergrootte.
Ik heb ergens dus iets fout in de css.

Hier mijn css code misschien zie je iets wat niet klopt

Code: 
* {margin:0px;padding:0px;top:0px;left:0px;}

body{
	text-align: center;
	background-color: #003300;
        scrollbar-arrow-color: #003300;
        scrollbar-face-color: #ffffff;
        scrollbar-highlight-color: #000000;
        scrollbar-3dlight-color: #ffffff;
        scrollbar-shadow-color: #003300;
        scrollbar-darkshadow-color: #333333;
        scrollbar-track-color: #ffffff;                                           
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 923px;
        text-align: left;
	background-color: #ffffff;
}
#header{
	background-image: url(images/header.jpg);
	height: 144px;
	width: 923px;
	left: 0px;
	top: 0px;
}
#header a{
	font-size: 18px;
	font-style: normal;
	line-height: normal;
	font-weight: bolder;
	color: #ffffff;
	text-decoration: none;
	margin-left: 12px;
	font-family: "Courier New", Courier, mono;
	margin-top: 35px;
}
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 923px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;
	background-image: url(images/button.gif);
	height: 20px;
	width: 91px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #fff;
	text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}
#leftside{
	float: left;
}
#leftside a{
        color: #003300;
        text-decoration: none;}
#leftside a:hover{ color: #666666;}
#leftside h3{
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00306f;
	border-right-color: #00306f;
	border-bottom-color: #00306f;
	border-left-color: #00306f;
	width:200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	display: block;
	margin-left: 35px;	
	margin-top: 35px;	
}
#content{	
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;                       
        margin-top: 170px;
	position: absolute;
	width: 923px;
        height: 560px;
	background-color: #f5f5f5;
}
#footer{
	clear: both;
	background-color: #003300;
	position: relative;
	height: 46px;
	background-image: url(images/footer.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
#rightside{
	float: right;
	width: 705px;
	height: 560px;
        background-color: #ffffff;
	margin-right: 0px;
	margin-top: 0px;
	overflow: auto;           
}
p.antwoord {
           display: none;
           width: 250px;
           border: 1px solid; 
           border-color: #003300;
           background-color: #f5f5f5;
           padding: 5px;
           font-size: 12px;
}
div.ex{
        width:165px;
        padding:10px;
        border:1px solid;
        border-color: #003300;
        margin-top:15px;
        margin-left:10px;
}        
#picture1{
	margin-left: 0px;
        margin-bottom: 10px;
	height: 4px;
	width: 180px;
	background-image: url(images/lijn.gif);        
}
img.floatlinks{
        float: left;
        margin-top:4px;
        margin-right:15px;
}
img.floatrechts{
        float: right;
        margin-top:4px;
        margin-left:15px;
}
hr {
	clear: both;
	}
.ill-links, .ill-rechts {
	display: table;
	margin-top: 4px;
	padding: 10px;
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
	}
.ill-rechts {
	float: right;
	margin-left: 15px;
	}
.ill-links img, .ill-rechts img {
	margin-bottom: 5px;
	}
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	margin-left: 25px;
	margin-bottom: 20px;
	width: 633px;
}      
#rightside h1{
	margin: 10px 0px 10px 0px;
	width: 580px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
        margin-left: 100px;
}
#rightside span{
	margin-top: 10px;
	margin-bottom: 4px;
	width: 625px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
#rightside a{
        color: #003300;
        text-decoration: underline;}
#rightside a:hover{ color: #666666;}
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	float: right;
	padding-top: 23px;
	margin-right: 10px;
}
#footer a{
        color: #ffffff;
        text-decoration: none;}
#footer a:hover{color: #ffffff;}
#imagepreloader{
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	width: 0px;
}
 
Als jantje zonder marietje ook goed is, dan is volgens de C van Cascade van CSS:
Code: 
[FONT="Courier New"][SIZE="2"].jantje { 
   color: blue;
   }
#indezeezakkendezon .jantje {
   color: rood;
   }
#achtbaan .jantje {
   color: geelgroengrauw;
   }
#regen .jantje [COLOR="Navy"]{[/COLOR]
   color: grijs;
   }[/SIZE][/FONT]
... wat betekent:
  • Normaal gesproken heeft een element met class="jantje" blauwe letters.
  • Maar: als jantje's element in een element met id="indezeezakkendezon" zit, wordt de teksten van jantje rood, als jantje in een element "achtbaan" zit, worden ze geelgroengrauw, en als ie in een element "regen" zit, worden ze grijs.

===

Uit jouw css kan ik niet zo gauw halen waar 't vuiltje zit, want dit is slecht te zien zonder de bijbehorende html-code (en die bepaalt hoe de elementen met classes en ID's gerangschikt zijn > en daarmee de behandelingsvolgorde/prioriteiten van de css-eigenschappen).
Heb je de pagina ook online staan? Dan graag even een linkje naar deze testpagina.
Of anders hier ook even de html posten. - Maar online werkt sneller voor ons. ;)

Met vriendelijke groet,
CSShunter
 
Helaas heeft csshunter marietje om zeep geholpen, terwijl 't toch 'n hartstikke leuke meid is :D Hier komt de wederopstanding van marietje.
Code: 
div#pietje p#marietje span#dinges {font-size: 1em:}
'wint' van
Code: 
span#dinges {font-size: 0.85em;}
In css heeft alles 'n bepaalde waarde, die je kunt berekenen. 'n id (#pietje, #marietje, #dinges) is meer waard dan 'n class (.ik-ben-een-class).
Twee id's hebben meer gewicht dan 1 id.
div div is meer waard dan alleen div, omdat de eerste twee elementen kent.
Enz.
Als jij dus #content {font-size: 14px;} hebt staan (met 'n id) kan dat meer gewicht hebben dan allen .ill-links (met alleen 'n class).
Ook al geef je dan bij .ill-links 'n andere lettergrootte op, toch zal #content 'winnen'.
Je kunt dat precies berekenen, maar dat is - vind ik - nogal 'n gedoe, en 't werkt niet foutloos in IE 6. Dus ik vind gewoon even uitproberen meestal simpeler.
't Kan dus zijn dat #content 'wint' van .il-links. Maar als je dan niet .ill-links, maar
Code: 
#content .ill-links {font-size: 0.85em;}
gebruikt, werkt de font-size waarschijnlijk wel (als .ill-links binnen #content ligt). Want nu heeft deze selector niet alleen de id 'content', maar ook de class 'ill-links', en dat is zwaarder dan alleen #content.

(Met dank aan Marietje voor haar gastoptreden.)
 
Laatst bewerkt:
bedankt voor jullie hulp
heb even wat in elkaar gezet om online te zetten
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan