Archief - HTML/CSS: Span uitlijnen

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
5

50Euro

Legacy Member
Resultaat zie je hier => http://www.plaskes.be/kalender.php

Je ziet het probleem wel. Het woordje poster staat te laag en ik krijg het woordje wedstrijd niet in het midden. :(

Gebruik ik de goede methode en hoe krijg ik dit goed?

Dit is de code:
Code: 
<div class="kalenderpost">
	<div class="kalenderhoofd">
		<span class="kaldatum">datum</span>
		<span class="kalwedstrijd">wedstrijd</span>
		<span class="kalposter">poster</span>
	</div>
	<div class="kalverslag">
		BlaBlaBla
	</div>
	<div class="kaledit">
		bewerkt op: ??-??-????
	</div>
</div>

.kalenderpost{
	clear: both;
	width:698px;
	display: table;
	margin:auto;
	margin-bottom:2px;
	border: 1px solid #000000;
	background-image:url(images/forumpost.jpg);
	background-repeat:repeat-y;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.kalenderhoofd{
	clear:both;
	width:694px;
	height:15px;
	border: 1px solid #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#FFFFFF;
	color:#000000;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
div.kalenderhoofd span.kaldatum{
	width:100px;
	text-align:left;
	float:left;
	margin-left:3px;
}
div.kalenderhoofd span.kalwedstrijd{
	width:488px;
	text-align:center;
}
div.kalenderhoofd span.kalposter{
	width:100px;
	float:right;
	text-align:right;
	margin-right:3px;
}
.kalverslag{
	padding:2px;
}
.kaledit{
	padding:2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFF00;
	text-align: left;
}

2 spans gaan perfect. Maar vanaf ik meer dan 2 probeer lukt het niet. :(
o

orez

Legacy Member
neen --> last van divitis, gebruik de tags waarvoor ze bedoeld zijn !

een p kun je ook stylen hoor, evenals een li, of een blockquote, of een em ....
Als ge ietwat semantiek toepast zal alles al veel eenvoudiger verlopen ook.
5

50Euro

Legacy Member
Heb nu eens geprobeerd met p.. Zelfde resultaat.

http://www.plaskes.be/kalender.php

Code: 
<div class="kalenderpost">
	<div class="kalenderhoofd">
		<p class="kaldatum">datum</p>
		<p class="kalwedstrijd">wedstrijd</p>
		<p class="kalposter">poster</p>
	</div>
	<div class="kalverslag">
		BlaBlaBla
	</div>
	<div class="kaledit">
		bewerkt op: ??-??-????
	</div>
</div>

.kalenderpost{
	clear: both;
	width:698px;
	display: table;
	margin:auto;
	margin-bottom:2px;
	border: 1px solid #000000;
	background-image:url(images/forumpost.jpg);
	background-repeat:repeat-y;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
}
.kalenderhoofd{
	clear:both;
	width:694px;
	height:15px;
	border: 1px solid #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color:#FFFFFF;
	color:#000000;
	margin-top: 2px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
}
div.kalenderhoofd p{
	display:inline;
}
div.kalenderhoofd .kaldatum{
	width:100px;
	text-align:left;
	float:left;
	margin-left:3px;
}
div.kalenderhoofd .kalwedstrijd{
	width:450px;
	text-align:center;
}
div.kalenderhoofd .kalposter{
	width:100px;
	float:right;
	text-align:right;
	margin-right:3px;
}
.kalverslag{
	padding:2px;
}
.kaledit{
	padding:2px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFF00;
	text-align: left;
}

Waar kan ik info vinden over wat wanneer en hoe te gebruiken?
X

Xavez

Legacy Member
div = laag met whatever inhoud
span = bepaalde span tekst stylen
p = paragraaf

id's zijn uniek, klassen zijn meermaals bruikbaar. Best gebruik je voor je divs dan ook unieke id's in plaats van klassen, op die manier kan je o.a. altijd naar een juiste div verwijzen. Lees ook dit artikel op A List Apart eens.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan