PDA

Volledige versie bekijken : Html/css bug/probleem?

SaphuA
%Europe/Berlin %764 %2005, 18:21
Hallo mensen,
Voor een site probleem ik een simpel horizontaal menu te maken.
Dit bestaat gewoon uit hyperlinks die naast elkaar worden weergegeven.

Via een site had ik wat inforamtie gevonden hoe je een lijst horizontaal kon laten weergeven, en dit is precies wat ik wilde. Ik heb daruit dus het menutje gemaakt, en de source zit er alsvolgt uit:
<HTML>
<HEAD>
<style type="text/css">
li {
display: inline;
list-style-type: none;
padding-right: 50px;
}
.menu {
background-color: #000022;
color: #FFFFFF;
width: 740px;
height: 20px;
margin-top: 5px;
}
</style>
</HEAD>
<BODY>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</BODY>
</HTML>
Er is nu alleen nog een probleem waar ik mee zit.
De hoogte van de menu-div staat op 20x, maar deze wordt op een magische wijze vergroot.
Vreemde is nu, waneer ik de </ul> tag verwijder, zodat het dus eigenlijk geen lijst is, dat het menu dan wel de goede grootte heeft.
Weet iemand de juiste manier om dit op te lossen?

Bedankt,
~Sph
theFlashWizard
%Europe/Berlin %792 %2005, 19:01
komt dat niet door de:
margin-top: 5px;
?

probeer die is n x weg te hale?
SubZero
%Europe/Berlin %810 %2005, 19:26
Dat "magische verschijnsel" is de verkeerde interpretatie van het CSS Box Model. Dit kan je oplossen met de Box Model Hack (http://tantek.com/CSS/Examples/boxmodelhack.html). Op deze pagina vind je ook meer informatie over het Box Model.

In dit geval zou de CSS er als volgt uitzien:div.menu
{
margin: 5px 0 0 0;
width: 40px; height: 25px;
background: #000022;
color: #FFF;
voice-family: "\"}\"";
voice-family: inherit;
height: 20px;
}
SaphuA
%Europe/Berlin %831 %2005, 19:56
FlashWizar:
Nee dat heeft met de positie van de div te maken, verder niets.

SubZero, ik snap je niet helemaal. Deze fix heeft het over de breedte van een div-box.

Het probleem dat ik waarschijnlijk heb, is dat er op een of andere manier ruimte onder de lijst wordt gegenereerd. Hetzelfde probleem doet zich namenlijk ook voor bij tabellen.
lord Greystoke
%Europe/Berlin %857 %2005, 20:35
Hi, eerlijk gezegd geen flauw idee waar het aan ligt,
maar door 'float' toe te voegen ben je van je probleem af:


li {
display: inline;
list-style-type: none;
padding-right: 50px;
float: left;
}
.menu {
background-color: #000022;
color: #FFFFFF;
width: 740px;
height: 20px;
margin-top: 5px;
}


Suc6 ;)
SubZero
%Europe/Berlin %884 %2005, 21:13
Ik weet dat het, zeker voor een beginner, een flinke brok is. Maar verdiep je even in dit Box Model, want je gaat dit enorm vaak tegenkomen in XHTML/CSS. Het Box Model heeft zowel betrekking op de width als de height (enkel de width in dit voorbeeld).

Maar je hebt ook geen DocType gedeclareerd in je website. Een DocType verteld de browser wat voor XHTML-document je hem presenteert. Dat plaats je als eerste in jouw document.

Gebruik bijvoorbeeld XHTML 1.0 Transitional voor te starten, dan is de DocType:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Later kan je overschakelen op XHTML 1.0 Strict. Door geen DocType mee te geven, breng je de browers in een speciale modus (de quirksmode) waarin hij zelf gaat proberen te interpreteren wat je nu eigenlijk bedoelde met je document, met alle gevolgen vandien.

Meer informatie voor beginners vind je hier (http://www.htmldog.com/).
SaphuA
%Europe/Berlin %885 %2005, 21:15
Mjah dan heb ik nog een probleepje, het menu moet gecentreerd worden :D
SubZero
%Europe/Berlin %887 %2005, 21:18
Het is misschien makkelijker dat je een link post naar het voorbeeld.
SaphuA
%Europe/Berlin %896 %2005, 21:31
Hey Subzero,
Ik zag je laatste replie niet.
Probleem is, ik snap dat Box Model ding niet, en ik wil het niet gaan implementeren zonder dat ik weet wat ik doe.

Ik heb een voorbeeldje geupload, je kunt hem zien op:
http://www.drewsrestaurant.com/saphua/junk/
En de css:
http://www.drewsrestaurant.com/saphua/junk/style.css

~Sph
SubZero
%Europe/Berlin %913 %2005, 21:55
Ik heb even gemaakt wat je bedoelt. Je vindt het resultaat hier (http://users.skynet.be/bert_fonteyn/saphua/index.html). De CSS bevat de nodige commentaar. Verdiep je op de website van HTML Dog even in XHTML en CSS voor je geavanceerder te werk wil gaan. Iedereen heeft stapje voor stapje moeten leren.
theflush2
%Europe/Berlin %425 %2005, 10:12
Probeer eens je overflow op hidden te zetten.

.menu {
background-color: #000022;
color: #FFFFFF;
width: 740px;
height: 20px;
margin-top: 5px;
overflow: hidden;
}
SaphuA
%Europe/Berlin %662 %2005, 15:54
theFlush, iemand vertelde mij toevallig dat ik dit eens moest proberen. En het werkt idnerdaad, bedankt :)

subZero, erg bedankt voor de moeite. Hoewel het dus neit meer nodig is heb ik er toch wat van geleerd. Dat van die Doctype moet ik inderdaan nog eens doorlezen. Ik zou alleen niet weten met welke HTMl versie ik bezig ben.

Verder heb ik nog een vraagje. De opmaak van je css file is heel anders dan die van mij. Komt dit omdat je dit zelf gewend bent, of heeft het een technische reden? Ook he timporteren van de css is anders, heeft dit ook een reden?

Bedankt,
~Sph
theFlashWizard
%Europe/Berlin %682 %2005, 16:22
anders moet je dit ff doorlezen:
http://www.nypl.org/styleguide/xhtml/guidelines.html
:)