Autor |
Nachricht |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Do 14.02.2008 10:42
Titel
|
|
|
oh, danke, sieht schon besser aus
jetzt ist nur noch das problem, dass beim ie7 die buttons überlappen... das sollen sie aber nicht, wie kann man das regeln?
der code ist jetz so:
Code: |
/* Menü */
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout5.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
position:relative;
z-index:1000;
margin: 0px; /* this page only */
font-size: 10pt;
text-align: center;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding: 0;
margin: 0px;
list-style-type:none;
width:101px;
border:1px solid #ffffff;
border-width:1px 1px 0 1px;
background:#0d68c9;
}
.menu ul.sub {
padding:0;
margin:0;
list-style-type:none;
position:relative;
border:1px solid #ffffff;
border-width:1px 1px 0 1px;
height:25px;
float: left;
}
.menu li {
background:transparent;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
color:#ffffff;
text-indent:0px;
border-bottom:1px solid #ffffff;
background:#0d68c9;
padding: 2px;
}
/* style the link hover */
* html .menu a:hover {color:#ffffff; background:#75a9f8;}
.menu :hover > a {
color:#ffffff;
background:#75a9f8;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
left:102px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
}
.menu ul.top3 {top:21px; width:150px; border:1px solid #ffffff; border-width:1px 1px 0 1px; font-size: 8pt;}
.menu ul.top4 {top:42px; width:150px; border:1px solid #ffffff; border-width:1px 1px 0 1px; font-size: 8pt;}
.menu ul.top5 {top:63px; width:150px; border:1px solid #ffffff; border-width:1px 1px 0 1px; font-size: 8pt;}
|
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 14.02.2008 11:16
Titel
|
|
|
Die Überlappung kann ich mit Deinem CSS (angewandt auf's Orig.-Markup) nicht nachvollziehen, da verhält der IE 7 wie der FX, poste also mal Deinen kompletten Code inkl. HTML, d.h. von Doctype bis </html>
Unabängig davon: Für den IE < 7 werden die Links Layout brauchen, um den Whitespace-Bug zu beheben und sie über die gesamte Breite anklickbar zu machen:
Code: | * html .menu a {
height: 1px;
} |
(height wird vom IE < 7 wie min-height behandelt.)
Zuletzt bearbeitet von heiko_rs am Do 14.02.2008 11:16, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Do 14.02.2008 13:12
Titel
|
|
|
oh dankeschön... übrigens das überlappen hatte was damit zu tun das das ganze ja noch in einem div liegt und im
.menu { text-align: center } stand, was ihn natürlich mittig ausgerichtet hat... naja, habs weggemacht und bei .menu ul mit reingemacht, jetz gehts
dankeschön für deine hilfe!
lg denise
|
|
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
|
|
|
|
heiko_rs
Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht:
|
Verfasst Do 14.02.2008 13:42
Titel
|
|
|
Behebe aber bitte zuerst die HTML-Fehler Du hast das Orig.-Markup nicht korrekt angepasst und dabei u.a. Fehler bei der Verschachtelung verusacht. Das sieht man auch daran, dass der IE 6 ohne Hover nur die ersten beiden Menüpunkte zeigt, den Rest dagegen innerhalb der Sub-Menüs.
|
|
|
|
|
|
|
|
Ähnliche Themen |
ie7 verhaut alles -.- was tun?
Explorer verhaut fast die ganze Website.
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
3D Menü
Pop up menü
|
|