[HTML] Indentation verprutst layout in Firefox* - Softwareontwikkeling

woensdag 28 juni 2006 14:29

Acties:

Topicstarter

Hallo,

Ik heb van mezelf geleerd bij het coden van websites. En wil het nu allemaal netjes gaan doen...
Werken met het inspringen van code. Na alles op internet gelezen te hebben dacht ik dat de browser hier niets van aantrekt.

Maar tot mijn grote verbazing is dit wel het geval. In Internet Explorer ziet het er erger uit als in Firefox (Had niet anders verwacht), maar in beide browsers ziet het er niet goed uit.
Ik heb mijn code dubbel gechecked, maar kan geen verdwaalde spaties vinden waardoor de browser in de war zou kunnen raken.

Dit is de code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SigmaEdit</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div id="wrapper">
    <div id="header">
        [img]"images/spacer.gif"[/img]
    </div>

    <div id="content">
        [img]"images/menu/top.gif"[/img]<br />
            <div id="menubar">
                [img]"images/menu/home.gif"[/img]
                [img]"images/menu/separator.gif"[/img]
                [img]"images/menu/paginas.gif"[/img]
                [img]"images/menu/separator.gif"[/img]
                [img]"images/menu/instructies.gif"[/img]
                [img]"images/menu/separator.gif"[/img]
                [img]"images/menu/faq.gif"[/img]
                [img]"images/menu/separator.gif"[/img]
                [img]"images/menu/over.gif"[/img]
                [img]"images/menu/separator.gif"[/img]
            </div>
        [img]"images/menu/bottom.gif"[/img]
    </div>

    <div id="footer">
        [img]"images/spacer.gif"[/img]
    </div>
</div>
</body>
</html>

De gebruikte CSS:

Cascading Stylesheet:

body {
    background: url(images/background.gif);
    margin: 10px 10px 10px 10px;
    font: 12px Tahoma;
}

/* Layout Begin */
#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 674px;
}

#header {
    background: url(images/body_top.gif) no-repeat;
}

#content { 
    background: url(images/body.gif) repeat-y;
    padding: 22px 27px 22px 27px;
    }

#footer {
    clear: both;
    background: url(images/body_bottom.gif) no-repeat;
}

#menubar {
    background: url(images/menu/spacer.gif) repeat-x;
    width: 620px;
}
/* Layout Einde */

Je kunt de site hier bekijken: http://ntt-media.nl/dev/probleem/

Zoals je kunt zien is de menubalk niet goed gerenderd. De witte ruimte aan de onderkant moet gelijk zijn als de bovenkant. Zodra ik de code van de knoppen (plaatjes) op 1 lijn zet zijn de spaties tussen de knoppen weg. Zodra ik de code netjes zet zoals hierboven gaat firefox er ineens spaties bij bedenken. Internet explorer denkt helemaal leuk te zijn door witte regels tussen de DIVs te plaatsen...

Is dit een fout van de browsers (lijkt me sterk), of doe ik iets verkeerd?
Of word ik gedwongen bij code niet netjes te houden?

[ Voor 43% gewijzigd door Saeverix op 28-06-2006 21:07 ]

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 14:34

Acties:

djluc

Al een ander doctype getest? HTML 4.0 strict o.i.d?

woensdag 28 juni 2006 14:38

Acties:

Saeverix

Topicstarter

Ik heb nu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> gedaan, maar nu ziet het er Firefox het zelfde uit als in Internet Explorer...

Heb ze nu bijna allemaal geprobeerd, niet helpt. Bij sommigen word het zelfs erger.
http://www.htmlhelp.com/tools/validator/doctype.html

Ik heb ook mijn CSS even gepost...

[ Voor 54% gewijzigd door Saeverix op 28-06-2006 14:43 ]

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 15:06

Acties:

Osiris

<img>'s die niet op dezelfde lijn staan krijgen AFAIK idd een ruimte eronder ofzo. Pruts anders eens wat met de margin's van de <img>'s?

woensdag 28 juni 2006 15:10

Acties:

Saeverix

Topicstarter

Maar heb je ook een verklaring voor de ruimte onder de DIV's in Internet Explorer?
Is daar een oplossing voor, of ben ik door Internet Explorer gedwongen om geen lege regels tussen de DIV's te plaatsen in de code?

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 15:28

Acties:

Rowanov

Kop eens wat anders...

Je indenting wordt met spaties gedaan ipv. tabs. Probeer het eens met tabs en kijk dan nog eens.

woensdag 28 juni 2006 15:42

Acties:

BalusC

Carpe diem

Bouw je menu netjes op: BalusC in "Standaard margin afbeeldingen"

Rowanov schreef op woensdag 28 juni 2006 @ 15:28:
Je indenting wordt met spaties gedaan ipv. tabs. Probeer het eens met tabs en kijk dan nog eens.

Ik heb nog nooit meegemaakt dat het daaraan zou kunnen liggen

[ Voor 56% gewijzigd door BalusC op 28-06-2006 15:42 ]

woensdag 28 juni 2006 15:45

Acties:

Verwijderd

Je zou zo'n menu ook vrij simpel kunnen maken met een ul en gewone textlinks, want ik zie de noodzaak van al die losse img's niet. Lijkt me semantisch wat correcter.

woensdag 28 juni 2006 15:46

Acties:

BalusC

Carpe diem

Inderdaad, juist door de losse img's die zijn gescheiden door spaties, newline's, tabs, etc krijg je dit soort layoutverneukende praktijken. Plaats ze netjes zonder spatiering in dd's, li's, p's, spans, div's, etc

[ Voor 21% gewijzigd door BalusC op 28-06-2006 15:47 ]

woensdag 28 juni 2006 16:05

Acties:

Verwijderd

[ \t\n\r\f] is allemaal whitespace, dus levert allemaal een spatie op

woensdag 28 juni 2006 16:49

Acties:

Tepel

Misschien een leuk artikel voor al jullie XHTMLers in de wereld
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Staat in wat je moet doen om _echte_ xhtml te leveren

0x7F

woensdag 28 juni 2006 18:57

Acties:

Saeverix

Topicstarter

Rowanov schreef op woensdag 28 juni 2006 @ 15:28:
Je indenting wordt met spaties gedaan ipv. tabs. Probeer het eens met tabs en kijk dan nog eens.

Nee hoor, dit zijn gewoon TABS maar door de [ code ] functie van Tweakers worden het op één of andere manier spaties.

En ik zie nu allemaal oplossingen voor de knoppen, maar nog niet voor de ruimte tussen de 3 DIV's...

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 19:31

Acties:

crisp

Devver

Pixelated

Tepel schreef op woensdag 28 juni 2006 @ 16:49:
Misschien een leuk artikel voor al jullie XHTMLers in de wereld
http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

Staat in wat je moet doen om _echte_ xhtml te leveren

(X)HTML5 is praktischer dan XHTML2, en als je je XHTML pagina als text/html kan verzenden dan heb je gewoon de verkeerde doctype gebruikt want dan had je HTML moeten kiezen. XHTML is alleen nuttig als je het gebruikt samen met andere XML-applications.

Intentionally left blank

woensdag 28 juni 2006 20:31

Acties:

Saeverix

Topicstarter

heb nu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> gedaan. Maar de problemen met de bovenste en onderste div blijven in Internet Explorer.

De buttons heb ik nu in DIV's gezet met "float: left;" in de CSS. Nu komen ze naast elkaar, maar nu loopt de DIV waar de buttons inzitten niet meer door (de background image word niet meer afgebeeld) dus nu lijkt het alsof de balk ophoudt.

Wat is volgens jullie de beste oplossing (behalve de images verandere in Tekst) op de problemen te verhelpen?

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 20:45

Acties:

Rowanov

Kop eens wat anders...

BalusC schreef op woensdag 28 juni 2006 @ 15:42:
Bouw je menu netjes op: BalusC in "Standaard margin afbeeldingen"
Ik heb nog nooit meegemaakt dat het daaraan zou kunnen liggen

Ik ook niet, maar ik roep het toch maar. Zowieso moet het met het juiste doctype gewoon werken, alleen bij plaatjes die naast elkaar moeten komen levert het wel eens problemen op. Vaak is een lijst met css styling de beste oplossing aangezien het 9 van de 10 keer om menu's gaat met plaatjes als buttons.

Saeverix schreef op woensdag 28 juni 2006 @ 20:31:
heb nu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> gedaan. Maar de problemen met de bovenste en onderste div blijven in Internet Explorer.

De buttons heb ik nu in DIV's gezet met "float: left;" in de CSS. Nu komen ze naast elkaar, maar nu loopt de DIV waar de buttons inzitten niet meer door (de background image word niet meer afgebeeld) dus nu lijkt het alsof de balk ophoudt.

Wat is volgens jullie de beste oplossing (behalve de images verandere in Tekst) op de problemen te verhelpen?

• strict doctype
• lijst nemen voor je menu en met css stylen

HTML:

<ul>
  <li id="item1"><span class="menu-item">Link 1</span></li>
  <li><span class="menu-item">Link 2</span></li>
  <li><span class="menu-item">Link 3</span></li>
</ul>

Cascading Stylesheet:

ul, li {
  list-style: none;
}
.menu-item {
  display: none;
}
#item1 {
  background: url('blaat.gif');
}

Of iets in die geest. Het globale idee is dat je de span verstopt, de li desnoods als block weergeeft en daar een achtergrond aan hangt. Dan kan je ook nog zorgen dat je lijst niet als lijst wordt weergegeven en voila.

[ Voor 53% gewijzigd door Rowanov op 28-06-2006 20:49 ]

woensdag 28 juni 2006 20:59

Acties:

Saeverix

Topicstarter

BalusC schreef op woensdag 28 juni 2006 @ 15:42:
Bouw je menu netjes op: BalusC in "Standaard margin afbeeldingen"

Ik heb dit nu geprobeerd, maar ook dit is niet de oplossing...
In Internet Explorer werkt de site nu zoals hij moet, maar in Firefox Totaal niet...

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 21:02

Acties:

Saeverix

Topicstarter

Rowanov schreef op woensdag 28 juni 2006 @ 20:45:
[...]

Ik ook niet, maar ik roep het toch maar. Zowieso moet het met het juiste doctype gewoon werken, alleen bij plaatjes die naast elkaar moeten komen levert het wel eens problemen op. Vaak is een lijst met css styling de beste oplossing aangezien het 9 van de 10 keer om menu's gaat met plaatjes als buttons.

[...]

• strict doctype
• lijst nemen voor je menu en met css stylen
HTML:
1
2
3
4
5
<ul>
  <li id="item1"><span class="menu-item">Link 1</span></li>
  <li><span class="menu-item">Link 2</span></li>
  <li><span class="menu-item">Link 3</span></li>
</ul>
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
ul, li {
  list-style: none;
}
.menu-item {
  display: none;
}
#item1 {
  background: url('blaat.gif');
}
Of iets in die geest. Het globale idee is dat je de span verstopt, de li desnoods als block weergeeft en daar een achtergrond aan hangt. Dan kan je ook nog zorgen dat je lijst niet als lijst wordt weergegeven en voila.

Ik moet zeggen dat het niet motiverend is om je code netjes te houden als je kijkt wat voor gekloot je nu allemaal moet doen om dat menuutje netjes te weergeven...

Is hier nou niet over nagedacht, of ben ik gewoon totaal verkeerd aan het coden?

Ook heb ik even het misverstand met de XHTML code style veranderd naar HTML (Loose)... Ik heb Strict ook geprobeerd, maar dan ziet het er nog beroerder uit in Firefox...

De code ziet er nu zo uit:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SigmaEdit</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="header">
    <p>[img]"images/spacer.gif"[/img]</p>
  </div>
  
  <div id="content">
    <p>[img]"images/menu/top.gif"[/img]</p>
    <div id="menubar">
      <dl id="menu">
        <dd>[img]"images/menu/home.gif"[/img]</dd>
        <dd>[img]"images/menu/separator.gif"[/img]</dd>
        <dd>[img]"images/menu/paginas.gif"[/img]</dd>
        <dd>[img]"images/menu/separator.gif"[/img]</dd>
        <dd>[img]"images/menu/instructies.gif"[/img]</dd>
        <dd>[img]"images/menu/separator.gif"[/img]</dd>
        <dd>[img]"images/menu/faq.gif"[/img]</dd>
        <dd>[img]"images/menu/separator.gif"[/img]</dd>
        <dd>[img]"images/menu/over.gif"[/img]</dd>
        <dd>[img]"images/menu/separator.gif"[/img]</dd>
      </dl>
    </div>
    <p>[img]"images/menu/bottom.gif"[/img]</p>
  </div>
  
  <div id="footer">
    <p>[img]"images/spacer.gif"[/img]</p>
  </div>
</div>
</body>
</html>

Op http://validator.w3.org/ valideert de code volledig behalve dat de ALT tags van de images missen, maar dat kan het probleem niet zijn...

[ Voor 70% gewijzigd door Saeverix op 28-06-2006 21:18 ]

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 21:22

Acties:

Verwijderd

wat is de betekenis van een dl zonder dt's? welke definities wil je opsommen als je de termen niet hebt?

gebruik gewoon een ul, en verder een map ipv <div id="menubar">

woensdag 28 juni 2006 21:26

Acties:

Saeverix

Topicstarter

Verwijderd schreef op woensdag 28 juni 2006 @ 21:22:
wat is de betekenis van een dl zonder dt's? welke definities wil je opsommen als je de termen niet hebt?

gebruik gewoon een ul, en verder een map ipv <div id="menubar">

Ik heb het voorbeeld van BalusC gebruikt uit een vorige post hierboven...

Als ik UL wil gebruiken, moet ik dan ook nog bepaalde CSS waarden opgeven, of werkt dat zonder toevoegingen?

People who live in glass houses shouldn't throw stones.

woensdag 28 juni 2006 21:53

Acties:

Rowanov

Kop eens wat anders...

Dat heb ik je net laten zien.

Het is voor jou nuttig om wat te lezen over semantiek, dat is namelijk de reden dat we hier zo 'moeilijk doen'. Je menu is een opsomming van links; opsomming is ul. Die links zijn woorden/tekst die de doelpagina beschrijven; dat zijn dus geen plaatjes. Wil je het er anders uit laten zien dan dat wat het voor tekstbrowsers moet voorstellen? Dan pak je dus css om de opmaak te regelen. Extra regels code zijn niet vies, maar in dit geval juist uiterst nuttig.

Dan nog iets; dat je site valideert betekent niets anders dan dat je het conform de syntax ingeklopt hebt. Je kan een draak van een code schrijven terwijl het toch valideert; validatie is geen argument voor goede of foute weergave in de browser.

Edit: gebruik ook gewoon strict; dat dwingt de browser om in standards compliance mode je pagina te renderen. Gevolg daarvan is dat verschillende browsers je pagina op een meer gelijkende manier weergeven; je heft een groot aantal verschillen op tussen de browsers.

[ Voor 16% gewijzigd door Rowanov op 28-06-2006 21:55 ]

donderdag 29 juni 2006 00:03

Acties:

Saeverix

Topicstarter

Dat over semantiek is inderdaad een leuk artikel, zal er zeker iets mee proberen te doen.
Ook heb ik jou UL voorbeeld geprobeerd, maar hij laat helemaal niets zien als ik de code van jou toevoeg. Ik zie nergens Link 1 Link 2 Link 3...

Ik heb hem online gezet... Bekijk het maar eens. Heel erg vreemd, ik kan er niet meer bij met mijn verstand

People who live in glass houses shouldn't throw stones.

donderdag 29 juni 2006 09:49

Acties:

Saeverix

Topicstarter

Ik heb het nu geprobeert met je UL voorbeeld, maar dan nog blijft het een probleem...
Is er nou niet een simpele oplossing die werkt in alle browsers?

Ik heb nog nooit zo lang met een simpel menu zitten klooien sinds ik ben begonnen met netjes coden...

People who live in glass houses shouldn't throw stones.

donderdag 29 juni 2006 11:57

Acties:

Rowanov

Kop eens wat anders...

Weet je waarom je het niet ziet? Het wordt vervangen door blaat.gif en jij hoort blaat.gif te vervangen door je button plaatje. Ik zal een voorbeeld maken voor je.

Edit: op de website uit je topicstart werkt het toch gewoon? Links toevoegen en je bent klaar.

[ Voor 37% gewijzigd door Rowanov op 29-06-2006 11:59 ]

donderdag 29 juni 2006 18:05

Acties:

Saeverix

Topicstarter

Ja, dat komt omdat ik per item de Width het opgegeven... Ook heb ik de "float: left;" moeten meegeven in css omdat anders alle buttons onder elkaar kwamen...
Maar nu heb ik ondanks dat ik de margin en padding op 0px heb gezet toch nog ruimte tussen de 2 groene balkjes en de buttons...

En als je in Internet Explorer de stylesheet uitschakelt zie je niets van de Semantiek terug op de site... De links worden dan namelijk niet weergeven...

Zelfs nu ik een Strict Doctype heb opgegeven presteert Internet Explorer het toch weer andere te weergeven dan Firefox (Waarvan ik denk dat die het op de juiste manier doet)...

Heb jij nog enig idee waarom het nu nog steeds niet goed is?

HTML:

<!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>SigmaEdit</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="header">
    <p>[img]"images/spacer.gif"[/img]</p>
  </div>
  <div id="content">
    <p>[img]"images/menu/top.gif"[/img]</p>
    <ul>
      <li id="home"><span class="menu-item">Link 1</span></li>
      <li id="separator"><span class="menu-item">|</span></li>
      <li id="paginas"><span class="menu-item">Link 2</span></li>
      <li id="instructies"><span class="menu-item">Link 3</span></li>
      <li id="faq"><span class="menu-item">Link 4</span></li>
      <li id="over"><span class="menu-item">Link 5</span></li>
    </ul>
    <p>[img]"images/menu/bottom.gif"[/img]</p>
  </div>
  <div id="footer">
    <p>[img]"images/spacer.gif"[/img]</p>
  </div>
</div>
</body>
</html>

Cascading Stylesheet:

body {
    background: url(images/background.gif);
    margin: 10px 10px 10px 10px;
    font: 12px Tahoma;
}

p {
    margin: 0px;
}

ul, li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.menu-item {
  display: none;
}

#home {
  background: url(images/menu/home.gif);
  width: 89px;
  height: 26px;
  float: left;
}

#paginas {
  background: url(images/menu/paginas.gif);
  width: 106px;
  height: 26px;
  float: left;
}

#instructies {
  background: url(images/menu/instructies.gif);
  width: 119px;
  height: 26px;
  float: left;
}

#faq {
  background: url(images/menu/faq.gif);
  width: 77px;
  height: 26px;
  float: left;
}

#over {
  background: url(images/menu/over.gif);
  width: 152px;
  height: 26px;
  float: left;
}

#separator {
  background: url(images/menu/separator.gif);
  width: 1px;
  height: 26px;
  float: left;
}

/* Layout Begin */
#wrapper {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 674px;
}

#header {
    background: url(images/body_top.gif) no-repeat;
    height: 5px;
}

#content { 
    background: url(images/body.gif) repeat-y;
    padding: 22px 27px 22px 27px;
    }

#footer {
    clear: both;
    background: url(images/body_bottom.gif) no-repeat;
}
/* Layout Einde */

[ Voor 55% gewijzigd door Saeverix op 29-06-2006 18:07 ]

People who live in glass houses shouldn't throw stones.

vrijdag 30 juni 2006 20:40

Acties:

Saeverix

Topicstarter

Anyone??

Ik heb geen idee meer hoe het op te lossen...

People who live in glass houses shouldn't throw stones.

zaterdag 1 juli 2006 19:24

Acties:

Saeverix

Topicstarter

Echt niemand meer dus? Lijkt me sterk dat dit niet op te lossen is...

Of heb ik dus gelijk en moet ik gewoon weer "niet netjes" gaan coden? Om zo toch mijn site te krijgen zoals ik wil...

[ Voor 4% gewijzigd door Saeverix op 01-07-2006 19:32 ]

People who live in glass houses shouldn't throw stones.

zaterdag 1 juli 2006 21:34

Acties:

Borizz

Het ligt wel degelijk aan je CSS hoor. Het ligt namelijk aan de font-size in de p-elementen, omdat je daar een image in hebt zitten. Een image wordt standaard verticaal gecentreerd t.o.v. van de tekst met de baseline methode (dus onderkant image is gelijk aan onderkant tekst, geloof ik). Omdat de font-size groter is dan het image zorgt dat nu voor de verschillen in de uitlijning van je image in het p-element.

De oplossing is dus om op dat p-element waar het image in zit een font-size van 0 te geven:

Cascading Stylesheet:

1	p { font-size: 0; }

Je zou ook kunnen spelen met de vertical-align property van de image:

Cascading Stylesheet:

1	p img { vertical-align: middle; }

Maar nog een betere oplossing lijkt me om de lijnen als een achtergrond afbeelding in te zetten, het voegt semantisch gezien namelijk niets toe aan je pagina die plaatjes.

If I can't fix it, it ain't broken.

zaterdag 1 juli 2006 23:49

Acties:

Rowanov

Kop eens wat anders...

Spacers zijn zo 1996 en layout elementen (zoals je menu/top en menu/bottom) horen niet in je html. Dat hoor je met een achtergrond te regelen.

zondag 2 juli 2006 13:22

Acties:

Saeverix

Topicstarter

Ik ben eruit gekomen... Heb voor een aantal DIVs "font-size: 0;" gebruikt, en heb alle knoppen in een menubalk DIV gezet. Werkt perfect nu.

Zit alleen nu met me volgende probleem

Maar daar probeer ik eerst zelf wel weer even uit te komen.

Thanks allemaal...

People who live in glass houses shouldn't throw stones.

maandag 3 juli 2006 05:22

Acties:

Verwijderd

Je hebt het nu wel een beetje omslachtig en naar mijn mening minder juist aangepakt. Een simpel horizontaal menu bouwen mbv. 6 divs en veel teveel css is niet juist. Ook zeggen divs op zichzelf niets (semantisch gezien), je kunt veel beter een unordered list gebruiken.

Ik heb je menu hier even nagebouwd. Hopelijk heb je er iets aan.

mark-up:

HTML:

<!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>test</title>
<link href="test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
    <div id="menu">
        <ul>
            <li class="home"><a href="#"><span>Home</span></a></li>
            <li class="paginas"><a href="##"><span>Pagina's</span></a></li>
            <li class="instructies"><a href="###"><span>Instructies</span></a></li>
            <li class="faq"><a href="####"><span>FAQ</span></a></li>
            <li class="about"><a href="#####"><span>Over SigmaEdit</span></a></li>
        </ul>
    </div>  
</div>

</body>
</html>

CSS:

Cascading Stylesheet:

* { margin: 0; padding: 0; }

body { padding: 15px; background: #CCC; }

#wrapper { width: 674px; margin: 0 auto; padding: 22px; background: #FFF; border: 2px solid #999; }

#menu { height: 34px; background: url(images/menubar.gif) repeat-x left top; }
#menu ul { list-style-type: none; }
#menu ul li { float: left; margin-top: 4px; }
#menu li a span { display:none; }
#menu li a { display:block; height:26px; }

.home { background-image: url(images/home.gif); width: 89px; }
.paginas { background-image: url(images/paginas.gif); width: 106px; }
.instructies { background-image: url(images/instructies.gif); width: 119px; }
.faq { background-image: url(images/faq.gif); width: 77px; }
.about { background-image: url(images/over.gif); width: 152px; }

[ Voor 20% gewijzigd door Verwijderd op 03-07-2006 18:59 ]

donderdag 6 juli 2006 00:49

Acties:

Saeverix

Topicstarter

Dat ziet er inderdaad stukken beter uit... En bij jou manier ziet het er wel in beide browsers gelijk uit

Dat kreeg ik niet voor elkaar.

Mag ik trouwens vragen waar die * bovenaan de css file voor is? Heb ik nog nooit eerder gezien namelijk.

People who live in glass houses shouldn't throw stones.

donderdag 6 juli 2006 02:15

Acties:

Verwijderd

Saeverix schreef op donderdag 06 juli 2006 @ 00:49:
Dat ziet er inderdaad stukken beter uit... En bij jou manier ziet het er wel in beide browsers gelijk uit
Dat kreeg ik niet voor elkaar.

Mag ik trouwens vragen waar die * bovenaan de css file voor is? Heb ik nog nooit eerder gezien namelijk.

Bedoel je * ?:

Cascading Stylesheet:

1	* { margin: 0; padding: 0; }

Dat zet alle standaard paddings en margins op 0, je kunt er evt. ook border: 0; bij zetten.

[ Voor 4% gewijzigd door Verwijderd op 06-07-2006 14:43 ]

donderdag 6 juli 2006 12:18

Acties:

Saeverix

Topicstarter

Ah dat is wel handig. Ik had al zoiets in gedachte ivm *.* filemask...

People who live in glass houses shouldn't throw stones.

Pagina: 1

Reageer