DIV-width...

Door Fromzon ngl op 07-07-2009 02:28

1.234 views

Eerst even 3 lijntjes voor mijn frustratie, daarna 6 lijntjes voor mijn vraag:

Ik werk nu al 5 jaar met HTML, ik heb al 10 pogingen ondernomen om de DIV's onder de knie te krijgen, maar wat ik ook doe en hoeveel ik ook probeer: ik zal de logica van DIV's nooooooit begrijpen. En ik heb zonet nog een gat in m'n 22 inch scherm geslagen met de vliegemepper en dan is die vlieg waar ik op mikte nog gaan vliegen ook.

Nu mijn vraag:
Ik heb een DIV en ik zeg:
<div style="width: 100px; border: 1px yellow solid;">tekstje</div>

Een normale HTML-standaarden-programmeur zou er dan voor zorgen dat die DIV dan ook een breedte heeft van 100 pixels maar uiteraard neemt die DIV een breedte aan van de DIV waar hij in zit, want dat vond die HTML-standaarden-programmeur indertijd veel logischer.

Dus nu mijn vraag: Zou iemand mij alstublieft kunnen uitleggen hoe ik een DIV krijg die inderdaad maar 100 pixels breed is ? ( omdat google niet lukte vraag ik het aan de lieve mensen van PHPHulp )
Hartelijk bedankt alvast :-)

Tamara

07-07-2009 09:29

wat bedoel je precies??

volgens mij heb je trouwens al zelf antwoord gegeven op je vraag

mitchel

07-07-2009 09:30

Zet gewoon de css lekker appart is veel overzichtelijker.


<html>
<head>
<title>Index</title>
<style type="text/css">
	#divje {
		width: 100px;
		border: 1px solid #000;
	}
</style>
</head>
<body>
	<div id='divje'>
		<p>Test divje</p>
	</div>
</body>
</html>

En ter verduidelijking jouw code werkt ook gewoon ;)

nick

07-07-2009 10:09

De code die je hebt neergezet zorgt er al voor dat hij 100px breed is.

Mitchell

07-07-2009 11:57

De border zorgt ervoor dat hij dus 102px breed is, volgens mij doet alleen IE het "fout" en plaatst hem binnen in de box, klassiek voorbeeld van het box model.

Wat je moet doen, is de box 98px breed maken en de border laten staan, vervolgens een conditional comment maken, met daarin je ie css en daar maak je hem weer 100px.

Iedereen blij. :)

Fromzon ngl

09-07-2009 02:11

alvast bedankt voor jullie tips,
maar de oplossing die het bij mij deed werken was uitendelijk het volgende:

width: 100px;
vervangen door
max-width: 100px;

en toen werkte het wel :-)

Misschien slechte vraagstelling dan van mijn kant, maar toch bedankt :)

Mitchell

09-07-2009 02:37

Max-width werkt niet in IE, vooral niet in de oudere IE versies. Als je mijn post gewoon leest heb je al je antwoord en dit werkt gewoon voor alle browsers.

Max-width zorgt er ook alleen voor dat de div niet groter kan worden dan dit en dat hij niet 100px width HOEFT te zijn. Hij kan dus als er maar 1 woordje instaat kleiner zijn.

Reageren

Inloggen om te reageren