hoe kan ik bijschrift netjes onder een foto plaatsen

Status
Niet open voor verdere reacties.
Zie je wel, Marietje had gelijk!
Je geeft in #rightsize in font-size op, met 'n id.
In .ill-links, .ill-rechts doe je dat nog 'ns. Maar dit is 'n class, en 'n id zal in de regel 'winnen'. In Firebug, de uiterst handige extensie bij Firefox, kun je dat heel snel zien: de font-size bij .ill-links, .ill-rechts is doorgestreept. 'n Indicatie dat die font-size ergens door wordt dwarsgezeten.

#rightside .ill-links, #rightside .ill-rechts {
font-size: 0.5em;
}
werkt wel. Nu staan hier 'n id én 'n class, oftewel: meer gewicht dan alleen de id bij #rightsize. (Officieel heet dat trouwens selectiviteit, maar dat woord is door 'n mensenhater bedacht, volgens mij.)

Edit: csshunter had trouwens gelijk dat je normaal genomen ook de html moet zien. Dit was puur 'n wilde gok, die toevallig goed uitpakte.
Edit edit: ik ben 'n oen. Ik héb de html gezien. Zojuist online. Niks wilde gok. Komt nooit meer goed met me, ik begin nu al mezelf tegen te spreken :D
 
Laatst bewerkt:
wauw bedankt, het werkt. Ik ben tevens weer een stuk wijzer geworden.
Hoe kan ik aan IE 6 komen om de pagina's regelmatig in te testen? Als dat zo'n buitenbeentje is.
 
ik dacht... ik heb nog oude laptop, zet ik daar IE 6 in.
Maar goed, ik ga aan volgende uitdaging beginnen. Plaatje centreren op pagina. :)
 
Bij mij wel. Vreemd. Type 'm anders even in in je adresbalk. Je kunt daar oude browsers, waaronder IE 6, vinden.
Of zoek in Google even naar 'evolt'. De bovenste moet je hebben, onder 'browsers'.
 
ik heb iets fout! alweer....

Tracht afbeelding te centreren op pagina.
Had deze codes toegevoegd.
kan ik dit niet oplossen door overal "center" toe te voegen ipv links of rechts?

Code: 
#rightside .ill-links, #rightside .ill-rechts, #rightside .ill-center {
	margin-top: 4px;	
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
                padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 15px;
                margin-right: 25px;
                padding: 0px;
	}
.ill-center {
	float: center;
	margin-left: 15px;
                margin-right: 15px;
                padding: 0px;
	}
.ill-links img, .ill-rechts img, .ill-center img {
	margin-bottom: 3px;


HTML: 
<p style="width: 150px;" class="ill-center">
	<img src="images/paard.gif" width="150" alt="paard" /><br />
	Ik ben bijschrift-tekst en ik kom precies onder de afbeelding te staan.
</p>
 
Code: 
.ill-center {
	float: center;
	margin-left: 15px;
        margin-right: 15px;
        padding: 0px;
	}
Leuk bedacht, maar float: center bestaat niet.
.ill-center is een <p>, dus 'n blok-element. 'n Blok-element centreer je horizontaal door er 'n breedte aan te geven en margin: 0 auto;
Code: 
.ill-center {
     width: 150px;
     margin: 0 auto;
     }
Meestal werkt dit, maar dat ligt ook aan de opbouw van je pagina.

'n <img> is 'n inline-element, net zoals tekst. Weliswaar 'n wat specifiek inline-element, want het kan hoogte en breedte en zo krijgen, maar het blijft 'n inline-element. 'n Inline-element centreer je horizontaal door aan het blok-element waar het in staat (hier dus p.ill-center) text-align: center; mee te geven:
Code: 
.ill-center {text-align: center;}
Als dat niet werkt, dan is html en css nodig of beter: online.
 
width: 150px; staat al in de html pagina, dit omdat plaatjes niet allemaal dezelfde breedte hebben kan ik dit in de pagina aanpassen.

Heb al je voorbeelden geprobeerd, helaas het werkt niet.

Misschien in tabel zetten en tabel centreren? of geen goed idee?
 
'n Tabel voor lay-out is 'n heel slecht idee. Dat is niet goed toegankelijk voor spraakbrowsers, zoekmachines, enz., en heel slecht te onderhouden.
Maar ik kan er verder niets over zeggen. Het verhaal is steeds hetzelfde: je html en css zijn gewoon nodig. Liefst online. Zonder code kan ik (of 'n ander) onmogelijk zeggen waarom het niet werkt. Of je moet heel veel geluk hebben.
 
de css die had ik hier al gepost die met die zelfbedachte code float; center
;)
 
Laatst bewerkt:
Nog maar even de laatste versie hier gezet, had alles met "center" er al weer uitgehaald.
Deze versie staat ook online.

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;
	}
#rightside .ill-links, #rightside .ill-rechts {
	margin-top: 4px;	
	border: 1px dotted green;
	text-align: center;
	font-style: italic;
	font-size: 0.85em;
	}
.ill-links {
	float: left;
	margin-right: 15px;
        padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 15px;
        margin-right: 25px;
        padding: 0px;
	}
.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;
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan