CSS - Kein Hintergrund mehr

AukeArts · 27.01.2011

Guten Abend zusammen,
ich habe ein kleines Problem, was wie ich schätze wohl eine Anfängerfrage ist

Also.
Ich möchte für meinen Vater eine reine HTML Seite machen und zu diesem Zwecke habe ich ein Horizontales DropDown Menü gemacht.
Soweit klappt alles wunderbar, jedoch passt das mit dem Hintergrund nicht.

In der CSS Datei habe ich zuvor angegeben, dass der Hintergrund eine Grafik (1x30px /.gif) anzeigen soll. Das klappte auch soweit, jedoch war das ein absoluter Pfad. Danach wollte ich ihn zu einem Relativen Pfad machen und einfach nur Templeta/Navigation/navigation_verlauf_hover.gif eingegeben.

Das klappt allerdings nicht mehr. Bei anderen Stellen funktioniert diese Pfad jedoch. Warum ? Was habe ich flasch gemacht ?

Und noch eine kleine andere Frage.
Am unteren Rand der Seite wollte ich einen spacer machen, der immer genau so lang ist wie der Monitor an sich.
Dazu habe ich width auf auto gestellt und eine Hintergrundfarbe zum testen dazu gegeben. In Dreamweaver klappt alles und ich kann auch die Farbe sehen, allerdings nicht im Browser.

HTML CODE

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Herzlich Willkommen</title>
<link href="CSS/dropDown.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.header {
    margin-left:auto;
    margin-right:auto;
    width:900px;
    height:75px;
}
.menu {
    margin-left:auto;
    margin-right:auto;
    width:900px;
    height:30px;
}
.background {
    background-color: #FFFAE8;
}

.main {
    margin-left:auto;
    margin-right:auto;
    width:898px;
    height: 900px;
    background-color:#FFF;
    border: 1px solid #999;
    box-shadow: 10px 10px;
    box-shadow: 10px 10px 5px #888;
    box-shadow: inset 2px 2px 2px 2px black;
    box-shadow: 10px 10px #888, -10px -10px #f4f4f4, 0px 0px 5px 5px #cc6600;
}
    
.spacer {
    height: 30px;
    width: auto;
    background-image: url(Template/Navigation/navigation_verlauf_hover.gif);
}


-->
</style>
</head>

<body class="background">
<div class="header">Raum für den Inhalt von  class "header"</div>
<div class="menu">
<div id"wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Herzlich Willkommen</a>
<ul></ul> <!-- end inner UL -->

</li> <!-- end main IL -->
</ul> <!-- end main UL -->

<ul>
<li><a href="#">Praxis</a>
<ul>

<li><a href="#">Team</a></li>
<li><a href="#">Räumlichkeiten</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main IL -->
</ul> <!-- end main UL -->

<ul>
<li><a href="#">Therapie</a>
<ul>

<li><a href="#">Therapie1</a></li>
<li><a href="#">Therapie2</a></li>
<li><a href="#">Therapie3</a></li>
<li><a href="#">Therapie4</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main IL -->
</ul> <!-- end main UL -->

<ul>
<li><a href="#">Anfahrt</a>
<ul></ul> <!-- end inner UL -->

</li> <!-- end main IL -->
</ul> <!-- end main UL -->

<ul>
<li><a href="#">Kontakt</a>
<ul>

<li><a href="#">Impressum</a></li>

</ul> <!-- end inner UL -->

</li> <!-- end main IL -->
</ul> <!-- end main UL -->

<br class="clearFloat" />

</div> <!--end navMenu -->
</div> <!-- end wrapper -->
</div>
<div class="main">Raum für den Inhalt von  class "main"</div>
<div class="spacer">Warum ist hier keine Farbe bzw. ein Hintergrundbild obwohl ich es in Dreamweaver sehe ?</div>
</body>
</html>

CSS CODE

HTML:

@charset "utf-8";


#navMenu {
    margin: 0;
    padding: 0;
}

#navMenu ul {
    margin:0;
    padding: 0;
    line-height:30px;
}

#navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position: relative;
    background-image: url(Template/Navigation/navigation_verlauf_hover.gif;
}

#navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    height:30px;
    width:178px;
    display:block;
    color:#333;
    border:1px solid #999;
}

#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
    display:inline;
}

#navMenu ul li:hover ul {
    visibility:visible;    
}

/*****************************************************************************/

#navMenu li:hover {
    background-image:#;
}

#navMenu ul li:hover ul li a:hover{
    
}

.clearFloat {
    clear:both;
    margin:0px;
    padding:0px;
}

Webseite:

Mit freundlichen Grüßen,
AukeArts

cebito · 27.01.2011

AW: CSS - Kein Hintergrund mehr

1. Verlass dich nicht auf das, was du im DW siehst!
2. Deine css liegt im Unterordner CSS, es sollte dir zu denken geben, wenn du aus der css den gleichen Pfad aufrufst wie aus der HTML-Datei, die ja einen Ordner drüber liegt.

Herr_D · 27.01.2011

AW: CSS - Kein Hintergrund mehr

schreibfehler zusätzlich zum Pfad

background-image: url(Template/Navigation/navigation_verlauf_hover.gif;

da fehlt ) vor ;

AukeArts · 27.01.2011

AW: CSS - Kein Hintergrund mehr

Danke schonmal.

@cebito
zu 1. was denkst du wie ich darauf gekommen bin, dass da was fehlt ?

zu 2. ich verstehe nicht ganz was du meinst. Könntest du das mir etwas näher erklären ? Dafür wäre ich dir wirklich sehr dankbar.

@ Herr_D
Auch an dich ein Danke. Hatte ich doch glatt übersehen, jedoch hat es nicht mein Problem gelöst

cebito · 27.01.2011

AW: CSS - Kein Hintergrund mehr

Sofern der Ordner "Template" im selben Verzeichnis wie die HTML liegt, musst du aus der css den Pfad so referenzieren:

Code:

    background-image: url([SIZE=4][B][COLOR=Red]../[/COLOR][/B][/SIZE]Template/Navigation/navigation_verlauf_hover.gif);

Damit gehst du erst ins höhergelegene Verzeichnis und wechselst dann nach "Template". So wie du oben referenzierst sucht er den Ordner "Template" im Ordner "CSS", da wird er ihn wohl nicht finden, deshalb gibts auch kein Hintergrundbild.

AukeArts · 30.01.2011

AW: CSS - Kein Hintergrund mehr

Wer hätte es gedacht, es funktioniert

Vielen Dank Cebito.

Im nachhinein ist es auch vollkommen logisch ^_^

Mit freundlichen Grüßen,
AukeArts