[CSS] Header centreren

Pagina: 1
Acties:
  • 246 views sinds 30-01-2008
  • Reageer

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Beste mensen,

ik zit nu al ruim 3 uur topics te lezen hier om mijn probleem op te lossen, maar het wil maar niet lukken. Ik ken de policy hier en ik heb zelf op google en op got gezocht en zowat elke oplossing geprobeerd, maar tevergeefs. Ik ben bezig met een site waarbij ik een header helemaal bovenaan in het midden wil plaatsen. Moet toch niet al te moeilijk zijn neem ik aan.

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welkom bij de carnavalsverveniging Tröss 'n Löss!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>

<body>

<div id="wrap"> 
    <div id="header"></div>
</div>

</body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body, html {
    background-image:url("images/background.jpg");
    background-repeat:repeat-y;
    background-position:center;
    margin:0px;
    height:100%;
    }

#wrap {
    position:relative;
    width:800px;
    height:100%;
    margin:0 auto;
    }

#header {
    background-image:url("images/header.jpg");
    background-position:top;
    width:800px;
    height:150px;
    }


In IE komt het gewoon linksbovenaan te staan en in FF zit het wel in het midden, maar dan ontstaan er kleine gaten tussen de achtergrond en de header.

IE (klikbaar):

Afbeeldingslocatie: http://members.home.nl/oguz286/got/ieklein.jpg

FF (klikbaar):

Afbeeldingslocatie: http://members.home.nl/oguz286/got/ffklein.jpg

Ik word hier eigenlijk een beetje gek van, dus ik zou het erg op prijs stellen als iemand me zou kunnen helpen.

EDIT: Voor de mensen die hetzelfde probleem hebben als ik, het probleem is opgelost: Je moet de link naar de DTD meegeven. In mijn geval is het dus:

HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/transitional.dtd">

ipv
HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

zoals dreamweaver standaard in een nieuw document zet. Let daar dus op! Het heeft me (en de mensen uit dit topic) een hele dag gekost om dit antwoord te vinden :)

[ Voor 13% gewijzigd door Oguz286 op 12-09-2006 21:25 ]


  • Patriot
  • Registratie: December 2004
  • Laatst online: 13-02 19:07

Patriot

Fulltime #whatpulsert

Het komt volgens mij omdat de body geen width heeft. De [font=courier]margin: 0 auto;[/font] aligned de boel in het midden, maar alleen als de width van het element waarin het ligt ook daadwerkelijk gezet is.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Je vergeet de text-align: center; op de body te zetten en dan raakt IE enigszins verward :P (text-align: left; op je #wrap dan wel, anders ziet het er niet uit)
Patriot schreef op dinsdag 12 september 2006 @ 19:12:
Het komt volgens mij omdat de body geen width heeft. De [font=courier]margin: 0 auto;[/font] aligned de boel in het midden, maar alleen als de width van het element waarin het ligt ook daadwerkelijk gezet is.
Nah, lijkt me niet. De minimale werkende constructie is:
HTML:
1
2
3
4
5
<body>
  <div id="container">
  ...content...
  </div>
</body>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
body {
  text-align: center;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: left;
}

[ Voor 65% gewijzigd door Rowanov op 12-09-2006 19:33 ]


  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Hmm ik heb net het volgende geprobeerd:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
body, html {
    background-image:url("images/background.jpg");
    background-repeat:repeat-y;
    background-position:center;
    margin:0px;
    height:100%;
    width:800px;
    }


en

Cascading Stylesheet:
1
2
3
4
5
6
7
8
body, html {
    background-image:url("images/background.jpg");
    background-repeat:repeat-y;
    background-position:center;
    margin:0px;
    height:100%;
    width:100%;
    }


Maar het resultaat is precies hetzelfde als eerst. Wel erg bedankt ;)
Rowanov schreef op dinsdag 12 september 2006 @ 19:30:
Je vergeet de text-align: center; op de body te zetten en dan raakt IE enigszins verward :P (text-align: left; op je #wrap dan wel, anders ziet het er niet uit)
Het..eh... werkt? Ik krijg nu in IE hetlzefde als in FF (wel in het midden maar met gaten tussen header en achtergrond), maar nu doet FF helemaal iets vaags :P

Afbeeldingslocatie: http://members.home.nl/oguz286/got/ffklein2.jpg

[ Voor 35% gewijzigd door Oguz286 op 12-09-2006 19:37 ]


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Gebruik je een html 4.01 strict doctype? Zo ja, geef eens een link naar die pagina waar we het nu over hebben. Wel alleen die text-align in de body zetten he? Ik heb namelijk geen idee wat het doet als je het redundant invoert met het html element :+ Het maakt geen drol uit :)

Je geeft nu je html en body dezelfde achtergrond, dat is nergens voor nodig lijkt me, dus wis die "html" eens uit je selector.

[ Voor 4% gewijzigd door Rowanov op 12-09-2006 19:44 ]


  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Nee ik gebruik Transitional (strict heeft me vaak slapeloze nachten bezorgd :P ) Het staat niet online, maar ik kan het zo online zetten. Oja ik zal ook even html weghalen.

EDIT: oh wat geniaal, ik heb html weggehaald en nu doen de browsers het omgekeerde van elkaar :P (zie startpost).

hier een link naar de 'site':

http://members.home.nl/oguz286/site/index.htm

Ehm, ja nu doet IE weer raar, pff waarom... WAAROM?! :P

[ Voor 45% gewijzigd door Oguz286 op 12-09-2006 19:49 ]


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Zelfs met transitional krijg ik mijn manier hier niet kapot in een kale pagina, dus het zal aan iets anders liggen.

  • storeman
  • Registratie: April 2004
  • Laatst online: 13:38
Okee, heel vaak hier behandeld, beetje aan je zoekskills werken:

Cascading Stylesheet:
1
2
3
4
5
6
#header
{
width:700px;
left:50%;
margin-left:-350px;
}


De margin-left is dus de helft van de breedte van je header

"Chaos kan niet uit de hand lopen"


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

storeman schreef op dinsdag 12 september 2006 @ 19:49:
Okee, heel vaak hier behandeld, beetje aan je zoekskills werken:

Cascading Stylesheet:
1
2
3
4
5
6
#header
{
width:700px;
left:50%;
margin-left:-350px;
}


De margin-left is dus de helft van de breedte van je header
Werkt prima, geen twijfel over mogelijk, tenzij de breedte van je element dynamisch is. Persoonlijk zou ik de oplossing nemen met margin: 0 auto; omdat die mij iets eleganter lijkt :)

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
storeman schreef op dinsdag 12 september 2006 @ 19:49:
Okee, heel vaak hier behandeld, beetje aan je zoekskills werken:

Cascading Stylesheet:
1
2
3
4
5
6
#header
{
width:700px;
left:50%;
margin-left:-350px;
}


De margin-left is dus de helft van de breedte van je header
Ja dat is dus een van de oplossingen die ik heb geprobeerd. In IE krijg ik alleen de rechterhelft, links aligned te zien en in FF zie ik alleen de rechterhelft helemaal links te zien. Wordt nu duidelijk waarom ik op het randje van sta? :P

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Doe eens niet je link element met een / afsluiten, dat hoort niet bij html 4.01 welke doctype je ook gebruikt. Daar zou het nog aan kunnen liggen; anders even 1 op 1 (met een strict doctype) mijn code overnemen en daarna stap voor stap je achtergronden en andere meuk toevoegen om te kijken waar het faalt :)

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Welkom bij de carnavalsverveniging Tröss 'n Löss!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>

<body>

<div id="wrap" /> 
<div id="header" />

</body>
</html>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
    background-image:url("images/background.jpg");
    background-repeat:repeat-y;
    background-position:center;
    margin:0px;
    height:100%;
    width:800px;
    text-align:center;
    }

#wrap {
    position:relative;
    width:800px;
    height:100%;
    margin:0 auto;
    text-align:left;
    }

#header {
    background-image:url("images/header.jpg");
    background-position:top;
    width:800px;
    height:150px;
    left:50%;
    margin-left:-400px;
    }


Zo? Ik krijg exact dezelfde resultaten zo. Ik zie de helft van de header |:(

(Even voor de duidelijkheid: Ik ben erg moe en kan zijn dat ik domme antwoorden geef :P)

[ Voor 6% gewijzigd door Oguz286 op 12-09-2006 20:06 ]


Verwijderd

storeman schreef op dinsdag 12 september 2006 @ 19:49:
Okee, heel vaak hier behandeld, beetje aan je zoekskills werken:

Cascading Stylesheet:
1
2
3
4
5
6
#header
{
width:700px;
left:50%;
margin-left:-350px;
}


De margin-left is dus de helft van de breedte van je header
Redelijk ranzig. Ten eerste om wat er hierboven al gezegd is, en ten tweede omdat er een deel van de content wegvalt (waar ook niet naar te scrollen is) wanneer de viewport smaller is dan in dit geval 700 px.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Oguz286 schreef op dinsdag 12 september 2006 @ 20:01:
Zo? Ik krijg exact dezelfde resultaten zo. Ik zie de helft van de header |:(

(Even voor de duidelijkheid: Ik ben erg moe en kan zijn dat ik domme antwoorden geef :P)
Doen dan eens braaf zijn en mijn vorige post stap voor stap uitvoeren, ik ga het niet voor je doen ;)

Edit: Width en height op de body zijn heel vaak zeer nutteloos.

[ Voor 8% gewijzigd door Rowanov op 12-09-2006 20:13 ]


  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Rowanov schreef op dinsdag 12 september 2006 @ 20:10:
[...]

Doen dan eens braaf zijn en mijn vorige post stap voor stap uitvoeren, ik ga het niet voor je doen ;)
Of ik snap totaal niet wat je bedoelt (welke stappen?) of ik snap je totaal niet? Oftewel ik snap je niet :P Bedoel je soms -> <div id="header" /> ipv <div id="header"> </div> Dat heb ik gedaan :P (ik waarschuwde al dat ik moe ben, misschien zeg je heel iets basics, maar mijn hersenen zeggen dat ik rust nodig heb :P)

[ Voor 12% gewijzigd door Oguz286 op 12-09-2006 20:15 ]


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Goed ik geef het op, ik kwak wel een voorbeeld in elkaar :)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welkom bij de carnavalsverveniging Tröss 'n Löss!</title>
<link rel="stylesheet" type="text/css" href="main.css"> 
</head>
<body>
    <div id="wrap">
        <div id="header">
        Test tekst.
        </div>
        Test tekst.
    </div>
</body>
</html>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    margin: 0;
    text-align: left;
    background: url('images/background.jpg') repeat-y center;
}
#wrap {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}
#header {
    width: 800px;
    height: 150px;
    background: url('images/header.jpg') top;
}

[ Voor 86% gewijzigd door Rowanov op 12-09-2006 20:23 ]


  • Erkens
  • Registratie: December 2001
  • Niet online

Erkens

Fotograaf

Rowanov schreef op dinsdag 12 september 2006 @ 20:10:
Edit: Width en height op de body zijn heel vaak zeer nutteloos.
weet je dat heel zeker ;)

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Smaken verschillen :+

Maar even serieus, je hebt natuurlijk wel gelijk. Ik kan een aantal situaties bedenken, zoals de 100% height layouts waar het heel handig kan zijn, ik zag alleen de relevantie in het voorbeeld van de TS niet echt.

Om nog even op het probleem van de TS terug te komen; het lag volgens mij aan het afsluiten van het link element op een manier die html 4.01 niet prettig vindt, dus voor het vervolg:
HTML:
1
2
3
4
5
<!-- zo mag het NIET in html 4.01 -->
<link rel="stylesheet" type="text/css" href="main.css"/>

<!-- zo hoort het wel -->
<link rel="stylesheet" type="text/css" href="main.css">

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Rowanov schreef op dinsdag 12 september 2006 @ 20:16:
Goed ik geef het op, ik kwak wel een voorbeeld in elkaar :)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welkom bij de carnavalsverveniging Tröss 'n Löss!</title>
<link rel="stylesheet" type="text/css" href="main.css"> 
</head>
<body>
    <div id="wrap">
        <div id="header">
        Test tekst.
        </div>
        Test tekst.
    </div>
</body>
</html>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
    margin: 0;
    text-align: left;
    background: url('images/background.jpg') repeat-y center;
}
#wrap {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}
#header {
    width: 800px;
    height: 150px;
    background: url('images/header.jpg') top;
}
Sorry als het je tijd heeft gekost, ik weet dat dit een forum is waarbij je zelf ook naar het antwoord toe moet werken (ik zit al enkele jaren ;)) Maar ik zie eigenlijk niet helemaa wat veranderd is aan de code :?
Rowanov schreef op dinsdag 12 september 2006 @ 20:27:
[...]

Om nog even op het probleem van de TS terug te komen; het lag volgens mij aan het afsluiten van het link element op een manier die html 4.01 niet prettig vindt, dus voor het vervolg:
HTML:
1
2
3
4
5
<!-- zo mag het NIET in html 4.01 -->
<link rel="stylesheet" type="text/css" href="main.css"/>

<!-- zo hoort het wel -->
<link rel="stylesheet" type="text/css" href="main.css">
Ik dacht juist dat in xhtml (daar wil ik naar toe werken) het juist zo moest :? Maargoed ik zal je suggestie even proberen :)

EDIT: Het werkt bijna! Ik krijg in beide browsers alles netjes in het midden, alleen nu zitten er nog steeds gaten tussen de header en de achtergrond. Ik ga even kijken wat nu anders is aan jou code :) Maar wel heel erg bedankt! (geldt voor iedereen die me heeft geholpen :))

EDIT2: Jah, als je background niet helemaal goed plaatst ontstaan er inderdaad gaten |:( Maar heb ik het goed als ik zie dat je Transitional hebt veranderd in Strict?

[ Voor 11% gewijzigd door Oguz286 op 12-09-2006 20:48 ]


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Het is niet verstandig om xhtml te gaan gebruiken als je het verschil met html 4.01 niet kan duiden. Xhtml kan in sommige gevallen een voordeel hebben over html 4.01, maar, met alle respect, denk ik niet dat jouw site van de voordelen gebruik gaat maken. Het is daarom ook beter om html 4.01, het liefst strict, te gebruiken. Strict dwingt IE in een modus waardoor de rendering veel meer lijkt op die in firefox.

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Rowanov schreef op dinsdag 12 september 2006 @ 20:48:
Het is niet verstandig om xhtml te gaan gebruiken als je het verschil met html 4.01 niet kan duiden. Xhtml kan in sommige gevallen een voordeel hebben over html 4.01, maar, met alle respect, denk ik niet dat jouw site van de voordelen gebruik gaat maken. Het is daarom ook beter om html 4.01, het liefst strict, te gebruiken. Strict dwingt IE in een modus waardoor de rendering veel meer lijkt op die in firefox.
Kijk dat zijn nou net de dingen die ik eigenlijk had moeten weten. Seperates the men from the boys :P Iig HEEL ERG BEDANKT _/-\o_

En het resultaat:

http://members.home.nl/oguz286/site/index.htm

[ Voor 46% gewijzigd door Oguz286 op 12-09-2006 21:25 ]


  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

Graag gedaan, het blijft lastig om in 1 post een direct 100% compleet en relevant antwoord te vinden formuleren, getuige dit topic :P

[ Voor 6% gewijzigd door Rowanov op 12-09-2006 21:16 ]


  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Oh en NU weet ik wat het probleem was. Het ligt niet aan Transitional of Strict (kan wel invloed hebben later) maar deze regel:

HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

en
HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/transitional.dtd">


Ik ben sinds 11 uur 's ochtends bezig met dit probleem :/ Alleen omdat dreamweaver standaard zo'n doctype maakt |:(

Verwijderd

Welke versie van DW gebruik je? Want heb hier v8.0 en maakt er dit van:

HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Daar heb ik nog nooit probs mee gehad. Raad je zowiezo aan te upgraden naar 8.0, dat werkt een stuk beter.

  • tricksel
  • Registratie: Oktober 2002
  • Laatst online: 11-02 08:12
Laat je doctype gewoon op transitional staan, en probeer het volgende toe te voegen aan je stylesheet:

voor je body:
text-align: center;

en voor je header:
margin: 0 auto;

dan vervolgens geef je op je content div een text-align: left; of wat dan ook. Is een veel voorkomend probleem met IE; die snapt een automatische margin horizontaal blijkbaar niet helemaal. Kijk voor een voorbeeldje even op www.hatseflats.info, hier heb ik het hetzelfde opgelost.

  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

tricksel schreef op dinsdag 12 september 2006 @ 21:35:
Laat je doctype gewoon op transitional staan, en probeer het volgende toe te voegen aan je stylesheet:

voor je body:
text-align: center;

en voor je header:
margin: 0 auto;

dan vervolgens geef je op je content div een text-align: left; of wat dan ook. Is een veel voorkomend probleem met IE; die snapt een automatische margin horizontaal blijkbaar niet helemaal. Kijk voor een voorbeeldje even op www.hatseflats.info, hier heb ik het hetzelfde opgelost.
Niet om heel vervelend te zijn of zo, maar heb je de afgelopen 23 posts even gelezen? Daarnaast is je advies om gewoon transitional te gebruiken een beetje controversieel.

[ Voor 6% gewijzigd door Rowanov op 12-09-2006 21:43 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 15:25

crisp

Devver

Pixelated

Voor alle duidelijkheid: de margin: 0 auto; methode werkt inderdaad alleen in standards-compliant mode (dus als je een DTD met URI gebruikt). Strict vs Transitional heeft daar niets mee te maken, maar uiteraard is Strict de norm voor nieuwe documenten.

De text-align:center is enkel noodzakelijk voor IE < 6

De truuk met negatieve margins is af te raden want bij een te klein venster verdwijnt er dan content waar niet meer naartoe te scrollen is (storeman: misschien zelf ook eerst eens zoeken want de nadelen van die methode zijn hier ook al vaker besproken ;) )

En last but not least: als je niet precies weet waarom je XHTML nodig zou hebben dan heb je het ook niet nodig en dien je gewoon HTML4.01 te gebruiken. Een XHTML document verstuurd als text/html is gewoon een HTML document met verkeerde DTD en fouten in de syntax :P

[ Voor 7% gewijzigd door crisp op 12-09-2006 21:49 ]

Intentionally left blank


  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Verwijderd schreef op dinsdag 12 september 2006 @ 21:28:
Welke versie van DW gebruik je? Want heb hier v8.0 en maakt er dit van:

HTML:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Daar heb ik nog nooit probs mee gehad. Raad je zowiezo aan te upgraden naar 8.0, dat werkt een stuk beter.
Ik gebruik DW MX versie 6.0. Is er een upgrade beschikbaar? Want anders moet ik 8.0 kopen en dat kost veel centjes :P (ik = student ;))
tricksel schreef op dinsdag 12 september 2006 @ 21:35:
Laat je doctype gewoon op transitional staan, en probeer het volgende toe te voegen aan je stylesheet:

voor je body:
text-align: center;

en voor je header:
margin: 0 auto;

dan vervolgens geef je op je content div een text-align: left; of wat dan ook. Is een veel voorkomend probleem met IE; die snapt een automatische margin horizontaal blijkbaar niet helemaal. Kijk voor een voorbeeldje even op www.hatseflats.info, hier heb ik het hetzelfde opgelost.
Wat rovanov zei :P Maar ik wil dus wel strict gebruiken omdat ik nette html code wil schrijven :) En ik zal zo eens naar je site kijken :)
crisp schreef op dinsdag 12 september 2006 @ 21:47:
Voor alle duidelijkheid: de margin: 0 auto; methode werkt inderdaad alleen in standards-compliant mode (dus als je een DTD met URI gebruikt). Strict vs Transitional heeft daar niets mee te maken, maar uiteraard is Strict de norm voor nieuwe documenten.

De text-align:center is enkel noodzakelijk voor IE < 6

De truuk met negatieve margins is af te raden want bij een te klein venster verdwijnt er dan content waar niet meer naartoe te scrollen is (storeman: misschien zelf ook eerst eens zoeken want de nadelen van die methode zijn hier ook al vaker besproken ;) )

En last but not least: als je niet precies weet waarom je XHTML nodig zou hebben dan heb je het ook niet nodig en dien je gewoon HTML4.01 te gebruiken. Een XHTML document verstuurd als text/html is gewoon een HTML document met verkeerde DTD en fouten in de syntax :P
Nou ik wil XHTML gebruiken omdat nog wel wat meer sites van plan ben te gaan maken, en XHTML is volgens W3 nette html code, dus ik wil gewoon netjes code aanleren ;) Vandaar dat ik ook strict wil gaan gebruiken.

Bijdeweg, is het niet handiger als dit in een FAQ oid wordt gezet? Het is idd een veel voorkomend probleem, dus misschien handig voor mensen die hetzelfde probleem hebben maar niet de 3582930ste topic hierover willen openen :P

  • Erkens
  • Registratie: December 2001
  • Niet online

Erkens

Fotograaf

XHTML betekend niet dat het meteen nette code is hoor ;)
Natuurlijk is het waar dat als je XHTML gebruikt dat je moet zorgen dat elke tag afgesloten is (denk dat je dat bedoeld) maar aan de andere kant brengt het ook in sommige gevallen "nadelen" met zich mee. Zo heeft de in dit topic eerder genoemde width/height van je body weinig nut met XHTML, want die moet je op de html tag zetten om hetzelfde te bereiken :P

Maar als je geen XML-based backend/frontend hebt of in de toekomst, dan biedt XHTML nu nog weinig voordelen. Hou het in dat geval bij HTML401 (strict)

  • Oguz286
  • Registratie: Juni 2002
  • Laatst online: 26-12-2025
Erkens schreef op dinsdag 12 september 2006 @ 22:37:
XHTML betekend niet dat het meteen nette code is hoor ;)
Natuurlijk is het waar dat als je XHTML gebruikt dat je moet zorgen dat elke tag afgesloten is (denk dat je dat bedoeld) maar aan de andere kant brengt het ook in sommige gevallen "nadelen" met zich mee. Zo heeft de in dit topic eerder genoemde width/height van je body weinig nut met XHTML, want die moet je op de html tag zetten om hetzelfde te bereiken :P

Maar als je geen XML-based backend/frontend hebt of in de toekomst, dan biedt XHTML nu nog weinig voordelen. Hou het in dat geval bij HTML401 (strict)
Jullie hebben vast meer ervaring hiermee, dus hou ik me maar aan jullie raad ;) Iig heel erg bedankt iedereen, ik ben nu ineens heel erg opgelucht :*)
Pagina: 1