Archief - HTML/CSS: div positioning en streepje onderaan

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.
a

aXl_

Legacy Member
De eerste keer dat ik m'n layout probeer op te bouwen met divs en sommige dingen willen niet zo lukken.

Ik zit met het probleem dat ik in een div (dat moet fungeren als een soort van vak met border1px) een image zet met daarnaast tekst. Hij blijft onder die image een wit lijntje houden, ook al is mijn image hoger dan mijn text. Ik heb al vanalles geprobeerd:

vertical-align: top;
padding-top: 0px;

maar dat werkt niet. Hoe krijg ik dat lijntje onderaan weg?

2de vraag: ik wil 2 divs naast elkaar (dat haakje zou voor dat 'forward' teken moeten staan) en in tutorials lees ik dat dat moet met float: left; maar dat marcheert ni echt.

Code: 
<div>
	<img src='images/title_item.gif' alt='' />
	<div class='item'>
		<img src='images/item_bullet.gif' alt='' />
		link
	</div>
</div>

css:


.item{
	border: 1px solid;
	border-color: #96ce15;
	
	vertical-align: top;
	
	float: left;
}

een illustratie van mijn probleem zien jullie hier
L

Lashknife

Legacy Member
dit komt, omdat je de balans tussen indentatie en erin overdrijven nog niet gevonden hebt.

Indenteer enkel blocklevel elements, div, p, table, ul, .... geen inline dingen (aka, inhoud van blocklevel documents)

maw:
weg met de newlines en de tabs rond de imgtag en maak er 1 vloeiend geheel van:
<div><img />link</div>

wil je witruimte tussen de prent en het woord link? geeft de img dan een margin-right: 3px ofzo mee, geen spaties!! (bovendien weet ik ook niet - heb het niet getest - in hoeverre vertical-align:top iets te maken heet met die whitespace)

Kan je ook een illustratie geven van wat het wél moet zijn? want ik snap niet echt wat je wil aanvangen met die |_ groene haak boven de prent/link (maar ik vermoedt dat je ze alle 3 naast elkaar wil hebben: in dit geval is je div-nesting foutief)
a

aXl_

Legacy Member
niet tussen de image en de tekst maar tussen de image en de onderste border.

http://users.skynet.be/bs939021/streepje.jpg is wat het nu is
http://users.skynet.be/bs939021/no_streep.jpg is wat het zou moeten zijn.

vertical-align: top, margin-top: 0px of padding-top: 0px werken geen van allen. Als ik m'n div als hoogte 19px geef (de hoogte van het image) dan wordt de tekst nog altijd op het onderste streepje geplaatst en indien ik dan een lage letter zoals een 'g' heb dan steekt die half onder de onderste border uit hetgeen ook niet echt een mooi zicht is.

edit: ik heb een oplossing gevonden :).

Had eigenlijk moeten weten dat als je img en tekst naast elkaar zet, die tekst wordt uitgelijnd op de zelfde regel als de basis van het <img> want das zelfs in tekstverwerkers zo :$.

Als class definieren img_item{ float: left;} does the trick :)
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