Tijden veranderen
Layout probleem: hoogte in samenwerking met een menu
als vaste klant in dit gedeelte (en gespecialiseerd in het vragen van layoutproblemen) hoopte ik dat me hier weer een creatief & goed antwoord te wachten staat :)
Ik ben bezig met een ontwerpje voor de lol dat je vindt op de volgende website: http://www.i-support.be/forwardinvest .
Het probleem nu:
Als je IE gebruikt zie je dat je énorm ver naar beneden kan scrollen wat natuurlijk niet de bedoeling is. Ik ben er achter gekomen dat iets in de volgende css-code het in de war stuurt.
De grote verkleint al een beetje door het weglaten van
" .menu ul li " maar dan functioneert het menu niet echt meer.
Code (php)
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
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
.menu {
font-family: verdana, arial, sans-serif;
width:800px;
margin:0;
position:relative;
z-index:200;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
z-index:200;
text-align:center;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
z-index:200;
}
/* style the links to be 150px wide by 30px high. Set the color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:150px;
height:30px;
color:#fff;
line-height:30px;
font-size:11px;
z-index:200;
}
/* set up the background images relative to this css file */
.john {background:#fff url(../paintings/kei.jpg);}
.constable {background:transparent url(../paintings/kei.jpg) 0 -31px;}
.claude {background:#fff url(../paintings/dakpan.jpg);}
.monet {background:transparent url(../paintings/dakpan.jpg) 0 -31px;}
.van {background:#fff url(../paintings/grey.jpg);}
.gogh {background:transparent url(../paintings/grey.jpg) 0 -31px;}
.marc {background:#fff url(../paintings/balk.jpg);}
.chagall {background:transparent url(../paintings/balk.jpg) 0 -31px;}
.pablo {background:#fff url(../paintings/buizen.jpg);}
.picasso {background:transparent url(../paintings/buizen.jpg) 0 -31px;}
/* make the dropdown ul invisible */
.menu ul li ul {
visibility:hidden;
position:absolute;
z-index:200;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
z-index:200;
}
.menu ul li:hover a span {display:none;z-index:200;}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
visibility:visible;
top:30px;
left:0;
width:150px;
z-index:200;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
color:#fff;
z-index:200;
}
/* style the hidden span text */
.menu ul li:hover ul li a span {
display:none;
position:absolute;
left:150px; top:0;
background:#fff;
width:130px;
padding:0 10px;
color:#000;
z-index:200;
}
/* style the first letter of the span text */
.menu ul li:hover ul li a span:first-letter {
font-weight:bold;
font-size:1.2em;
z-index:200;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li:hover {
background:#000;
z-index:200;
}
/* make the span text visible */
.menu ul li:hover ul li:hover span {
display:block;
text-align:left;
line-height:1.5em;
z-index:200;
}
/* position the span text on the left of the last menu item */
.menu ul li:hover ul.left li:hover span {
left:-150px;
z-index:200;
}
font-family: verdana, arial, sans-serif;
width:800px;
margin:0;
position:relative;
z-index:200;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0;
margin:0;
list-style-type: none;
z-index:200;
text-align:center;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
z-index:200;
}
/* style the links to be 150px wide by 30px high. Set the color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
width:150px;
height:30px;
color:#fff;
line-height:30px;
font-size:11px;
z-index:200;
}
/* set up the background images relative to this css file */
.john {background:#fff url(../paintings/kei.jpg);}
.constable {background:transparent url(../paintings/kei.jpg) 0 -31px;}
.claude {background:#fff url(../paintings/dakpan.jpg);}
.monet {background:transparent url(../paintings/dakpan.jpg) 0 -31px;}
.van {background:#fff url(../paintings/grey.jpg);}
.gogh {background:transparent url(../paintings/grey.jpg) 0 -31px;}
.marc {background:#fff url(../paintings/balk.jpg);}
.chagall {background:transparent url(../paintings/balk.jpg) 0 -31px;}
.pablo {background:#fff url(../paintings/buizen.jpg);}
.picasso {background:transparent url(../paintings/buizen.jpg) 0 -31px;}
/* make the dropdown ul invisible */
.menu ul li ul {
visibility:hidden;
position:absolute;
z-index:200;
}
/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#fff;
z-index:200;
}
.menu ul li:hover a span {display:none;z-index:200;}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
visibility:visible;
top:30px;
left:0;
width:150px;
z-index:200;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
color:#fff;
z-index:200;
}
/* style the hidden span text */
.menu ul li:hover ul li a span {
display:none;
position:absolute;
left:150px; top:0;
background:#fff;
width:130px;
padding:0 10px;
color:#000;
z-index:200;
}
/* style the first letter of the span text */
.menu ul li:hover ul li a span:first-letter {
font-weight:bold;
font-size:1.2em;
z-index:200;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li:hover {
background:#000;
z-index:200;
}
/* make the span text visible */
.menu ul li:hover ul li:hover span {
display:block;
text-align:left;
line-height:1.5em;
z-index:200;
}
/* position the span text on the left of the last menu item */
.menu ul li:hover ul.left li:hover span {
left:-150px;
z-index:200;
}
Heb je de boosdoener al gevonden ?
De aanvullende css-code voor dat menu is
Code (php)
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
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
/* Get rid of any default table style */
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
border:0;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
visibility:visible;
top:31px;
left:0;
width:149px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
border:0;
color:#fff;
position:relative;
}
/* style the hidden span text */
.menu ul li a:hover ul li a span {
visibility:hidden;
position:absolute;
left:150px; top:0;
background:#fff;
width:130px;
padding:0 10px;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#000;
color:#fff;
position:relative;
}
/* make the span text visible */
.menu ul li a:hover ul li a:hover span {
visibility:visible;
text-align:left;
line-height:1.5em;
}
/* position the span text on the left of the last menu item */
.menu ul li a:hover ul.left li a:hover span {
left:-150px;
}
/* style the first letter of the span text */
.menu ul li a:hover ul li a:hover span:first-letter {
font-weight:bold;
font-size:1.2em;
}
table {
border-collapse:collapse;
margin:0;
padding:0;
}
/* ignore the link used by 'other browsers' */
.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
/* set the background and foreground color of the main menu link on hover */
.menu ul li a:hover {
border:0;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li a:hover ul {
visibility:visible;
top:31px;
left:0;
width:149px;
}
/* style the background and foreground color of the submenu links */
.menu ul li a:hover ul li a {
border:0;
color:#fff;
position:relative;
}
/* style the hidden span text */
.menu ul li a:hover ul li a span {
visibility:hidden;
position:absolute;
left:150px; top:0;
background:#fff;
width:130px;
padding:0 10px;
color:#000;
}
/* style the background and forground colors of the links on hover */
.menu ul li a:hover ul li a:hover {
background:#000;
color:#fff;
position:relative;
}
/* make the span text visible */
.menu ul li a:hover ul li a:hover span {
visibility:visible;
text-align:left;
line-height:1.5em;
}
/* position the span text on the left of the last menu item */
.menu ul li a:hover ul.left li a:hover span {
left:-150px;
}
/* style the first letter of the span text */
.menu ul li a:hover ul li a:hover span:first-letter {
font-weight:bold;
font-size:1.2em;
}
En de basis css voor de site is
Code (php)
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
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
html {
background-color: #E6E1CF;
width:100%;
max-width:100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #E6E1CF;
font-family: Tahoma,Arial,sans-serif;
font-size: 8pt;
width:100%;
max-width:100%;
}
h1,h2,h3 {
white-space: none;
text-decoration: underline;
margin: 0;
}
img {
border-color: black;
}
a {color: #000; text-decoration: none;}
a:link {color: #000; text-decoration: none;}
a:visited {color: #000; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
#menu {
margin: 0px;
border-bottom: 1px solid #000;
position: relative;
top: 0px;
width:100%;
max-width:100%;
height: 30px;
max-height: 150px;
z-index:200;
}
#logo {
margin: 0px;
border-bottom: 1px solid #000;
position: relative;
top: 0px;
width:100%;
max-width:100%;
height: 150px;
max-height: 150px;
text-align:center;
background-color: #BFAC60;
}
#logo a:link {color: #fff; text-decoration: overline;}
#logo a {color: #fff; text-decoration: overline;}
#logo a:visited {color: #fff; text-decoration: overline;}
#logo a:hover {color: #E6E1CF; text-decoration: overline;}
#logo h1 {
white-space: none;
font-size: 5em;
padding-top:20px;
color: #fff;
text-decoration:none;
}
#logo h3 {
white-space: none;
margin-left:250px;
font-size:1em;
color: #fff;
font-style: italic;
}
#tussentekst {
margin: 0;
border-bottom: 1px solid #000;
position: relative;
width:100%;
max-width:100%;
height: 25px;
max-height: 25px;
text-align: center;
font-weight: bold;
background-color: #E6E1CF;
}
#tussentekst p {
margin-top: 3px;
font-size: 1.4em;
}
#projecten {
background-color: #CCC08F;
background-repeat:no-repeat;
overflow: auto;
margin: 0;
border-bottom: 0px solid #000;
position: relative;
width:100%;
max-width:100%;
height: 350px;
max-height: 350px;
text-align: center;
font-weight: normal;
z-index: 105;
padding:0;
}
#projecten img {
margin-top: 70px;
margin-left:10px;
margin-right:10px;
}
#content {
margin: 0px;
color: #000;
background-color: #E6E1CF;
width: 100%;
position: relative;
text-align: center;
z-index: 99;
height:140px;
max-height:140px;
}
p {
margin: 0px 3px 0px 3px;
}
background-color: #E6E1CF;
width:100%;
max-width:100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: #E6E1CF;
font-family: Tahoma,Arial,sans-serif;
font-size: 8pt;
width:100%;
max-width:100%;
}
h1,h2,h3 {
white-space: none;
text-decoration: underline;
margin: 0;
}
img {
border-color: black;
}
a {color: #000; text-decoration: none;}
a:link {color: #000; text-decoration: none;}
a:visited {color: #000; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
#menu {
margin: 0px;
border-bottom: 1px solid #000;
position: relative;
top: 0px;
width:100%;
max-width:100%;
height: 30px;
max-height: 150px;
z-index:200;
}
#logo {
margin: 0px;
border-bottom: 1px solid #000;
position: relative;
top: 0px;
width:100%;
max-width:100%;
height: 150px;
max-height: 150px;
text-align:center;
background-color: #BFAC60;
}
#logo a:link {color: #fff; text-decoration: overline;}
#logo a {color: #fff; text-decoration: overline;}
#logo a:visited {color: #fff; text-decoration: overline;}
#logo a:hover {color: #E6E1CF; text-decoration: overline;}
#logo h1 {
white-space: none;
font-size: 5em;
padding-top:20px;
color: #fff;
text-decoration:none;
}
#logo h3 {
white-space: none;
margin-left:250px;
font-size:1em;
color: #fff;
font-style: italic;
}
#tussentekst {
margin: 0;
border-bottom: 1px solid #000;
position: relative;
width:100%;
max-width:100%;
height: 25px;
max-height: 25px;
text-align: center;
font-weight: bold;
background-color: #E6E1CF;
}
#tussentekst p {
margin-top: 3px;
font-size: 1.4em;
}
#projecten {
background-color: #CCC08F;
background-repeat:no-repeat;
overflow: auto;
margin: 0;
border-bottom: 0px solid #000;
position: relative;
width:100%;
max-width:100%;
height: 350px;
max-height: 350px;
text-align: center;
font-weight: normal;
z-index: 105;
padding:0;
}
#projecten img {
margin-top: 70px;
margin-left:10px;
margin-right:10px;
}
#content {
margin: 0px;
color: #000;
background-color: #E6E1CF;
width: 100%;
position: relative;
text-align: center;
z-index: 99;
height:140px;
max-height:140px;
}
p {
margin: 0px 3px 0px 3px;
}
Ik hoop dat jullie de technische fout / happering kunnen vinden.
Groetjes,
Isupporter
Gewijzigd op 01/01/1970 01:00:00 door Isupporter
Er zijn nog geen reacties op dit bericht.