Tekst positie in een DIV

[Skoebie]

Beste mensen,

Sinds een weekje ben ik bezig met het maken van een layout met behulp van DIV tags.

Wat ik graag wil weten is hoe je tekst binnen een div positie kan geven. Nu gebruik ik alleen de text-align tag maar de tekst moet een x aantal pixels van de rand afkomen.

Groetjes,

Max

 

[That Guy]

//style
div.container{
margin-left: 10px;
}

of, in html:

<div style="margin-left: 10px;">deze text staat 10 px rechts van de rand</div>

 

[Johantrax]

vegras, dat kan wel werken, maar doet niet exact wat skoebie vraagt.

margin verplaatst de division zelf, niet de tekst erin (wel aangezien die vasthangt aan de div wel, maar relatief gesproken dus niet)
om enkel de inhoud van je division te verplaatsen dien je padding te gebruiken

 

[Goeroeboeroe]

Daar zijn behoorlijk wat manieren voor. Het simpelste is om padding te gebruiken. Maar dat maakt je div breder.
Als je div bijvoorbeeld 300 px breed is, en je gebruikt padding-left: 20px; dan wordt je div 20 px breder. De padding zorgt voor afstand tussen de buitenkant van de div en de inhoud van de div, zoals tekst.
Om in verschillende browsers het zelfde resultaat te krijgen is het absoluut nodig om een doctype te gebruiken. Zonder doctype geeft Internet Explorer het foutief weer.
Mocht je niet weten wat 'n doctype is dan horen we 't wel.
Deze padding zorgt dus voor 'n afstand langs de hele linkerkant tussen div en inhoud van de div. Als je meer exotische dingen wilt horen we 't ook wel.

 

[Skoebie]

Oke bedankt:thumb:

Dan maak ik mijn content DIV gewoon 15 pixels minder breed, en dan een padding erin van 15 pixels zodat die even breed lijkt ?
Zijn er nog andere tags die op padding lijken maar waardoor de DIV z'n orginele grootte behoud?

En ik weet inderdaad niet wat een doctype is

 

[Goeroeboeroe]

Oke bedankt:thumb:

Dan maak ik mijn content DIV gewoon 15 pixels minder breed, en dan een padding erin van 15 pixels zodat die even breed lijkt ?

Ja, precies. Dat is even wennen omdat 't wat raar is dat 't bij de breedte wordt opgeteld, maar dat heeft W3C nou eenmaal als standaard bedacht. Als je de div (of de paragraaf of welk blok-element dan ook) even 'n gekleurde achtergrond geeft, wordt gelijk ook zichtbaar hoe dat werkt.

'n Doctype zet je helemaal bovenaan je document, helemaal aan 't begin, er mag zelfs geen spatie voor komen te staan, omdat Internet Explorer 6 anders op hol slaat.
Het doctype vertelt de browser met wat voor soort code je werkt. Als je geen (volledig) doctype opgeeft, dan berekenen Internet Explorer 6 en 7 (en 8?) de breedte van alle blok-elementen zoals 'n div anders dan alle andere browsers, en is je lay-out dus helemaal naar de filistijnen.
Als je 'n doctype gebruikt houdt elke iets nieuwere browser, inclusief IE 6, zich aan de standaard van W3C en is de weergave dus (vrijwel) gelijk. Vrijwel omdat er altijd kleine afwijkingen zijn en grote bugs.

Geldige doctypes kun je hier vinden: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Je moet er eentje kiezen uit de serie HTML 4.01 of XHTML 1.0
De rest is of te oud, of te nieuw (nog niet of nauwelijks ondersteund) of voor exotische avonturen zoals wetenschappelijke formules.
Je moet het doctype én de url daaronder gebruiken. Zonder url werkt het doctype niet of maar half.

HTML of XHTML maakt eigenlijk geen verschil meer. Tot 'n tijdje geleden leek 't erop alsof in de toekomst alleen XHTML nog zou worden ondersteund, maar dat is niet meer zo. Er is 'n klein verschil in de schrijfwijze van sommige tags. Als ik nu m'n site opnieuw zou beginnen zou ik niet meer voor XHTML, maar voor HTML kiezen.
Frameset: niet gebruiken, dat is 'n volstrekt verouderde methode. In het komende HTML5 worden frames helemaal niet meer ondersteund. Zoekmachines hebben moeite met indexeren en het is heel slecht toegankelijk voor speciale programma's zoals spraakbrowsers.
Transitional: bedoeld om bestaande sites om te bouwen, Je mag dan nog 'n aantal tags zoals <font> die bedoeld zijn voor opmaak in je html gebruiken.
Strict: de opmaak moet volledig in css, in je html heb je alleen nog maar structuur-tags zoals div, header, <p>, en dergelijke. Als je nieuw begint zou ik echt aanraden om Strict te kiezen. Is even wennen, maar het is veel duidelijker en ongelooflijk veel makkelijker te onderhouden, omdat alle opmaak-codes in een centraal bestand staan.

Het doctype is ook belangrijk voor de validator. Die kun je vinden op
http://validator.w3.org/
Voor css is er hier een: http://jigsaw.w3.org/css-validator/

Die validators kunnen enorm helpen om structuurfouten te vinden, zoals het 100 keer openen van 'n <p> en 99 keer sluiten. Iets waar mensen minder goed in zijn. Of op z'n minst heb je als mens vakantie nodig na het vinden van zo'n fout.

Succes!