[CSS] inline <ul> menu, ruimte tussen <li> elementen? - Softwareontwikkeling

zaterdag 6 augustus 2005 16:44

Acties:

0 Henk 'm!

Anoniem: 67942

Topicstarter

Hoi,

op http://www.w3bdesign.nl/navigation/ is een begin van een navigatiemenu te vinden. Dit menu wil ik volledig met css opmaken door gebruik te maken van een inline <ul>.

Wat ik graag wil is dat de menuitems op elkaar aansluiten alsof het 1 geheel is. Ik krijg het alleen niet voormekaar.

Ik heb de zoekfunctie al gebruikt maar heb geen oplossing kunnen vinden.

Misschien iemand die me verder op weg kan helpen?

Bedankt alvast!

HTML:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>paginatitel</title>
<style type="text/css">
#navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#navigation ul li { 
    display: inline;
}

#navigation ul li a {
    text-decoration: none;
    padding: 0px 10px 0px 10px;
    background-color: #c9c;
    color: #fff;
    border-left: 3px solid #969;
}

#navigation ul li a:hover {
    background-color: #969;
}
</style>

</head>
<body>

<div id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</div>

</body>
</html>

zaterdag 6 augustus 2005 16:52

Acties:

0 Henk 'm!

Anoniem: 11636

Je <li>'s achterelkaar zetten lost het bij mij op, dus zo:

HTML:

1	<li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li>

zaterdag 6 augustus 2005 16:55

Acties:

0 Henk 'm!

Cyphax

Moderator LNX

Die enters in je code voegen dus 3 pixels margin toe... hmm.
Als je de margin van #navigation ul li op -3 zet is het probleem ook opgelost maar de oplossing vna MMagnet lijkt me netter. Ik weet niet of margin -3 in IE ook goed gaat?

Saved by the buoyancy of citrus

zaterdag 6 augustus 2005 16:56

Acties:

0 Henk 'm!

disjfa

be

Cascading Stylesheet:

1
2
3

#navigation ul li { 
    float:left
}

disjfa - disj·fa (meneer)
disjfa.nl

zaterdag 6 augustus 2005 17:52

Acties:

0 Henk 'm!

Anoniem: 9542

Cyphax schreef op zaterdag 06 augustus 2005 @ 16:55:
Die enters in je code voegen dus 3 pixels margin toe... hmm.

nee, die voegen een whitespace toe

zaterdag 6 augustus 2005 20:48

Acties:

0 Henk 'm!

Cyphax

Moderator LNX

Anoniem: 9542 schreef op zaterdag 06 augustus 2005 @ 17:52:
[...]

nee, die voegen een whitespace toe

Ja ik zei het verkeerd maar bedoelde het wel goed. Het doet niets met je margin maar het resultaat is dat je of de whitespace moet weghalen of de margin negatief zetten. Voorkeur voor optie 1.

Saved by the buoyancy of citrus

zaterdag 6 augustus 2005 21:37

Acties:

0 Henk 'm!

Zoefff

❤ 

Waarom doe je niet in plaats van display:inline; een float:left;? Dan heb je iig geen last van whitespace voor zover ik weet

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

zaterdag 6 augustus 2005 21:38

Acties:

0 Henk 'm!

Anoniem: 26306

Zoefff schreef op zaterdag 06 augustus 2005 @ 21:37:
Waarom doe je niet in plaats van display:inline; een float:left;? Dan heb je iig geen last van whitespace voor zover ik weet

Waarom zou je iets laten floaten in dit geval? Je moet gewoon zorgen dat er geen whitespace is, want whitespace tussen inline elementen wordt gerenderd als een spatie.

zaterdag 6 augustus 2005 22:48

Acties:

0 Henk 'm!

Cubix

Anoniem: 26306 schreef op zaterdag 06 augustus 2005 @ 21:38:
[...]

Waarom zou je iets laten floaten in dit geval? Je moet gewoon zorgen dat er geen whitespace is, want whitespace tussen inline elementen wordt gerenderd als een spatie.

Omdat het een typisch staaltje block element design is, zo'n menu. Het is geen zin ofzo...

Verder is je code netter.

zaterdag 6 augustus 2005 23:58

Acties:

0 Henk 'm!

prototype

Cheer Bear

Als je het float, dan positioneert het zich toch absoluut (t.o.v. de parent)? Dat kan in een geval niet wenselijk zijn dunkt me zo.

zondag 7 augustus 2005 00:06

Acties:

0 Henk 'm!

eamelink

Droptikkels

Cubix schreef op zaterdag 06 augustus 2005 @ 22:48:Omdat het een typisch staaltje block element design is, zo'n menu. Het is geen zin ofzo...

Jaaaajaaa

code:

1
2
3

#navigation ul li { 
    display: inline;
}

zondag 7 augustus 2005 00:11

Acties:

0 Henk 'm!

Cubix

eamelink schreef op zondag 07 augustus 2005 @ 00:06:
[...]

Jaaaajaaa
code:
1
2
3
#navigation ul li { 
    display: inline;
}

En daarmee ging het fout. Ik sta ook achter de oplossing van Djisfa.

zondag 7 augustus 2005 00:48

Acties:

0 Henk 'm!

Blue-eagle

Slightly offtopic, maar wat is er precies tegen floaten? Heb laatst nog een hele site template gebouwd met bijna alleen maar gefloatte (spelling?) onderdelen, werkt fantastisch met hier en daar een clear, display: block, etc.

zondag 7 augustus 2005 00:49

Acties:

0 Henk 'm!

Anoniem: 67942

Topicstarter

bedankt iedereen voor de input!

zondag 7 augustus 2005 15:27

Acties:

0 Henk 'm!

Anoniem: 9927

http://css.maxdesign.com.au/listamatic/index.htm

Ook handig misschien?

zondag 7 augustus 2005 15:33

Acties:

0 Henk 'm!

Anoniem: 26306

Als een element niet hoeft te floaten (als er geen andere meuk omheen hoeft te flowen). Kun je beter geen float: left; gebruiken. Dit om diverse known bugs in met name Internet Explorer te voorkomen.

In de meeste website genereer je dat menu toch dynamisch (server-side), en is het dus een fluitje van een cent om die whitespace lekker weg te laten.

zondag 7 augustus 2005 18:12

Acties:

0 Henk 'm!

Anoniem: 67942

Topicstarter

ik heb ervoor gekozen om de lijst als 1 regel html te schrijven waardoor het probleem dus opgelost is.

Zie http://www.w3bdesign.nl/navigation/2/

Nu zit ik wel weer met een paar andere problemen.. maar ik weet niet of het toegestaan is om die binnen deze thread te bespreken of dat ik een nieuwe aan moet maken?

het komt er op neer dat de site er naar wens uitziet in IE6 maar eigenaardigheden vertoont in firefox.

zondag 7 augustus 2005 18:41

Acties:

0 Henk 'm!

Anoniem: 23690

Je kan dit toch ook gewoon oplossen door

code:

1	Clear: right;

te doen?
Als het goed is verhelpt die whitespaces.

maandag 8 augustus 2005 01:34

Acties:

0 Henk 'm!

FuriousAngel

Anoniem: 67942 schreef op zondag 07 augustus 2005 @ 18:12:
Nu zit ik wel weer met een paar andere problemen.. maar ik weet niet of het toegestaan is om die binnen deze thread te bespreken of dat ik een nieuwe aan moet maken?

het komt er op neer dat de site er naar wens uitziet in IE6 maar eigenaardigheden vertoont in firefox.

De enige twee bugs die ik zie:

Content en sidebar te ver naar links in FF
De anchors lopen niet mooi door tot onder in het menu

Volgens mij zijn deze zo op te lossen:

IE rekent bij floats een dubbele margin. De margin van 40px die je opgeeft is dus "in het echt" 80 pixels. Dit kan je oplossen door met bijvoorbeeld de underscore hack IE een gehalveerde margin (40px) mee te geven, maar voor andere browsers 80px.
code:
1 2
margin:0 0 0 80px; _margin:0 0 0 40px;
Ik heb geen idee waar dit door komt. Misschien kan iemand anders je daarmee helpen. Wat ik wel gezien heb is dat als je de listitems een border-bottom geeft, je er weinig meer van merkt.
code:
1 2 3
#navigation ul li { border-bottom:1px solid #969; }

Dan krijg je zoiets. Maar nu vraag ik mij af wat die divisions met als inhoud een non-breaking space in de source doen? Zijn die alleen voor de opmaak, of komt er ook nog content in te staan?

offtopic:
Mijn eerste post na een paar jaar meelezen! Ik verveelde me vandaag, dus ik heb geprobeerd je design na te maken in FF en IE6. Als je dit liever niet hebt zal ik hem zsm weer offline halen.

maandag 8 augustus 2005 09:46

Acties:

0 Henk 'm!

Cubix

FuriousAngel schreef op maandag 08 augustus 2005 @ 01:34:
IE rekent bij floats een dubbele margin. De margin van 40px die je opgeeft is dus "in het echt" 80 pixels. Dit kan je oplossen door met bijvoorbeeld de underscore hack IE een gehalveerde margin (40px) mee te geven, maar voor andere browsers 80px.
code:
1
2
margin:0 0 0 80px;
_margin:0 0 0 40px;

Een andere manier (hack) om een dubbele margin bij IE op te lossen:

code:

1	display: inline;

maandag 8 augustus 2005 10:36

Acties:

0 Henk 'm!

Anoniem: 111006

Ik wil het onderwerp niet ontvoeren, maar..

Ik heb hetzelfde probleem, alleen verticaal. Ik wil een menu plaatsen dmv een unordered list en bij voorkeur zonder float (dan explodeert alles in Opera voor Mac). Gaat allemaal goed door het meegeven van een bottom margin van -4px aan de pics in kwestie. FF plaatst opeens een extra pixel whitespace om de twee buttons?!
Nog nooit meegemaakt dit, dus ik ben even in verwarring.

In IE, opera geen probleem. NS & FF vertonen het willekeurige pixelgedrag..

Iemand enig idee, alvast hartelijk dank!

[ Voor 11% gewijzigd door Anoniem: 111006 op 16-08-2005 15:13 ]

maandag 8 augustus 2005 12:20

Acties:

0 Henk 'm!

Zoefff

❤ 

Sluit om te beginnen je <li> tags eens af met </li>

Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

dinsdag 9 augustus 2005 09:38

Acties:

0 Henk 'm!

Anoniem: 67942

Topicstarter

FuriousAngel schreef op maandag 08 augustus 2005 @ 01:34:
[...]

Dan krijg je zoiets.

offtopic:
Mijn eerste post na een paar jaar meelezen! Ik verveelde me vandaag, dus ik heb geprobeerd je design na te maken in FF en IE6. Als je dit liever niet hebt zal ik hem zsm weer offline halen.

FuriousAngel, dankjewel! Werkt perfect! $_/-\o_$

Overigens geen probleem dat je mn design hebt nagemaakt