Es werden keine Bilder angezeigt in der Vorschau

  • Hallo


    ganz kurz zu mir: Ich bin eine kompletter "Volldummi" der sich jetze in den Kopf gesetzt hat, sich selbst eine Homepage zu erstellen. Bin gerade dabei mir in der CSS-Datei alle divs zu erstellen. Nun habe ich mir gedacht als kompletter Quereinsteiger, dass das MAINDIV ein Bild im JPG-Format als Hintergrund erhält ein anderes div ein Bild im tif-format wegen Transparenz. Dazu habe ich in der CSS-Datei eingeben:


    div#wrapper
    {width: 100%;
    height: 100%;
    border-style:ridge;
    background: url(/Bilder/BODYBACKGROUND.jpg);
    text-align:center;}


    div#Haupttitel {
    text-align:center;
    width:1024px;
    height:250px;
    border:medium solid 2px;
    background: url(/Bilder/HAUPTTITEL.tif);}


    in der HTML-Datei sieht es so aus:


    <!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; charste=utf-8" />
    <title>Standardvorlage</title>
    <link a href="main.css" rel="stylesheet" type="text/css" />
    </head>


    <body>
    <div id="wrapper">
    <div id="Haupttitel"></div>
    </div>
    </body>
    </html>


    Und in der Vorschau sehe ich nur den Rahmen vom div#wrapper und die ganzen Bilder werden als Hintergrund nicht angezeigt.


    Könnte mir jemand bitte im "Newby-deutsch" erklären, was ich wie und wo falsch bzw. richtig mache?


    Danke schon mal Ave

  • Hi Ave,


    willkommen im Forum.
    Zuerst einmal: tif kannst Du für Webseiten nicht benutzen. Für transparente Grafiken empfiehlt sich gif, oder besser png.


    Schaust Du das ganze in der Dreamweaver-Vorschau an? Davon würde ich Dir abraten, schau es lieber gleich in einem Browser an. In der Vorschau kommt es oft zu Abweichungen die in Browsern nicht bestehen.
    Wenn das jpg-Bild nicht angezeigt wird: wie ist denn Deine Ordnerstruktur? Liegt das Bild BODYBACKGROUND.jpg wirklich an dieser Stelle?
    Hast Du die Möglichkeit die Website auf einen Webserver zu laden? Das wäre optimal um zu helfen, da kann man sich das ganze nämlich anschauen.


    Hier noch ein Link um etwas über die Web-Grafik-Formate zu lesen: http://help.adobe.com/de_DE/Go…83751001ea8cb3f-75d6.html


    Grüße max.m

  • Hallo max.m,
    ich danke dir erstmal für die tipps und nach dem ich das eine Bild in .png-24 "umgespeichert" habe wird es auch angezeigt. Desweiteren lag es auch wahrscheinlich daran, das ich bei den Optionen für die Sites als Hyperlinks relativ zu: Stammordner eingestellt war, das habe ich einfach mal umgestellt auf "Dokumente" und das JPG-bild sowie PNG-Bild wird in der Vorschau IM BROWSER dargestellt. Ich weiß zwar nicht was das mit dieser option aufsicht hat "Hyperlinks bla bla bla" aber daran scheint es ebenfalls gelegen zu haben wegen der bilder.


    Sobald ich mein Grundgerüst fertig habe werde ich es auch hochladen und dann können wir gerne darüber schauen.


    Aber einen kleinen einblick kann ich dir ja mal geben www.the-way-of-rene.de
    es ist nur eine damalige probe gewesen. also es sieht einfach schei... aus, aber es war meine erste selbstgeschriebene HTML-Datei und CSS-Datei, wo noch sehr viele fehler bestimmt drin sind. z.B. das die Anzeige einfach zu linkslastig ist. ich probiere schon die ganze zeit es aus das alles im browser zentriert dargestellt wird und sie sich jeweils den Auflösungen des "Besuchers" anpasst, und da komme ich einfach nicht weiter.

  • Hallo max.m,
    ich danke dir erstmal für die tipps und nach dem ich das eine Bild in .png-24 "umgespeichert" habe wird es auch angezeigt.


    Bitte. ;)


    wo noch sehr viele fehler bestimmt drin


    Auch hierzu noch ein Tipp wie die ganz einfach zu finden und dann auch zu beseitigen sind:
    http://www.validome.org/validate


    das die Anzeige einfach zu linkslastig ist. ich probiere schon die ganze zeit es aus das alles im browser zentriert dargestellt wird


    Mach mal aus


    div#wrapper {
    margin-left:5px;
    margin-right:5px;


    ein


    div#wrapper {
    margin: 0 auto;


    und sie sich jeweils den Auflösungen des "Besuchers" anpasst, und da komme ich einfach nicht weiter.


    Da kannst Du mal nach fluidem oder liquidem Layout googlen, findest einiges dazu. Ganz grob: Man arbeitet nicht mit absoluten Größen (Pixel) sondern relativen Größen (%).