Toon posts:

<ul> in <div> krijgt spontaan 3px padding-bottom?

Pagina: 1
Acties:

dinsdag 7 juli 2009 08:14

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
Ik ben bezig met een nieuw ontwerpje voor m'n site, en nog een beetje aan het "kleien".
Eerst heel lang op zoek geweest om een <ul>, met submenus, horizontaal en gecentreerd in een div te krijgen. Ik heb nu deels gepositioneerd met javascript, dat gaat heel goed.
In Opera ziet het er nu goed uit, alleen in de rest (FF, IE, Chrome, Safari) heeft de <ul> een padding-bottom. Echter staan alle waardes op 0, en ook in firebug staan er nergens waardes in:
Padding Bottom?
online preview
Zie ik iets over het hoofd?

Testcase:
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

<html>
<head>
<style type="text/css">

div#menu{
    color: #000;
    width:1000px;
    /*height: 150px;*/
    margin:0px;
    /*text-align:center;*/
    /*float:left;*/
    background:#360;
    padding:0px;
    position: relative;
    z-index:2;
    /*margin-bottom: -2000px; 
    padding-bottom: 2000px;
    background:#1050b0;*/
    }

#menu ul {
    list-style: none;
    text-align: center;
    display: inline-block;
    padding: 0px;
    margin:  0px;
    min-width: 100px;
}
/*#menu li ul {
    position: relative;
    list-style: none;
    margin:  -40px;
    margin-left: 130px;
    border: none;
    width: 130px;
    top: -999em;
}*/

#menu li {
        display: inline-block;
        /*position: relative;*/
        float: left;
        margin: 0px;
        padding: 0px;
        height: 30px;
}

#menu li ul{
    position: absolute;
    left: 10px;
    top: -999em;
}
#menu li li{
    display: list-item;
    /*width: 200px;*/
    float: none;
}   
#menu li a{
    display: -moz-inline-box;
    display: inline-block; 
    width:100px; 
    height: 25px;
    padding: 0px;
    padding-top: 8px;
    margin: 0px 2px;
    background-color: yellow; 
    text-decoration:none;
}
        
#menu li a:hover {
background-color: lime;
    }


div.clearboth{clear:both; padding: 0px; margin: 0;}
</style>
</head>
<body>

<div id="menu">
 <ul id="nav">
<li id="nav_2"><a href="./home/">home</a></li>
<li id="nav_7"><a href="./nieuws/">nieuws</a></li>
<li id="nav_20"><a href="./mp3/">mp3</a></li>

<li id="nav_5"><a href="./gastenboek/">gastenboek</a></li>
<li id="nav_6"><a href="./test/">test</a>
    <ul>
        <li><a href="./test/test3/">test3</a></li>
        <li><a href="./test/qwe/">qwe</a></li>
    </ul>
</li>
</ul>
<div id="infodiv" class="clearboth"></div></div>
</body>
</html>

probeer het in de tryit editor

[ Voor 56% gewijzigd door NielsNL op 07-07-2009 08:42 ]

M'n Oma is een site aan het haken.

dinsdag 7 juli 2009 09:45

Acties:
  • 0 Henk 'm!
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 19-09 14:42

T-MOB

Mijn beste gok is dat je vertical-align op de li's moet specificeren.

Ah, ik heb die try-it editor even geprobeerd. Je probleem is iets anders...

[ Voor 38% gewijzigd door T-MOB op 07-07-2009 09:49 . Reden: Het was onzin ]

Regeren is vooruitschuiven

dinsdag 7 juli 2009 09:49

Acties:
  • 0 Henk 'm!
  • Yoki1985
  • Registratie: Augustus 2007
  • Laatst online: 19-09 08:07

Yoki1985

Om een li horizontaal uit te lijnen kun je ipv display: inline-block; ook float:left gebruiken dacht ik.

Maakt je positionering makkelijker want dan hoef je geen js te gebruiken

//edit: mmhh je maakt het jezelf wel heel moeilijk heb ik zo de indruk :?

//edit2: Als ik deze code uitvoer blijven de knoppen binnen de groene balk:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<html>
<head>
<style type="text/css">

div#menu{
    float:left;
    color: #000;
    width:1000px;
    /*height: 150px;*/
    margin:0px;
    /*text-align:center;*/
    /*float:left;*/
    background:#360;
    padding:0px;
    position: relative;
    z-index:2;
    /*margin-bottom: -2000px; 
    padding-bottom: 2000px;
    background:#1050b0;*/
    }

#menu ul {
    list-style: none;
    text-align: center;
    float:left;
    padding: 0px;
    margin:  0px;
    min-width: 100px;
}
/*#menu li ul {
    position: relative;
    list-style: none;
    margin:  -40px;
    margin-left: 130px;
    border: none;
    width: 130px;
    top: -999em;
}*/

#menu li {
        /*display: inline-block;
        position: relative;*/
        float: left;
        margin: 0px;
        padding: 0px;
        height: 30px;
}

#menu ul li ul{
    position: absolute;
    left: 10px;
    top: -999em;
}
#menu ul li ul li{
    display: list-item;
    /*width: 200px;*/
    float: none;
}    
#menu li a{
    display: -moz-inline-box;
    display: inline-block; 
    width:100px; 
    height: 20px;
    padding: 0px;
    padding-top: 8px;
    margin: 0px 2px;
    background-color: yellow; 
    text-decoration:none;
}
        
#menu li a:hover {
background-color: lime;
    }


div.clearboth{clear:both; padding: 0px; margin: 0;}
</style>
</head>
<body>

<div id="menu">
    <ul id="nav">
        <li id="nav_2"><a href="./home/">home</a></li>
        <li id="nav_7"><a href="./nieuws/">nieuws</a></li>
        <li id="nav_20"><a href="./mp3/">mp3</a></li>
        <li id="nav_5"><a href="./gastenboek/">gastenboek</a></li>
        <li id="nav_6"><a href="./test/">test</a>
            <ul>
                <li><a href="./test/test3/">test3</a></li>
                <li><a href="./test/qwe/">qwe</a></li>
            </ul>
        </li>
    </ul>
    <div id="infodiv" class="clearboth"></div>
</div>
</body>
</html>

[ Voor 96% gewijzigd door Yoki1985 op 07-07-2009 09:57 ]

dinsdag 7 juli 2009 09:54

Acties:
  • 0 Henk 'm!
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 19-09 14:42

T-MOB

Doh, je li specifeert je LI op 30px hoog en je link is 25px hoog plus 8px padding-top. Dat de boel 3px uitsteekt heb je dus zelf opgegeven.

Regeren is vooruitschuiven

dinsdag 7 juli 2009 09:56

Acties:
  • 0 Henk 'm!
  • Yoki1985
  • Registratie: Augustus 2007
  • Laatst online: 19-09 08:07

Yoki1985

Inderdaad had ik ook opgemerkt

dinsdag 7 juli 2009 14:30

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
T-MOB schreef op dinsdag 07 juli 2009 @ 09:54:
Doh, je li specifeert je LI op 30px hoog en je link is 25px hoog plus 8px padding-top. Dat de boel 3px uitsteekt heb je dus zelf opgegeven.
Ja, dat zag ik ook, maar pas in de testcase, als ik dat weghaal ben ik van die 3px af...
30 - 25 is overigens 5px :P
Echter op m'n site zelf blijft die 3px. :(
Ik ga weer eens verder kijken...
Het blijft overigens raar dat het in Opera gewoon werkt, en dat FF niet precies aangeeft waarom hij de div te hoog maakt. :S Maar ach, daarom is dit subforum ook zo druk bezocht. :P
yoki2007 schreef op dinsdag 07 juli 2009 @ 09:49:
[...]
//edit: mmhh je maakt het jezelf wel heel moeilijk heb ik zo de indruk :?
[...]
Dat klopt, maar het blijkt niet eenvoudig te zijn om een horizontale <ul> te centreren én submenus erbij te gebruiken. En aangezien ik tóch al gebruik ga maken van jquery, kan ik daar ook m'n menu mee verfraaien.

[ Voor 24% gewijzigd door NielsNL op 07-07-2009 14:35 ]

M'n Oma is een site aan het haken.

dinsdag 7 juli 2009 14:40

Acties:
  • 0 Henk 'm!
  • edeboeck
  • Registratie: Maart 2005
  • Laatst online: 11-09 13:47

edeboeck

mie noow noooothing ...

NielsNL schreef op dinsdag 07 juli 2009 @ 14:30:
...30 - 25 is overigens 5px :P
...
25+8-30=3 >:)

dinsdag 7 juli 2009 14:40

Acties:
  • 0 Henk 'm!
  • Yoki1985
  • Registratie: Augustus 2007
  • Laatst online: 19-09 08:07

Yoki1985

NielsNL schreef op dinsdag 07 juli 2009 @ 14:30:
...
30 - 25 is overigens 5px :P
...
ja maar (25+8)-30 = 3

//edit: net te laat :P

[ Voor 6% gewijzigd door Yoki1985 op 07-07-2009 14:41 ]

dinsdag 7 juli 2009 14:42

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
Doh. :+
Ik zit nu even niet op m'n eigen PC, en heb alleen de beschiking over IE8, en als ik daar enkel display: inline-block uitschakel (met de ontwikkel-tool), is het goed. Strax ff proberen, als ik weer thuis ben. :P

M'n Oma is een site aan het haken.

dinsdag 7 juli 2009 15:04

Acties:
  • 0 Henk 'm!
  • Yoki1985
  • Registratie: Augustus 2007
  • Laatst online: 19-09 08:07

Yoki1985

Ik heb een eenvoudigere testcase gemaakt waar je ook een horizontaal menu hebt met submenus

Echter heb je hier geen position absolute waardoor de kans op verkeer interpreteren ook een HEEEL pak kleiner is:

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<html>
    <head>
        <style type="text/css">
            ul
            {
                margin:0px;
                padding:0px;
            }
            
            ul li
            {
                float:left;
                list-style:none;
                padding-left:5px;
                padding-right:5px;
                padding-top:10px;
                text-align:center;
            }
            
            ul li a:link, ul li a:active, ul li a:visited
            {
                display:block;
                width: 75px;
                height:35px;
                background-color:yellow;
            }
            
            ul li a:hover
            {
                display:block;
                width: 75px;
                height:35px;
                background-color:orange;
            }
            
            ul li ul
            {
                margin:0px;
                padding:0px;
            }
            
            ul li ul li
            {
                list-style:none;
            }
        </style>
        
        <script type="text/javascript">
            function showsubmenu(SubmenuID)
            {
                switch (SubmenuID) {
                    case 1:
                    default:
                        document.getElementById("divSubmenu1").style.display = "block";
                        break;
                    case 2:
                        document.getElementById("divSubmenu2").style.display = "block";
                        break;
                }
            }
            
            function hidesubmenu(SubmenuID)
            {
                switch (SubmenuID) {
                    case 1:
                    default:
                        document.getElementById("divSubmenu1").style.display = "none";
                        break;
                    case 2:
                        document.getElementById("divSubmenu2").style.display = "none";
                        break;
                }
            }
        </script>
    </head>
    
    <body>
        <div style="margin:auto; width:800px; height:50px; background-color:green;">
            <div style="margin:auto; width:170px; height:50px;">
                <ul>
                    <li onmouseover="showsubmenu(1);" onmouseout="hidesubmenu(1);">
                        <div style="float:left;">
                            <div style="float:left;">
                                <a href="test.html">test</a>
                            </div>
                            <div style="clear:both;"></div>
                            <div id="divSubmenu1" style="float:left; display:none;">
                                <ul>
                                    <a href="test.html">Subtest</a>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li onmouseover="showsubmenu(2);" onmouseout="hidesubmenu(2);">
                        <div style="float:left;">
                            <div style="float:left;">
                                <a href="test.html">test2</a>
                            </div>
                            <div style="clear:both;"></div>
                            <div id="divSubmenu2" style="float:left; display:none;">
                                <ul>
                                    <a href="test.html">Subtest2</a>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

dinsdag 7 juli 2009 15:06

Acties:
  • 0 Henk 'm!
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 19-09 14:42

T-MOB

Mja, als je testcase niet hetzelfde is als online...

Maar goed, wat het voor je oplost is dus toch de vertical-align. Inline-block-elementen hebben daar mee te maken en blijkbaar is de default van opera wel geschikt voor jouw situatie en die van de andere browsers niet. Als je de ul#nav vertical-align: top; meegeeft dan ben je de ruimte kwijt.

Regeren is vooruitschuiven

dinsdag 7 juli 2009 17:35

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
T-MOB schreef op dinsdag 07 juli 2009 @ 15:06:
Mja, als je testcase niet hetzelfde is als online...

Maar goed, wat het voor je oplost is dus toch de vertical-align. Inline-block-elementen hebben daar mee te maken en blijkbaar is de default van opera wel geschikt voor jouw situatie en die van de andere browsers niet. Als je de ul#nav vertical-align: top; meegeeft dan ben je de ruimte kwijt.
Testcase is een testcase, ik heb dus de overbodige dingen weggeknipt, soms is dat teveel... :)

Cascading Stylesheet:
1

ul#nav vertical-align: top;
Je bent mijn held! Daar was ik zomaar niet opgekomen...

M'n Oma is een site aan het haken.

dinsdag 7 juli 2009 18:06

Acties:
  • 0 Henk 'm!
  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48

mcDavid

Nu nog "margin:0 auto" en je hebt ook geen javascript meer nodig voor je layout.

dinsdag 7 juli 2009 20:09

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
mcDavid schreef op dinsdag 07 juli 2009 @ 18:06:
Nu nog "margin:0 auto" en je hebt ook geen javascript meer nodig voor je layout.
Als het allemaal zo makkelijk zou zijn, zou ik hier niet posten, dit is meestal mijn last resort als ik hier met een vraag kom. :)
Voor de zekerheid wél even geprobeerd, werkt niet.
Iets met inline-block en zo...
Ik ben stiekem wel benieuwd hoe chem dat hier heeft gedaan met het menu, want die's óók strak...

[ Voor 22% gewijzigd door NielsNL op 07-07-2009 20:13 ]

M'n Oma is een site aan het haken.

dinsdag 7 juli 2009 21:06

Acties:
  • 0 Henk 'm!
  • mcDavid
  • Registratie: April 2008
  • Laatst online: 09-09 17:48

mcDavid

NielsNL schreef op dinsdag 07 juli 2009 @ 20:09:
[...]

Als het allemaal zo makkelijk zou zijn, zou ik hier niet posten, dit is meestal mijn last resort als ik hier met een vraag kom. :)
Voor de zekerheid wél even geprobeerd, werkt niet.
Iets met inline-block en zo...
Ik ben stiekem wel benieuwd hoe chem dat hier heeft gedaan met het menu, want die's óók strak...
Niemand weerhoud je ervan om even op F12 te drukken ;)

ik mag aannemen dat je firebug geinstalleerd hebt

woensdag 8 juli 2009 09:01

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
Kijk maar in m'n screenshot.

Firebug laat dan weer niet zien hoe die divjes van de groupnav -- style="left: 239px;" -- meekrijgen.
Zo te zien ook met javascript, op het moment dat ik javascript uitzet, werkt het hoveren van het menu niet meer, en staan alle groupnav divjes links.
Ik denk dat mijn manier nog niet eens zo gek is...

M'n Oma is een site aan het haken.

woensdag 8 juli 2009 15:56

Acties:
  • 0 Henk 'm!
  • Da Weef
  • Registratie: Januari 2004
  • Laatst online: 15-09 09:16

Da Weef

De positie lijkt inderdaad door javascript gegenereert op Tweakers, maar aangezien elke groupnav div zijn eigen id heeft, had dit ook in CSS gekund...

Ik heb trouwens wel een keer een menu gebouwd met ongeveer dezelfde functionaliteit als het Tweakers menu volledig met css. Grootste probleem hierbij is dat het met pure CSS niet mogelijk is om andere elementen te beïnvloeden dan het actieve (gehoverde) element.

Ik had dit toen opgelost door ervoor te zorgen dat dynamische submenu's volledig (dekkend) over de statische submenu's heen vielen.

Dit is uiteraard enkel praktisch wanneer je vaste breedtes gebruikt voor het hoofdmenu.

Bovendien heb je voor mooie vertragingen etc, natuurlijk wel javascript nodig. Welke je ook over een puur css menu heen zou kunnen bouwen natuurlijk, maargoed wie heeft er tegenwoordig geen javascript draaiend???

.

woensdag 8 juli 2009 17:53

Acties:
  • 0 Henk 'm!
  • ZpAz
  • Registratie: September 2005
  • Laatst online: 22:44

ZpAz

editz, nvm.

[ Voor 83% gewijzigd door ZpAz op 08-07-2009 17:53 ]

Tweakers Time Machine Browser Extension | Chrome : Firefox

vrijdag 10 juli 2009 13:40

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
Nog zo'n leuk dingetje met verschillende browsers:
Browser madness
(nog) Geen hulp nodig deze keer, maar ik wilde het even laten zien.

M'n Oma is een site aan het haken.

vrijdag 10 juli 2009 14:04

Acties:
  • 0 Henk 'm!
  • Manuel
  • Registratie: Maart 2008
  • Laatst online: 19-09 11:12

Manuel

Dan kan ik je aanraden om even een standaard font per CSS in te stellen :)

zaterdag 11 juli 2009 12:08

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
Manueltje22 schreef op vrijdag 10 juli 2009 @ 14:04:
Dan kan ik je aanraden om even een standaard font per CSS in te stellen :)
Dat had ik wel gedaan maar 0.5em, en 8px is verschillend per browser. :X
0.65em ziet er in alle browsers hetzelfde uit.
Ook heb ik de letter-spacing -0.5px gegeven, firefox liet het wat aan de brede kant zien.
Op verzoek wil ik wel een nieuwe screenshot maken.

Is er een lettertype dat er overal hetzelde uitziet?

[ Voor 7% gewijzigd door NielsNL op 11-07-2009 12:55 . Reden: typo ]

M'n Oma is een site aan het haken.

zaterdag 11 juli 2009 20:43

Acties:
  • 0 Henk 'm!
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 19-09 14:42

T-MOB

In sommige browsers kun je een miminumfontgrootte instellen. Mijn Iceweasel rendert geen font kleiner dan 10px. Ik vind het namelijk prettig om tekst op een website ook echt te kunnen lezen...

Als je webpagina's maakt zul je er mee moeten leven dat je eigenlijk alleen rendersuggestie doet. Je weet nooit of een bezoeker de lettertypes uit je CSS wel op zijn computer heeft. Daarnaast kunnen bezoekers (of de browser van de bezoekers) nog allerlhande custom stijldingen met je pagina uithalen. Nokiabrowser maakt een tekstvak bijvoorbeeld altijd zo smal als het scherm van de telefoon zodat je niet heen en weer hoeft te scrollen om de boel te lezen.
Wil je de ervaring van de gebruiker tot op de pixel controleren dan is HTML/CSS niet zo'n handig instrument. Je kunt dan beter flash gebruiken.

Qua fonts is het verder aan te raden om binnen de Microsoft Core fonts for the web te blijven. Dat zijn fonts die praktische iedereen op zijn computer heeft. Verder maak je tekst beter niet te klein, dat leest vervelend en je kunt er niet van uitgaan dat browsers er in meegaan.

Tot slot nog wat over pixels... vooralsnog zijn die ondeelbaar. De letterspacing kun je gerust op -1px zetten ;)

Regeren is vooruitschuiven

zondag 12 juli 2009 11:26

Acties:
  • 0 Henk 'm!
  • NielsNL
  • Registratie: Januari 2002
  • Laatst online: 08-09 20:14

NielsNL

DigiCow

Topicstarter
T-MOB schreef op zaterdag 11 juli 2009 @ 20:43:
[...]
Tot slot nog wat over pixels... vooralsnog zijn die ondeelbaar. De letterspacing kun je gerust op -1px zetten ;)
Dat heb ik eerst geprobeerd, -1px, en toch ziet dat er anders uit als -0.5px, hoe stom het ook klinkt. :+
Fonts zijn afaik opgebouwd uit vectoren, ik denk dat je daarom best met een half pixeltje kunt spelen. :P
En zo te zien ben ik niet de enige. :P

[ Voor 6% gewijzigd door NielsNL op 13-07-2009 01:25 ]

M'n Oma is een site aan het haken.

Pagina: 1
Reageer

Apple iPhone 16e LG OLED evo G5 Google Pixel 10 Samsung Galaxy S25 Star Wars: Outlaws Nintendo Switch 2 Apple AirPods Pro (2e generatie) Sony PlayStation 5 Pro

Tweakers is onderdeel van DPG Media B.V.
Alle rechten voorbehouden - Auteursrecht © 1998 - 2025 • Hosting door TrueFullstaq