relativer Pfad für stylesheet und Pics

[hardie82]

Hallo Leute,

ich habe ein Problem, was mich langsam in die Irre treibt und den Spaß an der Webprogrammierung sinken läßt. Für einen Vortrag wollt ich ein kleines Beispielprogramm mittel Spring und Velocity vorbereiten. Von den Funktionalitäten geht auch alles klar, nur das Layout bringt mir Kopfzerbrechen. Irgendwie habe ich anscheinend die Logik für die Pfadangabe von Dateien in einem Webprojekt nicht richtig verstanden. Denn ich habe ein Bild, dass ich in einer css-Datei als Hintergrundbild setzen möchte. Das Problem ist, dass er weder css-Datei noch das Bild (wenn es direkt als style-Attribute verwendet wird) richtig erkennt und anzeigt. Damit ihr das Problem halbwegs überschauen könnt, sende ich folgend den Code dazu:

Ordnerstruktur:

Webordner
|
|--WEB-INF
        |
        |---vm
               |---cdResult.vm   (=die Seite)
               |---style.css
               |---top_bg.jpg

So, das ist die Struktur. Die unwichtigen Ordner wie "lib" hab ich jetzt der Einfachheit halber weggelassen. Der Code der "style.css" sieht wie folgt aus:

.menu 
{
	background-image:	[color=red]url(top_bg.jpg);[/color] 
  	background-repeat:	repeat-x; 
  	height:				140px; 
  	width:				101%; 
  	position:			absolute; 
  	left:				0em; 
  	top:				0em;
}
.menu.a 
{
	font-family: 		Verdana, Arial, Helvetica, sans-serif;
	color: 				#5A912B;
	text-decoration:	none;
}
.uberschrift 
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #B82223;
}

Und zu guter letzt noch der Code meiner Template-Seite:

<html>
<head>
<title>Album Suche</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" [color=red]href="WEB-INF/vm/style.css"[/color]>

</head>
<body>


#parse('menu.vm')

<div style="position:absolute; left:3em; top:10em; width:90%">
<h3 class="uberschrift">CD-Archiv Suche</h3>
<hr>



<form name="suche" method="post" action="/CD_Velocity/searchCD">
...
</form>
</div>

</body>
</html>

Die kritischen Punkte hab ich mal rot markiert. Vielleicht kennt ja jemand von euch ein gutes Tutorial zum Thema "Pfadangabe in Webprojekten" oder hatte selbst einmal dieses Problem und hat es gelöst bekommen. Ich bekomme es einfach nicht hin, den Pfad richtig anzugeben. Er sollte schon relativ und nicht absolut sein, wegen der Portierbarkeit auf einen anderen Server. Ich danke jeden für seine Hilfe schonmal im Vorraus.

Gruß Hardie[/code]

 

[shoryuken]

Auf den WEB-INF Ordner kannst du per default (Tomcat) nicht zugreifen. Schieb die Dateien mal ins APP-Root.

gruß

 

[hardie82]

Hi, danke für die schnelle Antwort. Hat aber nichts bewirkt. Ist immernoch der gleiche Fehler. Ich habe auch an der Style-Sheet-Stelle nach dem Verschieben folgendes versucht:

1) href="vm/style.css"
2) href="style.css"

Funtkioniert aber beides nicht.

Gruß Hardie

 

[dsv fritz]

Und du hast sicher das CSS File im gleichen Ordner?
Ansonsten kannst du noch "./style.css" probieren.

 

[freez]

Liegt es ausschließlich am Hintergrundbild? Ich frage deswegen, weil ich in einem JSF Projekt Probleme mit einem Hintergrundbild für einen Button hatte. Es wurde einfach nicht angezeigt. Als ich dann mit dem Firefox und dem Addon WebDeveloper mir die CSS Datei anzeigen ließ, war das Bild plötzlich da. Auch im Internet Explodierer hat er mir kein HG Bild angezeigt.

Naja, und als ich dann die CSS Daten in die Seite selbst integriert hatte ging es auf einmal.

Das Komische an der ganzen Sache war aber, daß er meine restlichen Sachen sauber formatiert hat. Nur das Hintergrundbild wollte er nicht anzeigen. Ich bin bis jetzt nicht dahinter gestiegen, an was es liegt. Ich habe auch verschiedenste Formate bei der Pfadangabe ausprobiert, aber nix hatte geholfen.

 

[freez]

Noch ein Tipp (habe ich gerade gefunden): der IE6 mag scheinbar "background-image" nicht. Ich habe meinen Button endlich so formatiert gehabt, wie ich es brauchte, aber der IE wollte partou das Bild nicht anzeigen. Der FF macht es. Grund: Dem IE ist das Wort "background" scheinbar lieber. Mit diesem funktioniert es jedenfalls in beiden Browsern.