Toon posts:

CSS Menu: correct in Opera & FF, verschoven in IE

Pagina: 1
Acties:

woensdag 22 februari 2006 16:32

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
De volgende situatie:

een menu met daaronder een lijst items:

code:
1
2
3
4
5
6
7
8
9
10
11

<div class='MenuTitle'>Menu1
<div class='Menu' name='Menu1'>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
  <li>Item5</li>
</ul>
</div>
</div>


Met een bijbehorende CSS:

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

DIV.MenuTitle {
  position: absolute;
  bottom: 0px;
  color: #ffffff;
  text-align: left;
  font-family: arial;
}

DIV.MenuTitle:HOVER {
  color: #ff0000;
}

DIV.MenuTitle:HOVER DIV.Menu{
  display: block;
}

DIV.Menu {
  display: none;
  position: absolute;
}

DIV.Menu UL {
  /*position: relative;
  left: -67px;*/
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: inline;
}

DIV.Menu LI {
  background-color: #000084;
  border: thin solid #ff0000;
  color: #ffffff;
  width: 85px;
}

DIV.Menu LI:HOVER {
  color: #ff0000
}


De werking: ga met je muis over 'Menu1' en de lijst verschijnt netjes onder deze kop. Uitgelijnd naar links onder 'Menu1'.

Het probleem: In IE (iig in 6) wordt ook netjes de lijst getoond, echter niet uitgelijnd onder 'Menu1', maar een flink stuk verschoven naar rechts. Nu kan ik dit wel oplossen door de lijst voor IE naar links te positioneren. Dit vind ik echter geen nette oplossing en als de tekengrootte wijzigt in IE, wijzigt ook deze plek mee.

Is er een bekende workaround voor (heb ik echter niet kunnen vinden)?

Hier een test url: http://evaarties.xs4all.nl/testsite/index.php

[ Voor 9% gewijzigd door evaarties op 22-02-2006 16:33 ]

woensdag 22 februari 2006 16:42

Acties:
  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

JHS

Splitting the thaum.

Ik zou als eerste een (compleet) doctype gebruiken wat beide browsers in standardsmode duwt,
HTML:
1
2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
bijvoorbeeld :) .

DM!

woensdag 22 februari 2006 16:50

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
Ben ik het helemaal mee eens. Is er tussendoor geglipt.

Het lost het probleem echter niet op.

woensdag 22 februari 2006 16:55

Acties:
  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

Sappie

De Parasitaire Capaciteit!

Ik heb het idee dat je wel de klok hebt horen luiden, maar niet goed weet waar de klepel hangt.. je bent dus op de goede weg :)

Je gebruikt namelijk wel een ul element voor de dropdowns zelf, maar giet niet het hele menu in een structuur van geneste ul's. Dropdown menu's die dit wel doen worden suckerfish dropdowns genoemd. Wellicht dat je met die zoekterm een heel eind verder komt. (heb verder ook geen IE op dit moment om het een en ander in te testen).

Hier een url waarin de suckerfish dropdowns worden uitgelegd. Deze url is weliswaar niet helemaal up-to-date, maar verstrekt in ieder geval een goede basis:

http://www.alistapart.com/articles/dropdowns/

[ Voor 5% gewijzigd door Sappie op 22-02-2006 16:56 ]

Specs | Audioscrobbler

woensdag 22 februari 2006 18:23

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
Thanks. Door het menu helemaal in een list te stoppen is het probleem verholpen :).

woensdag 22 februari 2006 19:27

Acties:

Verwijderd

je code bovenaan lijkt er aardig uit te zien, totdat je in de daadwerkelijke page zelf gaat kijken, man man, er zitten <span>'s all over the place binnen 4 nested div's, maw over semantiek hoeven we niet te spreken, een tabel lijkt mij op deze manier makkelijker :? met 2 divjes en een paar lists kom je veel verder.

woensdag 22 februari 2006 22:55

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
Nou, als jij vindt dat je ze beter kan plaatsen, be my guest, allicht leer ik er van :). Voor het gemak heb je hier dan de correcte code:

pagina:
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
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

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>
SITENAAM
</title>
<link rel=stylesheet href='layout.css' type='text/css'>
</head>
<body>
<div class='Page' name='Page'>
<div class='Header' name='Header'>
<div class='LogoAndMenu' name='LogoAndMenu'>
<span class='LogoLeft' name='LogoLeft'></span>
<span class='LogoSpacer' name='LogoSpacer'></span>

<span class='LogoMenu' name='LogoMenu'>
<div class='Menu' name='Menu'>
<ul>
  <li>Menu 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </li>
  <li>Menu 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ul>
  </li>
  <li>Menu 3
    <ul>
      <li>Item 1</li>
    </ul>
  </li>
  <li>Menu 4
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </li>
</ul>
</div>
</span>
<span class='LogoFlags' name='LogoSpacer'>
<div class='Flags' name='Flags'>
<a href='index.php?change_language=gb'>[img]'images/flags/gb.png'[/img]</a>
<a href='index.php?change_language=fr'>[img]'images/flags/fr.png'[/img]</a>
<a href='index.php?change_language=ru'>[img]'images/flags/ru.png'[/img]</a>
<a href='index.php?change_language=nl'>[img]'images/flags/nl.png'[/img]</a>
</div>
</span>
<span class='LogoRight' name='LogoRight'></span>
</div>
<div class='CornersTop' name='CornersTop'>
<span class='CornerUpperLeft' name='CornerUpperLeft'>[img]'images/corner_upperleft.png'[/img]</span>
<span class='CornerUpperRight' name='CornerUpperRight'>[img]'images/corner_upperright.png'[/img]</span>
</div>
</div>
<div class='PageContent' name='PageContent'>

Hello dear visitor,
<p />
You've come to the right place for all your needs.
<p />
Just send an email and you will be contacted as soon as possible.
<p />
The author

</div>
<div class='Footer' name='Footer'>
<div class='CornersBottom' name='CornersBottom'>
<span class='CornerLowerLeft' name='CornerLowerLeft'>[img]'images/corner_lowerleft.png'[/img]</span>
<span class='CornerLowerRight' name='CornerLowerLeft'>[img]'images/corner_lowerright.png'[/img]</span>
</div>
<div class='FooterText' name='FooterText'>
<div name='Copyright'>&copy; SITENAAM 2006 - Thank you for visiting.</div>
</div>
</div>
</div>
</body>
</html>


de css:
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
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

/*
DIV {
  border: thin dotted #00FF00;
}

SPAN {
  border: thin dotted #0000FF;
}
*/

DIV {
  margin: 0px;
  padding: 0px;
}

DIV, SPAN {
  margin: 0px;
  padding: 0px;
}

BODY {
  /* Fix for Internet Explorer so the hover will work for any element */
  behavior: url(include/csshover.htc);
  margin: 0px;
  padding: 0px;
}

IMG {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

/* Begin Menu */

/* Imagesize is 365px */
SPAN.LogoLeft {
  float: left;
  width: 351px;
  background-image: url('images/logo_left.png');
  height: 100px;
}

SPAN.LogoMenu {
  position: relative;
  float: left;
  background-image: url('images/logo_spacer.png');
  width: 388px;
  height: 100px;
}

SPAN.LogoFlags {
  position: relative;
  float: left;
  background-image: url('images/logo_spacer.png');
  width: 20px;
  height: 100px;
}

SPAN.LogoSpacer {
  position: relative;
  float: left;
  background-image: url('images/logo_spacer.png');
  width: 7px;
  height: 100px;
}

/* Imagesize is 8px */
SPAN.LogoRight {
  float: left;
  width: 9px;
  background-image: url('images/logo_right.png');
  height: 100px;
}

DIV.Flags {
  position: absolute;
  top: 6px;
  right: 0px;
}

DIV.Menu {
  position: absolute;
  bottom: 0px;
  color: #ffffff;
  font-family: arial;
  cursor: pointer;
}

DIV.Menu UL {
  padding: 0;
  margin: 0;
  list-style: none;
}

DIV.Menu UL LI {
  float: left;
  position: relative;
  width: 97px;
}

DIV.Menu UL LI UL {
  position: absolute;
  display: none;
  top: 1.1em;
  left: 0;
  border-left: 2px solid #393DD5;
  border-right: 2px solid #393DD5;
  border-bottom: 2px solid #393DD5;
}

DIV.Menu UL LI UL LI {
  background-color: #000080;
  border-top: 2px solid #393DD5;
}

DIV.Menu LI:HOVER UL {
  display: block;
}

DIV.Menu UL LI UL LI:HOVER {
  color: #ff0000;
  font-weight: bold;
}

/* End Menu */

DIV.Page {
  margin: auto;
  width: 775px;
}

DIV.PageContent {
  clear: both;
  padding-top: 0px;
  margin: 2px;
}

DIV.Header {
  clear: both;
}

DIV.Footer {
  clear: both;
}

DIV.FooterText {
  clear: both;
}

DIV.CornersTop, DIV.CornersBottom {
  /* Fix for IE so the margins are the same as in Opera */
  //padding-top: 4px;
  //padding-bottom: 4px;

}
SPAN.CornerUpperLeft {
  clear: left;
  float: left;
/*  margin-top: 10px; */
}

SPAN.CornerUpperRight {
  clear: right;
  float: right;
/*  margin-top: 10px; */
}

SPAN.CornerLowerLeft {
  clear: left;
  float: left;
/*  margin-bottom: 10px; */
}

SPAN.CornerLowerRight {
  clear: right;
  float: right;
/*  margin-bottom: 10px; */
}


En tabellen ga ik niet gebruiken als het niet op een plek is waar het nuttig is (bv een raster met koppen, en data).

[ Voor 36% gewijzigd door evaarties op 22-02-2006 22:56 ]

donderdag 23 februari 2006 00:05

Acties:

Verwijderd

evaarties schreef op woensdag 22 februari 2006 @ 22:55:
En tabellen ga ik niet gebruiken als het niet op een plek is waar het nuttig is (bv een raster met koppen, en data).
en omdat ik het daar mee eens ben vraag ik me wel af waar al die class="bla" name="bla" en <span><div></div></span> 's allemaal nuttig voor zijn, los van het feit dat dat niet kan. block elementen kunnen niet binnen inline elementen staan.
Sappie heeft al een link aangereikt waarmee je die menu's zo mee aan de praat krijgt, zonder een behavior te hoeven gebruiken. Misschien is dit ook nuttige materie.

donderdag 23 februari 2006 08:48

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
Die behaviour is om de hover te kunnen gebruiken op elk element in IE.

Edit: Op de site die Sappie aangeeft, maken ze ook gebruik van Javascript ed om de hover op het element werkend te krijgen in IE.

En waarom kunnen meerdere spans niet in een div ? Ik heb het niet andersom gedaan zoals jij volgens mij stelt.

Verder heb ik slechts een paar div's gebruikt:

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div page>
  <div header>
    <div logoEnmenu>
    </div>

    <div hoekenboven>
    </div>
  </div>

  <div pagecontent>
  </div>

  <div footer>
    <div hoekenonder>
    </div>
    <div copyrighttekst>
    </div>
  </div>
</div>


Vind ik er toch heel overzichtelijk uitzien.

[ Voor 23% gewijzigd door evaarties op 23-02-2006 09:02 ]

donderdag 23 februari 2006 09:10

Acties:

Verwijderd

evaarties schreef op donderdag 23 februari 2006 @ 08:48:
En waarom kunnen meerdere spans niet in een div ? Ik heb het niet andersom gedaan zoals jij volgens mij stelt.
niet ?

HTML:
1
2
3
4
5
6
7
8
9
10
11

<span class='LogoMenu' name='LogoMenu'>
<div class='Menu' name='Menu'>
list
</div>
</span>

<span class='LogoFlags' name='LogoSpacer'>
<div class='Flags' name='Flags'>
a hrefs
</div>
</span>
Vind ik er toch heel overzichtelijk uitzien.
Overzichtelijk <> overdone.
Je werkt met een vaste breedte van 755px, dus die hoekjes kun je als 1 background op een div zetten, tenzij je dat wilt laten schalen.. De link van je startpost is anders dan je code, dus ik kan niet zien wat je wilt bereiken.

donderdag 23 februari 2006 09:26

Acties:
  • evaarties
  • Registratie: April 2001
  • Laatst online: 04-04 20:33

evaarties

Powerball @ 12.582

Topicstarter
Ok, bij de menu's heb je daar gelijk in. Had ik overheen gekeken.

Hier een screenshot van wat ik wilde bereiken en heb bereikt:

Afbeeldingslocatie: http://evaarties.xs4all.nl/testsite/voorbeeld.png
Pagina: 1
Reageer