Toon posts:

[CSS] Probleem met menu-achtergrond

Pagina: 1
Acties:

woensdag 31 januari 2007 09:58

Acties:

Verwijderd

Topicstarter
Beste Tweakers,

Ik ben vrij nieuw met dit CSS gebeuren en misschien is het alleen daarom wel dat ik er niet uitkom, maar heb tot dusver geen oplossing gevonden met Google die voor mij werkte.

Mijn probleem is als volgt:

Ik heb een horizontaal XHTML/CSS menu, waarbij ik een categorie standaard wil laten zien.
Tot zover geen probleem.
Wat alleen nu wel vervelend is, is dat ik als ik over andere menu items hover, die tekst gaat overlappen met het permanente gedeelte en dus onleesbaar wordt.
Ik heb dit geprobeerd op te lossen door een achtergrond achter de overige items te plaatsen die groot genoeg is om het permanente gedeelte te overlappen. Het nadeel is alleen dat mijn items dan ook over dat hele lange stuk worden uitgerekt.

Ik kan jammer genoeg nu even niets hosten dus ik plak de menu code hieronder, en ik hoop dat jullie mij in de juiste richting kunnen duwen. Het is misschien iets heel eenvoudigs, maar ik heb er al een aantal keren mee geworsteld waarbij ik uiteindelijk op niets uitkwam.

Cascading Stylesheet:
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

 #menu {
    margin: 0;
    padding: 0;
    height: 80px;
    width: 76px;
    font: bold 11px/16px arial, helvetica, sans-serif #000;
}
#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font: bold 11px/16px arial, helvetica, sans-serif #000;
}
#menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    color: #000;
    display: block;
    margin: 0;
    padding: 2px 3px;
}
#menu h2 {
    color: #fff;
    text-transform: uppercase;
}
#menu a {
    text-decoration: none;
    font: bold 11px/16px arial, helvetica, sans-serif #000;
}
#menu a:hover {
    color: #a00;
}
#menu li {
    position: relative;
}
#menu ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
}
div#menu ul  ul, div#menu ul  li:hover  ul {
    display: none;
}
div#menu ul ul.on {
    display: block;
}
div#menu ul  li:hover ul, div#menu ul  ul li:hover ul {
    display: block;
    z-index: 6000;
}
#menu li.off ul, #menu li.on ul {
    position: absolute;
    left: 0;
    height: 150px;
    width: 105px;
    padding-left: 74px;
}


Mocht het nog nodig zijn, hier is de HTML met een extra stukje zodat het in IE ook goed werkt.

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

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" media="all" type="text/css" href="menu.css" />
    <!--[if IE]><style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;}</style><![endif]-->
    <!--[if lt IE 7]><style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li {float: left; width: 100%; } #menu ul li a {height: 1%; } #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; }</style><![endif]-->
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title>
    </title>
  </head>
  <body>
    <div id="menu">
      <ul>
        <li class="off">
          <a href="#">home</a>
          <ul class="uit">
            <li>
            <a href="">nieuws</a></li>
      </ul></li>
      <li class="off">
        <a href="#">optie 2</a>
        <ul class="uit">
          <li>
          <a href="">keuze a</a></li>
      </ul></li>
      <li class="off">
        <a href="">optie 3</a>
        <ul class="on">
          <li>
          <a href="">keuze a</a></li>
      <li>
      <a href="">keuze b</a></li>
      <li>
      <a href="">keuze c</a></li>
      <li>
      <a href="">keuze d</a></li>
      <li>
      <a href="">keuze e</a></li>
      <li>
      <a href="">keuze f</a></li>
      </ul></li>
      <li class="off">
        <a href="#">optie 4</a>
        <ul class="uit">
          <li>
          <a href="">keuze a</a></li>
      <li>
      <a href="">keuze b</a></li>
      <li>
      <a href="">keuze c</a></li>
      </ul></li>
      <li class="off">
        <a href="#">optie 5</a>
        <ul class="uit">
          <li>
          <a href="">keuze a</a></li>
      </ul></li>
      <li class="off">
        <a href="#">optie 6</a>
        <ul class="uit">
          <li>
          <a href="">keuze a</a></li>
      <li>
      <a href="">keuze b</a></li>
      <li>
      <a href="">keuze c</a></li>
      </ul></li>
      </ul>
    </div>
  </body>
</html>


Ik hoop dat jullie hier wat mee kunnen of mij in de juiste richting kunnen sturen.

Alvast bedankt!

woensdag 31 januari 2007 11:32

Acties:
  • Rekcor
  • Registratie: Februari 2005
  • Laatst online: 08-10 13:03

Rekcor

Ik heb jouw code geprobeerd, maar bij mij doet het menu het niet echt goed (FF2.0 / IE 7)

Alleen als ik over 'home' en 'optie2' hover, komt er (soms) een submenuutje tevoorschijn...

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
112
113
114
115
116
117
118
119
120
121
122
123

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <link rel="stylesheet" media="all" type="text/css" href="menu.css" /> 
    <!--[if IE]><style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;}</style><![endif]--> 
    <!--[if lt IE 7]><style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li {float: left; width: 100%; } #menu ul li a {height: 1%; } #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; }</style><![endif]--> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title> 
    </title> 
  </head> 
  <body> 

<style>
#menu { 
    margin: 0; 
    padding: 0; 
    height: 80px; 
    width: 76px; 
    font: bold 11px/16px arial, helvetica, sans-serif #000; 
} 
#menu ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    font: bold 11px/16px arial, helvetica, sans-serif #000; 
} 
#menu a, #menu h2 { 
    font: bold 11px/16px arial, helvetica, sans-serif; 
    color: #000; 
    display: block; 
    margin: 0; 
    padding: 2px 3px; 
} 
#menu h2 { 
    color: #fff; 
    text-transform: uppercase; 
} 
#menu a { 
    text-decoration: none; 
    font: bold 11px/16px arial, helvetica, sans-serif #000; 
} 
#menu a:hover { 
    color: #a00; 
} 
#menu li { 
    position: relative;
    border: 1px solid black; 
} 
#menu ul ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 
    width: 100%; 
} 
div#menu ul  ul, div#menu ul  li:hover  ul { 
    display: none; 
} 
div#menu ul ul.on { 
    display: block; 
} 
div#menu ul  li:hover ul, div#menu ul  ul li:hover ul { 
    display: block; 
    z-index: 6000; 
} 
#menu li.off ul, #menu li.on ul { 
    position: absolute; 
    left: 0; 
    height: 150px; 
    width: 105px; 
    padding-left: 74px; 
}</style>

<div id="menu"> 
  <ul> 
    <li class="off"> 
      <a href="#">home</a> 
      <ul class="uit"> 
        <li><a href="">nieuws</a></li> 
      </ul>
    </li> 
    <li class="off"> 
      <a href="#">optie 2</a> 
      <ul class="uit"> 
        <li><a href="">keuze a</a></li> 
      </ul>
    </li> 
    <li class="off"> 
      <a href="">optie 3</a> 
      <ul class="on"> 
        <li><a href="">keuze a</a></li> 
        <li><a href="">keuze b</a></li> 
        <li><a href="">keuze c</a></li> 
        <li><a href="">keuze d</a></li> 
        <li><a href="">keuze e</a></li> 
        <li><a href="">keuze f</a></li> 
      </ul>
    </li> 
    <li class="off"> 
      <a href="#">optie 4</a> 
      <ul class="uit"> 
        <li><a href="">keuze a</a></li> 
        <li><a href="">keuze b</a></li> 
        <li><a href="">keuze c</a></li> 
      </ul>
    </li> 
    <li class="off">
      <a href="#">optie 5</a> 
      <ul class="uit"> 
        <li><a href="">keuze a</a></li> 
      </ul>
    </li> 
    <li class="off"> 
      <a href="#">optie 6</a> 
      <ul class="uit"> 
        <li><a href="">keuze a</a></li> 
        <li><a href="">keuze b</a></li> 
        <li><a href="">keuze c</a></li> 
      </ul>
    </li> 
  </ul> 
 </div>
</body> 
</html>

woensdag 31 januari 2007 11:41

Acties:
  • moozzuzz
  • Registratie: Januari 2005
  • Niet online

moozzuzz

Aangezien servers meestal geen XHTML uitsturen en IE geen XHTML rendert lijkt het me eigenlijk zinloos voor het XHTML-doctype te gaan (waar staat dat doctype overigens?).

Het 'uitgerekte' items probleem heb ik ooit ook es gehad met een Suckerfish, ik geloof dat het oa ligt aan de breedte in je #menu ul ul. Probeer eventueel even hier de CSS te doorploegen.

woensdag 31 januari 2007 14:17

Acties:

Verwijderd

Topicstarter
Bedankt voor de replies. Het viel mij net ook op dat het menu op deze manier alleen per abuis werkt, ik was vergeten een .htc bestand erbij te doen, die het hele hovergebeuren voor IE moest regelen.

Ik heb hem onderhand gehost:

http://www.lekkerlijnen.nl/test/

Hij doet het bij mij nu in IE 7.0 wel goed, en FF 2.0 af en toe (weet nog niet waar dat aan ligt).

Als je een webdeveloper toolbar hebt oid kan je ook wel makkelijk de bron en de CSS lezen, ook al is die identiek aan wat hier boven gepost staat (op het doctype na wat moozzuzz al opmerkte).

@moozzuzz: ik had de doctype weggelaten inclusief het meta gedeelte, want dat leek me niet heel relevant voor dit probleem (misschien toch wel?).
En ik heb gekozen voor XHTML omdat dat stricter is dan gewoon HTML en ik toch geen gebruik wil maken van HTML versieringen en puur voor de CSS wil gaan.

woensdag 31 januari 2007 16:56

Acties:
  • moozzuzz
  • Registratie: Januari 2005
  • Niet online

moozzuzz

Een online voorbeeldje doet altijd wonderen (kan ik het me beter voorstellen :^). Wellicht heb je gewoon last van (een bugje?) in IE ivm deze hover-actie (heb dit overigens ook al gehad met content en vooral content met een achtergrond) :

Ik vrees voor jou dat het ligt aan:
Omdat optie 4 'lager' staat in je code dan optie 3 plaatst de browser dit bij absolute positioning steeds erbovenop.

Probeer ook es zonder htc, maar volgens de (al dan niet Son Of) Suckerfish methode.

Het al dan niet werken kan liggen aan het feit dat er een of meerdere pixels liggen tussen het submenu en het hoofdmenu. Voor de browser komt dit dan neer op niet meer hoveren van het hoofdmenu en dus het verbergen van het submenu.

donderdag 1 februari 2007 23:22

Acties:

Verwijderd

Topicstarter
Ik ben dan bang dat ik het menu opnieuw moet gaan maken volgens die Suckerfish methode. Ik hoop dat dat beter gaat werken dan. In ieder geval bedankt voor de replies, en ik laat het wel weten of het gelukt is.

vrijdag 2 februari 2007 10:18

Acties:
  • moozzuzz
  • Registratie: Januari 2005
  • Niet online

moozzuzz

Succes!

Ik heb er vaak ook problemen mee en het enige dat helpt is dan stuk per stuk de CSS opnieuw bouwen (evt. met borders en indicatieve backgroundcolors om te zien wat welk effect heeft).
Pagina: 1
Reageer

Apple iPhone 17 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