MySQL en CSS submenu lukt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Christian Snijders

Christian Snijders

29/04/2011 10:35:10
Quote Anchor link
Hallo momenteel ben ik bezig met een submenu,
dit lukt me niet, je kan hem vinden op: http://projecten.chaterzwebdesign.nl/marliesprins//?p=Home

De submenuutjes moeten onder de juiste knoppen komen te hangen, wat doe ik fout?
dit is de css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
#container .menu{

    background-image:url(menu.png);
    height:37px;

}
#container .content{

    padding:5px;

}
.menu a{

    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    padding:10px;
    padding-top:10px;
    float:left;
    border-left:1px solid #8bb1d9;
    border-right:1px solid #a7bed4;
    text-decoration:none;

}
.menu a:hover{

    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
    padding:10px;
    padding-top:10px;
    float:left;
    border-left:1px solid #8bb1d9;
    border-right:1px solid #a7bed4;
    text-decoration:none;
    background-image:url(menuhover.png);


}
.submenu{

    display:none;
    background-color:#ededed;
    width:180px;
    float:left;
    margin-top:37px;
    position:fixed;

}
.submenu a{

    border:0px;
    font-size:11px;
    font-weight:normal;
    color:#000000;
    text-align:left;
    border-bottom:1px solid #e0e0e0;
    display:block;
    width:160px;

}
.clear{

    clear:both;
    margin:0px;
    padding:0px;
    height:0px;

}


dit is de php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
$userquery = mysql_query("SELECT * FROM `cwdcms_pages` WHERE `inmenu` = 'Y' AND `submenu` = '' ORDER BY `menusorted` ");
while($data = mysql_fetch_array($userquery)){
if($data['module'] != "Y"){
$act = "p";
}
else{
$act="scr";
}
print "<div><a href='?".$act."=".$data['pagename']."' onmouseover=\"submenu('sub-".$data['id']."')\">".$data['pagetitle']."</a><div class='submenu' onmouseout=\"submenu('sub-".$data['id']."')\" id='sub-".$data['id']."'>";
$userquery1 = mysql_query("SELECT * FROM `cwdcms_pages` WHERE `inmenu` = 'Y' AND `submenu` = '".$data['id']."' ORDER BY `menusorted` ");
while($data1 = mysql_fetch_array($userquery1)){
if($data1['module'] != "Y"){
$act = "p";
}
else{
$act="scr";
}
print "<a href='?".$act."=".$data1['pagename']."'>» ".$data1['pagetitle']."</a>";
}
print "</div></div>";
}
?>
Gewijzigd op 29/04/2011 10:35:47 door Christian Snijders
 
PHP hulp

PHP hulp

19/04/2024 17:16:09
 
- Ariën -
Beheerder

- Ariën -

29/04/2011 10:41:20
Quote Anchor link
Volstaat ook om de HTML te geven i.p.v. de PHP.

Ik zie overigens dat je DIV'jes gebruikt, waarom niet een genestte list (<ul> en <li>) ?
Gewijzigd op 29/04/2011 10:41:47 door - Ariën -
 
Christian Snijders

Christian Snijders

29/04/2011 10:48:12
Quote Anchor link
- Aar - op 29/04/2011 10:41:20:
Volstaat ook om de HTML te geven i.p.v. de PHP.

Ik zie overigens dat je DIV'jes gebruikt, waarom niet een genestte list (<ul> en <li>) ?


Aangezien ik die een betere style kon geven zonder teveel code.
maar ik zit dus met het probleem dat hij de submenu's niet netjes onder de buttons hangt
 
- Ariën -
Beheerder

- Ariën -

29/04/2011 10:53:24
Quote Anchor link
Met list is het veel makkelijker. Geloof me...

Als je de eerste ul een float left meegeeft, dan heb je al de menukoppen..
Als je dan een nieuw li menu nest, staat die al op de juiste plaats. Alleen dan nog wat styling toevoegen en de hovers en klaar is Christian.
Gewijzigd op 29/04/2011 10:54:23 door - Ariën -
 
Christian Snijders

Christian Snijders

29/04/2011 11:38:04
Quote Anchor link
ik wil geen lists gebruiken, ik wil de submenuutjes netjes onder de knop laten komen
 
- Ariën -
Beheerder

- Ariën -

29/04/2011 11:49:59
Quote Anchor link
waarom geen lists?

Een menu is in feite toch een lijst? Dus wat houdt je tegen?
Gewijzigd op 29/04/2011 11:52:06 door - Ariën -
 
Christian Snijders

Christian Snijders

29/04/2011 11:53:05
Quote Anchor link
ik bedoel ik wil geen <li> gebruiken, vind ik slordig.
maar hoe krijg ik ingodsnaam voor elkaar hem precies onder de button te zetten?
 
Gerhard l

gerhard l

29/04/2011 11:55:50
Quote Anchor link
dan mag je mij uitleggen waarom <li> slordig is
 
- Ariën -
Beheerder

- Ariën -

29/04/2011 12:37:18
Quote Anchor link
Ben er ook wel benieuwd naar. Semantisch gezien is list het enigste wat jiust is, en het werkt een stuk makkelijker dan het kloten met divjes, en postities.
 
Christian Snijders

Christian Snijders

29/04/2011 13:56:59
Quote Anchor link
- Aar - op 29/04/2011 10:53:24:
Met list is het veel makkelijker. Geloof me...

Als je de eerste ul een float left meegeeft, dan heb je al de menukoppen..
Als je dan een nieuw li menu nest, staat die al op de juiste plaats. Alleen dan nog wat styling toevoegen en de hovers en klaar is Christian.


Geef eens een voorbeeld van dat menu met mijn gedeelte code erin, kijken oft wat is.
 
Daniel O

Daniel O

29/04/2011 15:21:37
Quote Anchor link
+1 voor de ul/li oplossing.
Je kunt zelfs een hoop javascript vermijden door de submenu's te nesten in de <li> en dan de :hover subclass te gebruiken om het submenu te tonen. Er zijn zat voorbeelden van te vinden, kijk bijv ff op http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm of http://pixelspread.com/blog/289/css-drop-down-menu (met uitleg)
 
Roger Keulen

Roger Keulen

29/04/2011 18:34:42
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
.clear{

    clear:both;
    margin:0px;
    padding:0px;
    height:0px;

}



Uhhhm, kun je niet gewoon eerlijk vertellen dat je een CSV gestolen hebt en hem nu zo kapot hebt gemaakt. En geeeeeeen idee hebt hoe hij werkt.

De code die je bent vergeten te verwijderen is speciaal voor een bepaalde Bug...


Groetjes: Lucifer.

PS: Probeer eerst eens zelf wat te maken, voordat je complexe dingen gaat aanpassen.
Dus eerst gewoon doen wat AAR zegt....

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<div id="nav" class="container_12 rounded">
      <ul class="sf-menu">
        <li class="first-item"><a href="index.php?URL=0:START" style="border-left:none;">Start</a></li>
    <li> <a href="index.php?URL=0:WIE_ZIJN_WIJ" class="sf-with-ul">Informatie<span class="sf-sub-indicator"> </span></a>
      <ul>

       <li><a href="index.php?URL=0:WIE_ZIJN_WIJ" style="border-left:none;">Wie zijn wij</a></li>
       <li><a href="index.php?URL=0:WAT_DOEN_WIJ" style="border-left:none;">Wat doen wij</a></li>
       <li><a href="index.php?URL=0:ONTSTAAN_NIEUWE_REIZEN" style="border-left:none;">Ontstaan nieuwe reizen</a></li>
       <li><a href="index.php?URL=0:LID_WORDEN" style="border-left:none;">Lid worden</a></li>
       <li><a href="index.php?URL=0:CONTACT" style="border-left:none;">Contact</a></li>
       <li><a href="index.php?URL=0:ADRES_BIJEENKOMSTEN" style="border-left:none;">Adres bijeenkomsten</a></li>
       <li><a href="index.php?URL=0:CAMPING_GIDS" style="border-left:none;">Camping Gids</a></li>
       <li><a href="index.php?URL=0:LINKS" style="border-left:none;">Links</a></li>  
      </ul>
    </li>
    <li> <a href="index.php?URL=0:INLEIDING" class="sf-with-ul">Reiswijzer<span class="sf-sub-indicator"> </span></a>
      <ul>

       <li><a href="index.php?URL=0:INLEIDING" style="border-left:none;">Inleiding</a></li>
       <li><a href="index.php?URL=0:ALGEMENE_PUNTEN" style="border-left:none;">Algemene punten</a></li>
       <li><a href="index.php?URL=0:VOORBEREIDING" style="border-left:none;">Voorbereiding</a></li>
       <li><a href="index.php?URL=0:HET_VERTREK" style="border-left:none;">Het vertrek</a></li>
       <li><a href="index.php?URL=0:DE_REIS" style="border-left:none;">De reis</a></li>
       <li><a href="index.php?URL=0:AANKOMST" style="border-left:none;">Aankomst</a></li>
       <li><a href="index.php?URL=0:LEIDING_REIS" style="border-left:none;">Leiding Reis</a></li>
       <li><a href="index.php?URL=0:ONTSPANNING" style="border-left:none;">Ontspanning</a></li>
       <li><a href="index.php?URL=0:FDIVERSE" style="border-left:none;">Diverse</a></li>
       <li><a href="index.php?URL=0:EPILOOG" style="border-left:none;">Epiloog</a></li>  
      </ul>
    </li>
    <li> <a href="index.php?URL=0:2012" class="sf-with-ul">Kalender<span class="sf-sub-indicator"> </span></a>
      <ul>

       <li><a href="index.php?URL=0:2012" style="border-left:none;">Seizoen 2012</a></li>
       <li><a href="index.php?URL=0:2011" style="border-left:none;">Seizoen 2011</a></li>
       <li><a href="index.php?URL=0:2010" style="border-left:none;">Seizoen 2010</a></li>
       <li><a href="index.php?URL=0:2009" style="border-left:none;">Seizoen 2009</a></li>
       <li><a href="index.php?URL=0:2008" style="border-left:none;">Seizoen 2008</a></li>
       <li><a href="index.php?URL=0:2007" style="border-left:none;">Seizoen 2007</a></li>
       <li><a href="index.php?URL=0:2006" style="border-left:none;">Seizoen 2006</a></li>
       <li><a href="index.php?URL=0:2005" style="border-left:none;">Seizoen 2005</a></li>
       <li><a href="index.php?URL=0:2004" style="border-left:none;">Seizoen 2004</a></li>
       <li><a href="index.php?URL=0:2003" style="border-left:none;">Seizoen 2003</a></li>  
      </ul>
    </li>
    <li> <a href="index.php?URL=0:F2009" class="sf-with-ul">Fotoboek<span class="sf-sub-indicator"> </span></a>
      <ul>

       <li><a href="index.php?URL=0:F2009" style="border-left:none;">Fotoboek 2009</a></li>
       <li><a href="index.php?URL=0:F2008" style="border-left:none;">Fotoboek 2008</a></li>
       <li><a href="index.php?URL=0:F2007" style="border-left:none;">Fotoboek 2007</a></li>
       <li><a href="index.php?URL=0:F2006" style="border-left:none;">Fotoboek 2006</a></li>
       <li><a href="index.php?URL=0:F_DIVERSE" style="border-left:none;">Diverse</a></li>  
      </ul>
    </li>
       <li><a href="index.php?URL=0:CONTACT">Contact</a></li>
    </ul>
  </div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
/* Suckerfish Menu Styles
----------------------------------------------------------------------------------------------------*/
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            12em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;

}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
    left:            0;
    top:            40px; /* match top ul list item height */
    z-index:        99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li:hover li li:hover ul, ul.sf-menu li.sfHover li li.sfHover ul {
    left:            12em; /* match ul width */
    top:            -1px; /* to accomodate top border */
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
    left:            12em; /* match ul width */
    top:            0;
}
.sf-menu {
    float:            left;
    margin-bottom:    0em;
    width: 960px;
}
.toprounded ul.sf-menu {
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
}
.bottomrounded ul.sf-menu {
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
}
.rounded ul.sf-menu {
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
}
.sf-menu a { /* top level menu items */
    border-left:    1px solid #0C1627;
    padding:         13px 12px;
    text-decoration:none;
        font-size:14px;
}
.sf-menu li li a {
    border-bottom: 1px solid #000; /* sub menu borders */
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    padding: 10px 12px;    /* set drop down menu height by adjusting the 10px value */
}
.sf-menu li li:first-child {
    border-top: 1px solid #000; /* sub menu top border */
}
.sf-menu a, .sf-menu a:visited { /* main level menu color */
    color: #FFF;
}
.sf-menu li li a, .sf-menu li li a:visited { /* sub menu text color */
    color: #FFFFFF; /* color: #C1EEFF; */
}
.sf-menu li li, .sf-menu li li li {
    background-color: #0A2134; /* drop-down menu background color */
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    background: #194F7B;
}
.sf-menu li {
    background:    url(../IMAGES/nav-bg.jpg) repeat-x bottom;
}
.first-item a {
    border-left: none;
}
.toprounded .sf-menu .first-item {
    -moz-border-radius-topleft: 6px;    /* round first menu item corner (non-IE browsers) */
    -webkit-border-top-left-radius: 6px;
}
.toprounded .sf-menu .first-item a:hover, .toprounded .sf-menu .first-item a:focus {
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
}
.bottomrounded .sf-menu .first-item {
    -moz-border-radius-bottomleft: 6px;    /* round first menu item corner (non-IE browsers) */
    -webkit-border-bottom-left-radius: 6px;
}
.bottomrounded .sf-menu .first-item a:hover {
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
}
.rounded .sf-menu .first-item {
    -moz-border-radius-topleft: 6px;    /* round first menu item corner (non-IE browsers) */
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
}
.rounded .sf-menu .first-item a:hover {
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
}
.sf-menu li li, .sf-menu li li li {
    background-image: none;
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:        url(../IMAGES/nav-bg-hov.jpg) repeat-x bottom;
    outline:        0;
}
.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
    background-image: none;
    outline:        0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            10px;
    top:            17px; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('../IMAGES/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
li li .sf-sub-indicator {
    top:            13px; /* IE6 drop down arrow position */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            14px;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
li li a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:            10px;
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator {
    background-position:  -10px 0;
}
.sf-menu ul a > .sf-sub-indicator {
    background-position:  0 0;
}
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
    background:    url('../IMAGES/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}
/* Styles for vertical Suckerfish menu - probably not used
----------------------------------------------------------------------------------------------------*/
 
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
    width:    210px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
    left:    210px; /* match ul width */
    top:    0;
}
/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator {
    background-position: -10px 0;
} /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator {
    background-position: 0 0;
} /* use translucent arrow for modern browsers*/
/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}



Ik steel ook alles.... maar ik ga dan niet aan andere vragen of ze me dan gaan mee helpen ontcijferen....
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.