Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Navigation – background-image wird im Browser nicht angezeigt.“

Vansoul

Noch nicht viel geschrieben

Hallo Leute,

ich bin am zweifeln und finde den Fehler nicht. Ich habe schon so viel ausprobiert und nun weiß ich nicht mehr was ich gemacht habe.
Die Navigation, die als Hintergrund aus einer Grafik besteht, wird im Programm da gestellt.
Wenn ich die Seite im Browser anschaue, wird die Hintergrundgrafik nicht angezeigt.

Hat jemand eine Idee? Habe ich irgendwas vergessen?

LG Rogér


Code:
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 1em;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
body, html { 
font-size: 100.01%; 
background: #000 url(../hp-bilder/back.png) no-repeat fixed right bottom; 
text-align: center; 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
}
a { 
text-decoration: none; 
}
/*****Schrift*****/
p { 
color: #fff; 
font-size: 0.83em; 
font-family: georgia, helvetica, verdana; 
line-height: 1.375em; 
font-weight: normal; 
font-style: normal; 
text-align: left; 
word-spacing: normal; 
letter-spacing: normal; 
padding: 10px 0 0; 
}
/*Geruest*/
#wrapper { 
position: relative; 
width: 860px; 
height: auto!important; 
height:100%; /* IE6 */ 
z-index: 10; 
min-height: 100%; 
margin: 0 auto 0; 
padding: 0; 
}
#footer { 
position: relative; 
clear: both; 
height: 30px; 
width: 100%; 
z-index: 10; 
padding: 0; 
margin-top: -30px; 
}
#main { 
position: relative; 
width: 860px; 
height: auto; 
z-index: 20; 
margin-bottom: 30px; 
padding: 0; 
}
.nonfoot { 
line-height: 50px; 
width: 860px; 
height: 30px; 
clear: both; 
padding: 0; 
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
/*****Inhalt*****/
#header { 
background-image: url(../hp-bilder/headback.png); 
background-position: left top; 
position: relative; 
width: 860px; 
height: 200px; 
z-index: 30; 
padding: 0; 
}
#ct { 
position: relative; 
width: 860px; 
height: auto; 
z-index: 30; 
margin-top: 10px; 
padding: 0; 
}
#right { 
background-color: transparent; 
background-image: url(../hp-bilder/rback.png); 
background-repeat: repeat; 
position: relative; 
width: 620px; 
height: auto; 
z-index: 40; 
float: right; 
padding: 0; 
display: inline; 
}
#left { 
position: relative; 
width: 220px; 
height: auto; 
z-index: 40; 
float: left; 
padding: 0; 
}
.caera { 
position: relative; 
width: 600px; 
height: auto; 
z-index: 50; 
float: left; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 10px; 
padding: 0; 
}
/*****clear*****/
div.clear {
clear : both;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
} 
.clearleft {
clear : left;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
.clearright {
clear : right;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
/* für IE7 */
*:first-child+html .clear { 
min-height: 0; 
}
/* für IE6 */
* html .clear { 
height: 1%; 
}

/*****navigation*****/
#menu { 
width: 220px; 
height: auto; 
z-index: 60; 
float:left; 
margin: 0; 
padding: 0; 
}
#menu ul { 
list-style-type: none; 
margin:0; 
padding:0; 
}
#menu li { 
display: inline; /* for IE5 and IE6 */
margin:0; 
padding:0;
}
#menu a { 
text-decoration: none; 
line-height: 60px;
text-indent: -99999px; 
display: block; 
width: 220px; 
height: 60px; 
margin: 0 0 5px; 
padding: 0; 
}
#menu a:link, #menu a:visited { 
text-decoration: none; 
}

/***Jemenchamälion***/
#menu .1 { 
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 0; 
margin: 0; 
padding: 0; 
}
#menu .1:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px 0; 
margin: 0; 
padding: 0; 
}
#menu .1#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px 0; 
margin: 0; 
padding: 0; 
}

/***Helmchamäleon***/
#menu .2 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -60px; 
margin: 0; 
padding: 0; 
}
#menu .2:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -60px; 
margin: 0; 
padding: 0; 
}
#menu .2#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -60px; 
margin: 0; 
padding: 0; 
}

/***Teppichchamäleon***/
#menu .3 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -120px; 
margin: 0; 
padding: 0; 
}
#menu .3:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -120px; 
margin: 0; 
padding: 0; 
}
#menu .3#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -120px; 
margin: 0; 
padding: 0; 
}

/***Martinqiue-Anolis***/
#menu .4 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -180px; 
margin: 0; 
padding: 0; 
}
#menu .4:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -180px; 
margin: 0; 
padding: 0; 
}
#menu .4#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -180px; 
margin: 0; 
padding: 0; 
}

/***Blaukopfanolis***/
#menu .5 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -240px; 
margin: 0; 
padding: 0; 
}
#menu .5:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -240px; 
margin: 0; 
padding: 0; 
}
#menu .5#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -240px; 
margin: 0; 
padding: 0; 
}

/***Smaragdskink***/
#menu .6 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -300px; 
margin: 0; 
padding: 0; 
}
#menu .6:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -300px; 
margin: 0; 
padding: 0; 
}
#menu .6#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -300px; 
margin: 0; 
padding: 0; 
}

/***Blaue-Sägeschwanz***/
#menu .7 {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: 0 -360px; 
margin: 0; 
padding: 0; 
}
#menu .7:hover {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -360px; 
margin: 0; 
padding: 0; 
}
#menu .7#aktiv {
width: 220px; 
background-image: url(../hp-bilder/navigation.png); 
background-repeat: no-repeat; 
background-position: -220px -360px; 
margin: 0; 
padding: 0; 
}
 

metallica1990

Nicht mehr ganz neu hier

AW: Navigation – background-image wird im Browser nicht angezeigt.

EDIT:

Ok Sorry das war es wohl nicht ... welche CSS-Deklaration ist es denn? So viel Code ...

EDIT 2: Also ist es doch so (siehe Schneidfried's Posr unter diesem hier)
 
Zuletzt bearbeitet:

Schneidfried

Byteverbieger

AW: Navigation – background-image wird im Browser nicht angezeigt.

Genau,
du mußt die 'übergeordnete Farbe' und das Image trennen.
So etwa:
Code:
...
 background: #0000;
 background-image:url(../../back.png);
....
Das sollte gehen.

[edit]
Is' 'ne Sch..ßidee Posts zu löschen bzw. sinnentstellt zu ändern.
 
Zuletzt bearbeitet:

metallica1990

Nicht mehr ganz neu hier

AW: Navigation – background-image wird im Browser nicht angezeigt.

Also doch ... war mir dann nachher so unsicher ... Schande über mein Haupt
 

Vansoul

Noch nicht viel geschrieben

AW: Navigation – background-image wird im Browser nicht angezeigt.

Hallo und Danke für die schnelle Antwort.

Leider liegt nicht das Problem im Bodybackground sondern in der Navigation. Ich habe mal ein Screenshot gemacht.



So wird die Navigation im Programm angezeigt.
 
Zuletzt bearbeitet:

MyBad

localhorst

AW: Navigation – background-image wird im Browser nicht angezeigt.

Hi!

Du darfst Klassen oder auch IDs nicht einfach mit Zahlen beginnen lassen. Ich habe gesehen, das du deine li-Tags mit Klassennamen wie "1, 2 ,3 , etc." versehen hast. Das geht nicht. Benenne deine Klassen zum Beispiel in "menuepunkt1" usw. um (CSS und HTML). Dann sollte es auch mit den Hintergrundbildern klappen.

Edit:
Deine basic.css ist leer. Die brauchst du dann also gar nicht einzubinden.
 
Zuletzt bearbeitet:

Vansoul

Noch nicht viel geschrieben

AW: Navigation – background-image wird im Browser nicht angezeigt.

Man lernt nie aus. Danke MyBad, dass war der Fehler.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.856
Mitglieder
67.222
Neuestes Mitglied
Gregor
Oben