buttons in horizontaler navi rechts ausrichten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
blocken
button
code
display
grafik
helfen
image
index
inhalt
internet
kopfzeile
list
navigation
position
prinzip
problem
span
text
url
-
Hallo ihr Lieben!
Ich hab mal wieder ein Problem was ich nicht geregelt bekomme. Ist wahrscheinlich nur eine Kleinigkeit.
Ich habe eine horizontale Navigationsleiste Home, Kontakt, Impressum, Gästebuch und Forum. Ich möchte nun, daß diese buttons rechts ausgerichtet werden. also der Button Forum am rechten Seitenrand steht. Egal was ich auch probiere, es ist immer links ausgerichtet. Weiterhin funktioniert das hover nicht mehr. Die Farbe der Buttons soll sich beim darüberfahren mit der Maus verändern. Ich finde einfach die Fehelr nicht, hab auch keine Ahnung von webseitengestaltung, lese mir halt was ich brauche im Selbsthtml und auf anderen Seiten zusammen.
Wäre lieb, wenn ihr mir helfen könntet.
Das CSS sieht folgendermaßen aus:
html, body { width:100%; height:100%; overflow: hidden; color: #5b0890; background-color: #ede9ff; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 1em 0; text-align: left; /* Zentrierung im Internet Explorer */ } #header {position:relative; top:0px; padding:0px;} #background{position:absolute; z-index:1; width:100%; height:100%;} #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; scrollbar-base-color:#8C8CC6; scrollbar-3d-light-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#5b0890; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#000000; scrollbar-track-color:#c8bbef;} #content {padding:5px 20px 20px 20px;} #fixed {position:absolute; top:60px; left:5px; width:180px; z-index:10; padding:10px;} div#Seite { text-align: left; /* Seiteninhalt wieder links ausrichten */ margin: 0 auto; /* standardkonforme horizontale Zentrierung */ width: 100%; height:100%; padding: 0; } h1 { font-size: 1.5em; color: #5b0890; margin: 0; padding: 0em; text-align: center; } #menu {list-style-type:none; margin:0 auto 50px auto; padding:0; width:362px;} #menu li {padding:1px; margin:0; position:relative; width:180px; height:2.0em; z-index:100;} #menu li dl {position:absolute; top:40px; left:0; padding-bottom:0;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 180px; margin: 0; padding: 0; background: transparent;} #menu dt {margin:0; padding: 0;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left; width:180px; float:right; clear:right;} #menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #5b0890; font-weight: bold; text-align:center; border-left:1px solid #000;border-bottom:1px solid #000; border-right:1px solid #000; border-width:0 1px 1px 1px; padding:0.25em 0 0.75em 0;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {width:361px;} #menu li:hover dt a, #menu a:hover dt a {color:#5b0890; background:#ede9FF; border-left:1px solid #000; border-right:1px solid #000; border-bottom:1px solid #000; border-width:0 1px 1px 1px;} #menu dd a, #menu dd a:visited {background:#DFD9FF; color:#5b0890; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-top:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #000; border-bottom:1px solid #000; width:178px;} #menu dd a:hover {background: #5b0890; color:#ede9ff; border-left:1px solid #000; border-right:1px solid #000;} #menu b {display:block; overflow:hidden; height:2px; border-bottom:1px solid #000;} b.o1 {background:#5b0890; margin:0 5px;} b.o2 {border:1px solid #000; border-width:0 1px; margin:0 3px;} b.o3 {margin:0 2px; border:1px solid #000; border-width:0 1px;} b.o4 {height:2px; margin:0 1px; border:1px solid #000; border-width:0 1px;} b.Endstrich {height:2px; background:#5b0890; margin:0 1px;} #menu li:hover b.o2, #menu a:hover b.o2 {background:#CFC9FF;} #menu li:hover b.o3, #menu a:hover b.o3 {background:#DFD9FF;} #menu li:hover b.o4, #menu a:hover b.o4 {background:#ede9FF;} div#Inhalt { margin: 3.5em 0 1em 200px; padding: 0 1em; } * html div#Inhalt { height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */ margin-bottom: 0; } div#Inhalt h2 { font-size: 1.2em; margin: 1.2em 0; color: #5b0890; } div#Inhalt p { font-size: 1em; margin: 1em 0; } p#Kopfzeile { clear: both; color: #ede9ff; font-weight: bold; font-size: 1.83em; margin: 0; padding: 0.1em; text-align: center; position: fixed; top: 0px; width:100%; height:54px; background-color: #5b0890; border-bottom: 1px solid silver; } ul#Navigation { margin: 0; padding: 0; position: fixed; top: 55px; width:100%; text-align: center; border: none; background-image:url(../Grafik/bg.png); background-repeat:x; } ul#Navigation li { list-style: none; display: inline; margin-left:auto; margin-right:0; padding: 0; } ul#Navigation a, ul#Navigation span { float: left; width: 7em; margin: 0.2em ; padding: 0.2em 1em; text-decoration: none; font-size:0.80em; font-weight: bold; border: 1px solid black; border-left-color: white; border-top-color: white; color: #5b0890; background-color: transparent; } * html ul#Navigation a, * html ul#Navigation span { /* Korrektur fuer IE 5.x */ width: 8em; w\idth: 6em; } ul#Navigation span { border-color: black; border-left-color: black; border-top-color: black; color: #ede9ff; background-color: #5b0890; background-image:url(../Grafik/blende3.png); background-repeat:norepeat; } ul#Navigation a:hover { border-color: white; border-left-color: black; border-top-color: black; color: #ede9ff; background-color: #5b0890; } ul#Navigation div { clear: both; } p#Fusszeile { clear: both; color: #ede9ff; font-weight: bold; font-size: 0.83em; margin: 0; padding: 0.1em; text-align: center; position: fixed; bottom: 0px; width:100%; background-color: #5b0890; border-top: 1px solid silver; } -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich habe mir jetzt nicht Deinen geposteten Code angeguckt sondern bin direkt auf Deine Seite gegangen.
http://hypnoberatung.lima-city.de/
float: right für das Obere Menue:
ul#Navigation li { float:right;}
Änderungen für das linke Menue:
#fixed { top:100px;
statt, top 60px;
und dafür top: 40px; hier entfernen:
#menu li dl { top:40px; }
-
Ahh, super, mit dem float: right hatte ich auch schon rumgespielt, nur an der falschen Stelle. Nun muß ich nur noch die Beschriftung korrigieren.
Viiiiieeeeeeeeeeeeeeelen herzlichen Dank!
Allerdings besteht nach wie vor noch das Problem, daß die Schaltflächen nicht auf hover reagieren. Wenn ich mit dem Mauszeiger drüberfahre, sollten sie eigentlich dunkel werden, aber sie tuen gar nichts. -
#Navigation a:hover {background-color: #000;}
oder/und
#Navigation li a:hover {background-color: #000;}
sollte da helfen
vergegenwärtige Dir einfach mal das knoten-prinzip
<ul id="idname"> <li> <a href="#">hallo</a> </li> <li id="unterknoten"> <a href="#" id=unterunterknoten>hallo</a> </li> </ul>
#idname li a:hover {background-color: #000} //ist das selbe wie #unterknoten a:hover {background-color: #000} //ist das selbe wie #unterunterknoten:hover {background-color: #000}
//eigentlich sind die 3 beispiele nicht dasselbe aber ich will ja nur das prinzip deutlich machen...
alle codes ungetestet....
edit:
nee müll.
Der grund warum bei hover nix passiert (und sich übrigens die buttons auch nicht klicken lassen ) ist der z-index
dein div "scroller", verdeckt das menue (nicht optisch).
Lösung:
ul#Navigation { z-index:10;}
Mehr infos unter dem stichwort z-index in der Suchmaschine Deiner Wahl....
Beitrag zuletzt geändert: 22.11.2010 0:59:34 von simuliertes -
Bah, auf den z-index wäre ich nie gekommen. ja, ich kenne ihn, er regelt überlappungen, je höher der Wert, desto weiter oben liegt das Element.
Hab ihn jetzt auf 10 gesetzt und auch mal die Position auf absolute geändert. aber das Problem besteht immer noch.
Das Hover element hab ich ja drin, das sollte so eigentlich auch ok sein, hoffe ich doch mal.
haaa, ich habs!!! super, vielen Dank, ich hab einfach mal die Höhe der Kopfzeile von 54px auf 53 px geändert, wobei eigentlich der Balken top:55px gesetzt ist, aber jetzt geht es wieder. Weiß zwar nicth warum, aber hauptsache es geht.
Vieeeeeeeeeeeeelen Dank für Deine liebe Hilfe und Geduld.
Beitrag zuletzt geändert: 22.11.2010 1:39:44 von hypnoberatung -
Hi
versuche es mal indem du den Button einfachnach rechts floatest
#button { float: right; }
ciau
LOLOPALENKO -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
