Kein Hintergrundbild in CSS

Computer: Software & Programmierung HTML & CSS
#1

Nabend Leute… habe da ein Problem
und zwar bau ich gerade n Website aber aus irgendwelchen Gründen bekomm ich in die Navigation keine Hintergrundbild, wenn ich mit dem Mauszeiger drüberfahre…
wisst ihr Rat??
Danke schonmal im vorraus.

HTML Datei:

CONTENT-LEFT
CONTENT-RIGHT

CSS Datei:

#navigation{
float:left;
width:25%;
height: 540px;
margin:0 2px 0 0;
border:1px solid red;
}

#navigation ul{
list-style-type:none;
}

#navigation ul li{
margin:0 0 0 -25px;
height:35px;
}

#navigation ul li a{
color:#fff;
font-size: 18px;
padding:6px 186px 10px 0;
background-color:blue;
}

#navigation ul li a:hover{
color:red;
font-size: 18px;
padding:6px 186px 10px 0;
background:#fff url(„images/nav-bg.gif“)repeat-x left top;
}

P.S. nicht von den Farben irritieren lassen xD das ist nur zum Testen :wink:

#2

hi
sollte meines wissens funktionierten, ich bin nur nicht so fan von diesen definitionen alla
background:#fff url(„images/nav-bg.gif“)repeat-x left top;
mit hundert dingen auf der selben zeile. bitte erst mal aufteilen, danach schauen obs geht mit:url("/images/nav-bg.gif")
(slash vor dem relativen pfad)
lg niemand

#3

Moin,

aus irgendwelchen
Gründen bekomm ich in die Navigation keine Hintergrundbild,
wenn ich mit dem Mauszeiger drüberfahre…
wisst ihr Rat??

Das kann viele Gründe haben. Den richtigen hätte man einfacher mit einem Link zur Seite herausfinden können.

Ist überflüssig. div definiert eine Gruppe. Du hast aber nur ein Element, die Liste, in der Gruppe - also ist sie keine Gruppe. Wozu also das zusätzliche Tag? Nichts, was Du mit dem div machst, könntest Du nicht auch mit der ul machen.

CONTENT-LEFT

Bitte nicht die Semantik vergessen und keine div-Suppe kochen. Und IDs und Klassennamen sollten auch semantischer Natur sein. Wenn das „#left“ mal irgendwann auf der rechten Seite stehen soll, musst du das in allen HTML-Dateien ändern oder Du hast ein rechts klebendes Element, das „left“ heißt. Ungünstig.

#navigation ul li{
margin:0 0 0 -25px;

Soll das Listenelement links aus dem Bildschirm rausgehen?
Das ist immer gefährlich sowas.

font-size: 18px;

Niemals px für Schriftgrößen verwenden. Die lassen sich in älteren IEs nicht skalieren. Wer aber nicht gut sehen kann, wird sich bedanken :frowning:
Schriftgrößen sollte man immer an der Größe „1em“ für Fließtext ausrichten, denn das ist die Größe, die der Benutzer für sich als ideal im Browser einstellt.

padding:6px 186px 10px 0;

Du musst einen großen Bildschirm haben, wenn die Navigatio nur 25% breit sein soll, aber nach jedem Menüpunkt ein Abstand von 186px ist!?

#navigation ul li a:hover{
font-size: 18px;
padding:6px 186px 10px 0;

Ist hier beides redundant.

background:#fff url(„images/nav-bg.gif“)repeat-x left top;

Hier wird der Fehler liegen. Aber da wir das Bild nicht kennen, können wir es nicht abschließend sagen. Wenn das Bild nicht angezeigt wird, gibt es die Datei vielleicht nicht. Es könnte an der Groß-/Kleinschreibung liegen, der Pfad könnte falsch sein. Evtl. ist innerhalb der angegebenen Größe für den Link (inkl. padding) das Bild weiß.
Es könnte aber auch einfach daran liegen, dass zwischen dem Parameter „url“ und „repeat-x“ kein Leerzeichen ist! :smile:

Liebe Grüße,
-Efchen

#4

Moin,

ich bin nur nicht so fan
von diesen definitionen
mit hundert dingen auf der selben zeile.

Das verringert aber den Traffic, weil die CSS-Datei damit kleiner wird. Und wirklich unübersichtlich ist es höchstens für den Anfänger, der nicht genau weiß, welche Eigenschaften man alle zu einer zusammenfassen kann.

bitte erst mal
aufteilen, danach schauen obs geht

Wenn er diesen Tipp beherzigt, wird er feststellen, dass es geht - liegt aber nicht an der Zusammenfassung in einer Eigenschaft, sondern an dem fehlenden Leerzeichen :smile:

mit:url("/images/nav-bg.gif")
(slash vor dem relativen pfad)

Dann ist es ja kein relativer Pfad mehr. Sowas kann man niemandem raten, wenn man nicht das Filesystem und die dort abgelegten Dateien kennt.

Grüße,
-Efchen