Hover Menü

[Kathii89]

Hallo allerseits!
Habe ein Problem mit meinem Menü und alleine komme ich einfach nicht weiter.
Habe ein horizontales Hover Menü erstellt mit zwei verschiedenen Bildern.
Liegen die Bilder richtig übereinander, so wie ich mir das vorstelle, verschiebt sich der Text.
Wenn ich die Einstellungen für den Text bei "normal" und beim "drüberfahren" angleiche, bewegt sich zwar der text nicht mehr, aber dann ist das Bild verschoben..
Kann mir jemand weiterhelfen?
Hier noch der Menü-Teil der css zum drüberschauen..

Vielen Dank,
Kathrin


body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: #fff; background-color: #fff;

}

ul#Navigation {
position: absolute; top:-3%; left:0%; right: 0px;
text-align: center;
border: none;
background-image: url("menurosa.png")
}
ul#Navigation li {

list-style: none;
display: inline;
margin: 0%; padding: 0%;
}

ul#Navigation a, ul#Navigation span {

float: left; width: 7em;
margin: 0.7em; padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
text-transform: uppercase;
text-align: center;

padding-right: 10px;
border-left-color: white; border-top-color: white;
color: white; background-image:url ("menurosa.png");
}
* html ul#Navigation , * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w/idth: 6em;
}
ul#Navigation a:hover, ul#Navigation span {
float: left; width: 7em;
margin: 0em; padding: 0.9em 1em;
text-decoration: none; font-weight: bold;
text-transform: uppercase;
text-align: center;

padding-right: 20px;
border-color: #FF69B4;
border-left-color: none; border-top-color: none;
color: white; background-image:url("menuhubbel3.png");
}

[sejuma]

Ein Link zur kompletten Problemseite wäre hilfreich.
Ausgehend von deinem CSS-Code könnte es folgende Ursachen haben:

a) absolute Positionierung (besser darauf verzichten und nur mit float und margin positionieren)

b) unterschiedliche Einheiten em und px (besser: einheitliche Einheiten verwenden)

c) font-weight: bold beim hovern (dadurch benötigt die Schrift mehr Platz)

Möglicherweise hilft dir diese Anleitung weiter: http://www.ohne-css.gehts-gar.net/0073.php

[Kathii89]

Also ich hab es jetzt mal auf meinen Server geladen. Zu finden unter www hello-katty de

Hab außerdem noch das Problem, dass unten ein weißer Rand bleibt und der <center> befehl in der html funktioniert leider auch nicht..

Hier meine komplette css


body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: #fff; background-color: #fff;

}

ul#Navigation {
position: absolute; top:-3%; left:0%; right: 0%;
text-align: center;
border: none;
background-image: url("menurosa.png")
}
ul#Navigation li {

list-style: none;
display: inline;
margin: 0%; padding: 0%;
}

ul#Navigation a, ul#Navigation span {

float: left; width: 7em;
margin: 0.7em; padding: 0.2em 1em;
text-decoration: none; font-weight: bold;
text-transform: uppercase;
text-align: center;

padding-right: 10px;
border-left-color: white; border-top-color: white;
color: white; background-image:url ("menurosa.png");
}
* html ul#Navigation , * html ul#Navigation span { /* Korrektur fuer IE 5.x */
width: 8em;
w/idth: 6em;
}
ul#Navigation a:hover, ul#Navigation span {
float: left; width: 7em;
margin: 0em; padding: 0.9em 1em;
text-decoration: none; font-weight: bold;
text-transform: uppercase;
text-align: center;

padding-right: 20px;
border-color: #FF69B4;
border-left-color: none; border-top-color: none;
color: white; background-image:url("menuhubbel3.png");
}







P.boxelement1
{
background-image: url(radfahrenkopie2.jpg); background-position: relative;
padding: 50% ; margin-top:-1%; margin-left:-1%; margin-right:-1%; margin-bottom: 0%;
background-repeat: no-repeat;


}


P.boxelement2
{
background-image: url(rosahintergrund.jpg);
background-position: relative;
padding: 27% 18%;
margin-top: -83%; margin-left: 50%;
background-repeat: no-repeat;
opacity: 50%;
style= filter:alpha(opacity=75%); -moz-opacity: 0.75; opacity: 0.75;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-khtml-border-radius:30px;
border-radius:30px;
behavior:url (border-radius.htc);

}


Vielen vielen Dank!

[djheke]

Meinst du so.
http://www.gipspferd.de/forumhilfe/test/

[Kathii89]

Oh wow!! Vielen Dank!
Was würd man nur ohne Hilfe machen!

[Kathii89]

Eine Frage hab ich noch!
Hab jetz das Hintergrund-Bild doch wieder in ein boxelement gepackt, da ich verschiedene hintergrundbilder verwenden will und es sonst nur halb zu sehen ist.
Möchte, dass man genau soweit scrollen kann bis das Bild aus ist.
Mit dem boxelement hab ich jetzt jedoch das Problem wie vorher, dass darunter noch freier weißer platz ist.
Gibts i-eine Möglichkeit den wegzubringen?

[Azra]

Pack das Bild doch einfach als <body> Hintergrund ins CSS. Schönes Bild übrigens

[djheke]

Ehre wem Ehre gebührt.
Die gezeigte Zentriermethode ist übrigens von Stu Nicholls und irgendwo auf
http://www.cssplay.co.uk/menus/ zu finden.

[Kathii89]

Danke!
Hab leider noch keine anderen...

Hmm.. Das hab ich schon gehabt.. Aber dann wird das Bild abgeschnitten und ich kann nicht nach unten scrollen.. Wie könnte ich das ändern?

[Azra]

Es ist möglich das Bild mit purem CSS skalieren zu lassen (an die Größe des Browserfensters angepasst. Jedoch gibt es je nach Skalierung manchmal unschöne gestauchte und verzerrte Darstellungen - http://paulmason.name/blog/item/full-screen-background-image-pure-css-code

Die schönere Variante wäre mit JavaScript umsetzbar (wie auf meiner Webseite), dich bei deinem Wissensstand allerdings nun auch noch mit so etwas herum hantieren zu lassen wäre grob fahrlässig

Es ist aber sowieso "nur" Hintergrund, den sollte man nie scrollen müssen sondern den Inhalt. Du bearbeitest die Webseite gerade sowieso für deinen Bildschirm. Denk an andere, ich habe z.B. rechts eine weiße Fläche weil das Bild zu klein ist.

Also: Entweder du benutzt das CSS oben, oder speicherst das Bild einfach größer ab (1680x900) und musst damit leben dass auf kleinen Bildschirmen etwas weg fällt. Scrollbalken die nicht für Inhalt genutzt werden sind unschöner als ein abgeschnittenes Bild.

[Kathii89]

Wenn ich das Bild als Hintergrund nehme, funktioniert i-wie mein boxelement nicht mehr.. Und ich würde trotzdem gern nach unten scrollen, weil da ja auch die rosa Box noch hinsollte..
Hmm

[Azra]

Am besten du fängst nochmals von ganz vorne an und liest dich erstmals auf http://de.selfhtml.org schlau. Es bringt nichts wenn wir dir hier dein HTML korrigieren und du sowieso nicht verstehst was da passiert

Schonmal deine Seite im Internet Explorer angeguckt? -du machst beim HTML-Grundgerüst schon fehler. Ich stehe für Fragen auch gerne per E-Mail (oder messenger) bereit, so bringt das nix.