CSS-Navigation mit "fehlenden Rundungen" in phpbb/IE
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
code
display
ecke
forum
http
image
krieg
list
opus
panel
position
quellcode
radius
runden ecken
rundung
tag
text
untere leiste
unteren leiste
url
-
Hallo,
ich habe für meine Homepage eine Dropline-Navigation gefunden, die mich soweit zufrieden stellt.
Da include bei html nicht funktioniert, habe ich den Quelltag/code">code in der overall_header.html nochmal eingefügt, Schriftgröße, blablabla angepasst.
Wenn man nun auf ein Navigationselement (schumi1331's GTS-Map, German Truck Simulator, Diverses) geht, erscheint unterhalb ja noch eine Leiste; und auf den phpBB-Seiten fehlen mir rechts in dieser zweiten Leiste die "Rundungen".
Beim IE fehlen alle diese Rundungen...
Quellcode der CSS:
/*
CSS3-only Horizontal Drop Line Tab Menu
http://www.skyrocketlabs.com
skyrocketlabs@gmail.com
*/
/* ARCHITECTURE */
body {
margin: 0;
padding: 0;
}
#wrapper {
width: 800px;
min-height: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
border: 1px solid #ccc;
overflow: hidden;
}
#top {
width: 800px;
height: 120px;
}
.line {
width: 800px;
height: 1px;
margin: 40px 0;
background: #ddd;
overflow: hidden;
}
/* IMAGES */
img.icon {
margin: 0 5px 0 0;
vertical-align: middle;
}
#panel {
width: 800px;
height: 220px;
padding: 40px;
text-align: center;
background: #dc0000 url(../img/panel-backgr.png) repeat-x;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
/* MENU STYLE - IGNORE EVERYTHING ABOVE THIS LINE IF YOU WISH */
#menua {
width: 800px;
height: 40px;
clear: both;
}
ul#nava {
float: left;
width: 800px;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
ul#nava li {
display: inline;
}
ul#nava li a {
float: left;
font: bold 1.3em arial,verdana,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* APPLIES THE ACTIVE STATE */
ul#nava .current a, ul#navb li:hover > a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #EE7621;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
/* THE SUBMENU LIST HIDDEN BY DEFAULT */
ul#nava ul {
display: none;
}
/* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
ul#nava li:hover > ul {
position: absolute;
display: block;
width: 760px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #EE7621;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
}
ul#nava li:hover > ul li a {
float: left;
font: bold 1.3em arial,verdana,tahoma,sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #EE7621;
}
ul#nava li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}
Es sollte doch eigentlich laufen, da der Code der gleiche ist, wie bei der html, die ich in die php include.
Da läufts: http://schumi1331.de
Da nicht: http://schumi1331.de/forum
Ich hoffe, ihr könnt mir helfen...
Gruß
schumi1331 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
-moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;
Damit kann der IE nix anfangen und ignoriert dementsprechend deinen Wunsch nach runden Ecken. Da klappt weder auf der HP, noch im Forum
BTW: Im IE 7 funktioniert die Navi überhaupt nicht.
FF
Beitrag zuletzt geändert: 31.8.2010 16:07:23 von fatfreddy -
Zum Thema IE:
IE unterstützt noch viele CSS Sachen nicht wie Rundungen etc:
-moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;
So wie es mir erscheint sollte es bei Opera auch nicht gehen!
Zum Thema Forum:
Du hast den Link-Tag an die falsche Stell gepackt. es gehört in den head!
Zudem gibt es bei deinem CSS Überschneidungen!
Entferne mal bei
ul#nava li a
background: url("../img/menu-parent.png") repeat-x scroll 0 0 #DC0000;
Dann geht es
Gruß
illuxio
-
Also nachdem, was ich so gefunden habe:
Beim IE muss da jedoch auf überflüssige DIV's gesetzt werden und dann per background-image und background-align(?) gesetzt werden.-moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -khtml-border-radius-bottomright: 10px; -
illuxio schrieb:
Zum Thema IE:
IE unterstützt noch viele CSS Sachen nicht wie Rundungen etc:
-moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px;
So wie es mir erscheint sollte es bei Opera auch nicht gehen!
Zum Thema Forum:
Du hast den Link-Tag an die falsche Stell gepackt. es gehört in den head!
Zudem gibt es bei deinem CSS Überschneidungen!
Entferne mal bei
ul#nava li a
background: url("../img/menu-parent.png") repeat-x scroll 0 0 #DC0000;
Dann geht es
Gruß
illuxio
eingefügt & entfernt sowie cache geleert, klappt aber nicht... :(
@nerdiantor:
Beim IE muss da jedoch auf überflüssige DIV's gesetzt werden und dann per background-image und background-align(?) gesetzt werden.
versteh ich nicht...
EDIT: mit Opera ist das Menu nicht rund, aber die untere Leiste wird an der richtigen Stelle angezeigt
mit IE will es gar nicht... :(
Beitrag zuletzt geändert: 31.8.2010 17:46:17 von schumi1331 -
IE unterstütz die Befehle nicht!
Daher muss du die Ecken als Hintergrund setzten via eines Div-tags. Dafür muss du für jede Ecke eine Grafik erstellen. Anders geht es bei IE noch nicht. Mit CSS3 soll das was kommen, aber ob Microsoft mal endlich ihren Browser tauglicher macht, will ich mal bezweifeln!
Gruß
illuxio
Beitrag zuletzt geändert: 31.8.2010 17:45:19 von illuxio -
aha, ok, ich überlebe es, wenn das Menu da rechteckig ist, aber wie kriege ich denn die untere Leiste beim IE unter die obere und nicht so weit rechts?
außerdem fehlt in jedem Browser (habs bei Firefox nicht getestet) auf den Forenseiten der rechte Teil der unteren Leiste -
Im moment würde es reichen wenn du:
ul#nava li:hover > ul li a
background: none repeat scroll 0 0 #EE7621;
Entfernst Damit hast du in FF auch die Rundungen im Forum
Gruß
illuxio -
ok, erstmal danke an alle... :)
2 Fragen bleiben mir aber noch:
1. Wieso wird die untere Leiste im IE soweit rechts eingeblendet?
2. Wie kriege ich auf der Forenseite nun den Abstand von der Kante in der unteren Leiste hin, so wie auf den anderen Seiten?
Gruß
schumi1331
PS: ich habe das neue Menu nun auch in meinen DL-Seiten eingefügt. Nach ein paar Anpassungen von Schriftgröße, etc abe ich beim Testen festgestellt, dass, wenn ich auf der oberen Leiste mit der Maus über die Menupunkte gehe, diese Menupunkte der Reihe nach orange (hover) werden. Wieso nur da? Ich bin langsam am verzweifeln... :)
Beitrag zuletzt geändert: 1.9.2010 17:05:35 von schumi1331 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
