Toon posts:

[CSS] Verticale padding in horizontale lijst

Pagina: 1
Acties:

woensdag 16 februari 2005 11:16

Acties:

Verwijderd

Topicstarter
of: hoe zorg ik dat een parent herschaalt naar zijn kinderen?

Ik ben een horizontale menubalk aan het maken. Als een brave internetontwikkelaar doe ik dit met CSS, maar dat geeft me weer eens een probleem.

Wat ik wil is een horizontale balk over het hele scherm in een bepaalde kleur, en daarin de menuitems gecentreerd met rollover en aardige padding.

Het probleem zit hem blijkbaar in de padding.

IE rendert zoals ik het wil, met de balk om alle menuitems heen:

Afbeeldingslocatie: http://asmodeus.homeftp.net/~one/share/shot-20050216.111350.gif

In Firefox wordt echter de omsluitende DIV te klein gemaakt en steken de menuitems aan de rand uit:

Afbeeldingslocatie: http://asmodeus.homeftp.net/~one/share/shot-20050216.111504.gif

Wie kan me vertellen waarom dit gebeurt? (en wat ik er aan kan doen :))

Heb ik de size-to-children: enclose property gemist? Is er iets structureels mis met de code? Ben ik gewoon dom?

Help!


Een minimale HTML pagina die het probleem illustreert staat hier.

Dit is de source:

HTML:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<html>
<head>
<style>

#menubar {
  background-color: #D90F0C;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  font-size: 70%;
}

#menubar ul {
  margin: 0;
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

#menubar li {
  display: inline;
  list-style-type: none;
  padding: 0.5em 1.5em;
}

#menubar a {
  font-weight: bold;
  text-decoration: none;
  width: 10em;
  height: 100%;
  padding: 0.5em 1.5em;
}

#menubar a:link, #menubar a:visited {
  color: #FFE65B;
}

#menubar a:hover, #menubar a:active {
  color: White;
  background-color: black;
}
</style>
<body>
<div id="menubar">
<ul>
<li><a href="#">Een</a></li>
<li><a href="#">Twee</a></li>
<li><a href="#">Drie</a></li>
<li><a href="#">Vier</a></li>
</ul>
</div>
</body>
</html>

woensdag 16 februari 2005 11:42

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 14-05 13:29

Sappie

De Parasitaire Capaciteit!

verander:
code:
1

padding: 0.5em 1.5em;

eens in:
code:
1

padding: 0 0.5em 0 1.5em;

Dit lost het uitsteken van de menuitems iig op en zorgt ervoor dat de menubalk even hoog is in FF als in IE

[ Voor 37% gewijzigd door Sappie op 16-02-2005 11:43 ]

Specs | Audioscrobbler

woensdag 16 februari 2005 11:46

Acties:

Verwijderd

Padding aan de boven en onderkant gaat niet met inline elementen. Het eenvoudigst is gewoon de regelhoogte aan te passen, dan kun je de padding achterwege laten. De tekst komt in principe gewoon vertikaal in het midden. Een eenvoudige truc die je ook kunt toepassen met bijvoorbeeld afbeeldingen.

woensdag 16 februari 2005 11:54

Acties:
  • Schonhose
  • Registratie: April 2000
  • Laatst online: 12-05 22:16

Schonhose

Retro Icoon

Ik denk dat het verschil zit in het box-model zit. Ik heb net wat zitten spelen, maar ik krijg het ook niet goed.

Padding levert vaker problemen op.

ik zie dat ik alweer de spuit11 ben :(

[ Voor 29% gewijzigd door Schonhose op 16-02-2005 11:55 ]

"The thing under my bed waiting to grab my ankle isn't real. I know that, and I also know that if I'm careful to keep my foot under the covers, it will never be able to grab my ankle." - Stephen King
Quinta: 3 januari 2005

woensdag 16 februari 2005 11:57

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 14-05 13:29

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op Wednesday 16 February 2005 @ 11:46:
Padding aan de boven en onderkant gaat niet met inline elementen. Het eenvoudigst is gewoon de regelhoogte aan te passen, dan kun je de padding achterwege laten. De tekst komt in principe gewoon vertikaal in het midden. Een eenvoudige truc die je ook kunt toepassen met bijvoorbeeld afbeeldingen.
Raar dan dat FF (zo lijkt het iig) dat wel ondersteund. Is dit dan weer IE die zich niet aan de standaard houdt of FF die meer doet dan de standaard voorschrijft?

Specs | Audioscrobbler

woensdag 16 februari 2005 11:59

Acties:

Verwijderd

Topicstarter
Verwijderd schreef op woensdag 16 februari 2005 @ 11:46:
Het eenvoudigst is gewoon de regelhoogte aan te passen, dan kun je de padding achterwege laten. De tekst komt in principe gewoon vertikaal in het midden. Een eenvoudige truc die je ook kunt toepassen met bijvoorbeeld afbeeldingen.
Bedankt! Daar had ik nooit aan gedacht.

Dit helpt me al iets verder, maar niet helemaal. In IE werkt het nog steeds top, maar Firefox laat nu de hover niet meer tot de rand lopen |:(.

Nieuwe code:

Cascading Stylesheet:
1
2
3
4
5
6
7

#menubar a {
  font-weight: bold;
  text-decoration: none;
  width: 10em;
  padding: 0em 1.5em;
  line-height: 2em;
}


Afbeeldingslocatie: http://asmodeus.homeftp.net/~one/share/shot-20050216.115908.gif

(Die height: 100% hoorde er trouwens niet tussen; dat was een overblijfsel van een vorige poging :))
Verwijderd schreef op woensdag 16 februari 2005 @ 11:46:
Padding aan de boven en onderkant gaat niet met inline elementen.
Kan ik anders block elementen floaten en het geheel toch gecentreerd houden?

woensdag 16 februari 2005 12:11

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 14-05 13:29

Sappie

De Parasitaire Capaciteit!

Volgens zijn width en height geen valide eigenschappen van inline elementen. Ik weet zo ook ff 123 niet hoe ik t op zou lossen.

Specs | Audioscrobbler

woensdag 16 februari 2005 12:16

Acties:

Verwijderd

display: inline-block is daar in principe de oplossing voor, ware het niet dat IE dat alleen ondersteunt voor native inline elementen (dus niet voor li) en Gecko alleen -moz-inline-box accepteert, dus dat gaat hier niet werken

ik zou de li's floaten en de ul een standaard hoogte geven:
http://www.rikkertkoppes.com/thoughts/inline-width

woensdag 16 februari 2005 12:56

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 14-05 13:29

Sappie

De Parasitaire Capaciteit!

code:
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<html>
<head>
<style>

ul#menubar {
  background-color: #D90F0C;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  overflow: hidden;
  width: 100%;
}

ul#menubar li {
  float: left;
}

ul#menubar li a {
  display: block;
  padding: 10px;
  font-weight: bold;
  text-decoration: none;
}

#menubar a:link, #menubar a:visited {
  color: #FFE65B;
}

#menubar a:hover, #menubar a:active {
  color: White;
  background-color: black;
}
</style>
<body>
<ul id="menubar">
  <li><a href="#">Een</a></li>
  <li><a href="#">Twee</a></li>
  <li><a href="#">Drie</a></li>
  <li><a href="#">Vier</a></li>
</ul>

</body>
</html>

Zo werkt het hier ook. De parent <ul>'s hoogte schaalt automatisch mee met de hoogte van de <il> childs. Dit werkt in IE alleen als ik een width opgeef voor de <ul>. Snap dat ook niet en weet niet of je er wat mee kunt :)

edit:
en in FF alleen als je de overflow property definieert, maar dit vind ik ook wel logisch. In IE is de overflow op een of andere manier niet nodig

[ Voor 23% gewijzigd door Sappie op 16-02-2005 12:59 ]

Specs | Audioscrobbler

woensdag 16 februari 2005 13:03

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 13-05 10:16

Zoefff

❤ 

Ik heb het ooit opgelost door #menubar gewoon een absolute grootte mee te geven, dus in px of em. Zie bijvoorbeeld http://zoefff.gotdns.com/emulefaq, in principe hetzelfde menu :)


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

Pagina: 1
Reageer