Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

Css , menu in het midden ?

Pagina: 1
Acties:
  • 410 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Hallo,

Momenteel probeer ik CSS onder de knie te krijgen , dit omdat ik voor iemand een website mag maken.
Mijn probleem is , dat ik op deze pagina het menu niet in het midden krijg van m'n Div .

Het ontwerp is mijn werk , het menu voorbeeld komt van een tutorial op solardreamstudios en moet worden aangepast ( probeer nog uit te vissen wat wat doet in de listing .
Kan iemand me helpen om alvast het menu in het midden te krijgen , het liefst werkend in alle brouwsers .
En of dat dit nog niet genoeg was , ook een beetje uitleg waar het probleem zat .

Dank bij voorbaat .

[ Voor 6% gewijzigd door Verwijderd op 29-07-2007 10:31 ]


  • RaZ
  • Registratie: November 2000
  • Niet online

RaZ

Funky Cold Medina

Welkom op GoT..

Je kan beter het geen waar het om gaat in [ code ] tags zetten dan de link naar je site posten, komt wat spammerig over..

Voor het CSS gedeelte doe je: [ code = css ] [ /code ]
En voor de HTML: [ code = html ] [ /code ]

Ik ben zelf ook nog bezig met een dropdown CSS menu, maar ben lang zo ver nog niet, maar je kan de navheader class gewoon in je CSS opnemen met:

Cascading Stylesheet:
1
2
3
.menuheader {
  text-align:center
}

Ey!! Macarena \o/


Verwijderd

Topicstarter
Dat is een vlugge reaktie !!!!! , bedankt .

Ik heb weinig ervaring met forums , maar denk dat daar nu verandering in zal komen .
Ik volg uw raad zeker op , nogmaals dank .

Verwijderd

Topicstarter
Wat dus mijn probleem betreft ,

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
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
body {
background-color: #000000;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.container {
background-color: #202020;

margin:0px auto;
text-align: center; 
margin-top: 10px;
width: 760px;
height: 580px;
}

.header{
background-color: #ff7f2a;
background-image: url("HeaderBeeld.JPG");
text-align: center;
margin: 0 auto;
width: 750px;
height:120px;
}

.menuheader{
background-color: #878787;
text-align: center;
margin: 2px auto;
width: 750px;
height:25px;
}

.madeby{
background-color: #fd8127;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 60%;
text-align: right;
margin: 0 auto;
width: 760px;
height: 12px;
}

h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}

p {
font: 11px Arial, Helvetica, sans-serif;
}

a {
color: #900;
text-decoration: none;
}

a:hover {
background: #900;
color: #FFF;
}


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu li {
  margin: 0:
  border: 0 none;
  padding: 0;
  float: center; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  text-align: left;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  text-align: left;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: center; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  width: 0px auto;
  height: 1%; /*For IE*/
}

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}
 


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
<html>
<head>
<title>E-M & Co. SPRL</title>
<link href="EM.css" rel="stylesheet" type="text/css" />

<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
</head>
<body>
 <div class="container">
 
       <div class="header">
       </div>
     
       <div class="menuheader">
       <ul id="navmenu">
  <li><a href="#">Electric </a></li>

  <li><a href="#">Protection </a>
    <ul>
      <li><a href="#">Websites </a>
        <ul>
          <li><a href="#">qrayg</a></li>
          <li><a href="#">qArcade</a></li>
          <li><a href="#">qLoM</a></li>

          <li><a href="#">qDT</a></li>
        </ul>
      </li>
      <li><a href="#">Pen and Ink</a></li>
      <li><a href="#">Free Interfaces</a></li>
    </ul>
  </li>

  <li><a href="#">Data </a>
    <ul>
      <li><a href="#">Fireworks </a>
        <ul>
          <li><a href="#">aquaButton</a></li>
          <li><a href="#">aquaButton2</a></li>
          <li><a href="#">waterDrop</a></li>

          <li><a href="#">lightFX</a></li>
          <li><a href="#">lightFX2</a></li>
        </ul>
      </li>
      
      <li><a href="#">CSS </a>
        <ul>
          <li><a href="#">footerStick</a></li>

          <li><a href="#">spriteNav</a></li>
          <li><a href="#">@import</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">TVnum </a>
    <ul>
      <li><a href="#">Fireworks </a>
        <ul>
          <li><a href="#">aquaButton</a></li>
          <li><a href="#">aquaButton2</a></li>
          <li><a href="#">waterDrop</a></li>

          <li><a href="#">lightFX</a></li>
          <li><a href="#">lightFX2</a></li>
        </ul>
      </li>
       
       </div>
       </div>
       <div class="madeby">
       Danny
       </div></div>
       
       </body>
</html>

  • Notna
  • Registratie: November 2002
  • Nu online

Notna

Moderator General Chat / Wonen & Mobiliteit

Where are you?®

Pssst, je moet de haakjes wel tegen de code aanzetten :P

Dus:

code:
1
 Dus  [code=css] en [/code] bijv.


En je berichten kan je editten met de EDIT knop:Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/edit.gif

[ Voor 49% gewijzigd door Notna op 29-07-2007 10:30 ]

Xbox Live ID:Notna8310


Verwijderd

Topicstarter
Dacht al dat er iets niet juist was , indien iemand dit hele geval kan verwijderen , graag .
Ik begin wel opnieuw .

  • RaZ
  • Registratie: November 2000
  • Niet online

RaZ

Funky Cold Medina

Verwijderd schreef op zondag 29 juli 2007 @ 10:26:
Dacht al dat er iets niet juist was , indien iemand dit hele geval kan verwijderen , graag .
Ik begin wel opnieuw .
Dat is niet nodig, je kan gewoon je vorige posts editen. Dus even die spaties weghalen uit de code-tags, en klaar ben je.. Scheeld je weer overtikken (lees: CTRL-C & CTRL-V) :P

Ey!! Macarena \o/


Verwijderd

Topicstarter
Lijkt me beter zo , bedankt mensen!
Pagina: 1