Background-Grafik überdeckt alles

[Cold Fire]

Die Struktur der Seite, die ich gerade am entwerfen bin, sieht wie auf dieser Grafik aus.




Ich ergab sich nun das Problem, dass sich (die sich wiederholende) Hintergrundgrafik über die ganze Bildschrimbreite erstreckt. Erst darunter kam der Container "#main". Wo liegt (vermutlich) mein Fehler? Wie wird #main auf #page (ebenenbezogen) plaziert?

[Laus]

Hallo

Poste bitte deinen Code oder, noch besser, da es eine menge Arbeit erspart, einen Link zur Seite das man sich auch darunter etwas vorstellen kann.
Meine Kristallkugel ist nicht mehr die beste und darum braucht sie schon etwas genauere Angaben um noch richtig zu funktionieren.

Gruß Xaver

[Cold Fire]

Der ganze Entwurf steht noch nicht Online. Daher habe ich ein ZIP-File mit allen benötigten Daten angehangen.

[Laus]

Du versuchst deine Seite aufzubauen wie ein Tabellenlayout. Dadurch wird das ganze eine ziemliche Divsuppe. Außerdem musst Du Hintergrundbilder im CSS als Background definieren und sie nicht als img in den HTML Code einbinden.

Gruß Xaver

[Cold Fire]

Du versuchst deine Seite aufzubauen wie ein Tabellenlayout. Dadurch wird das ganze eine ziemliche Divsuppe.

Kannst Du das näher erläutern bzw. was würdest Du anders machen?

Ich habe mich gedanklich nicht an einem Tabellenlayout orientiert. Ich kann ja erläutern, wie ich mir das gedacht habe.

1. #page ist für den Background nötig.
2. #main ist nur dazu da, um die Breite des Inhalts zu begrenzen (und für Background 2).
3. Das #header, #nav, #content und #footer innerhalb von #main plaziert werden, ist meiner sinngebung von #main nach klar.
4. Lediglich der Aufbau des #content-Inhalts ähnelt einer Tabelle. Wenn ich aber einen Text einem Bild zuordnen muss, geht das nicht anders. Ich kann das spaltenorientiert oder zeilenorientliert aufbauen. Eine andere Möglichkeit fällt mir, unabhängig von der Programmiersprache, nicht ein.

Außerdem musst Du Hintergrundbilder im CSS als Background definieren und sie nicht als img in den HTML Code einbinden.

Das hatte ich versucht. Ich hatte in dem CSS-File unter #page einen Background (background: url (/Grafiken/page_background_small.jpg);) festgelegt. Allerdings wird die Grafik so überhaupt nicht angezeigt - weder korrekt noch inkorrekt.


Wenn ich einen Denkfehler habe, kannst Du mich das ja wissen lassen.

[Laus]

Du hast PN

Gruß Xaver

[Cold Fire]

Danke. Soweit haben deine Änderungen funktioniert. Der Text, der die Grafik umflossen hat, hat mir nicht so gefallen bzw. passt der nicht in das Konzept. Aber das mußte ich ja auch nicht übernehmen. Der Rest funktioniert.

Im Anhang befindet sich ein CSS-File, in dem ich nur die Unterschiede zwischen deiner und meiner Version aufgeführt und gekennzeichnet habe. Wärst Du noch so nett und würdest mir verdeutlichen, weshalb so bzw. was durch die Unterschiede bewirkt wird? Ich will ja auch etwas dabei lernen.

[Laus]

Hallo

Das ist eigentlich ganz einfach und schnell erklärt.

Code: Alles auswählen

* {
      margin:0;
      padding:0;
}


Dies ist der sogenannte CSS Prolog. Da jeder Browser eigentlich doch sein eigenes Süppchen kocht was das Rendering der Seiten angeht, bringen wir alle Browser damit dazu ihre spezifischen Abstände auf 0 zu setzen um ein einheitliches Bild in allen Browsern zu erreichen.

Code: Alles auswählen

/* Mein Code */
#nav {
      width: 86%;                         /* <----- */
      list-style-type: none;
      background: url (/Grafiken/navigation.jpg);
      overflow: hidden;     
}


/* Dein Code */
#nav {
      width: 746px;                        /* <----- */
      margin-left:127px;                   /* <----- */
      list-style-type: none;
      background: url(Grafiken/navigation.jpg);
      overflow: hidden;
}


Eine Prozentangabe ist eigentlich nur bei sich dynamisch an die Breite des Viewpoint anpassende Seite wirklich sinnvoll. Da du ja eine feste breite definiert hast ist eine Angabe in px wesentlich besser und sinnvoller. Das margin left gibt eigentlich nur den Abstand der Navi vom Rand von #main an.

Wenn du den Text der die Grafik umfließt nicht so haben willst dann kannst du mit einer einfachen Angabe von margin-left:soundsoviel px; dafür sorgen dass der Text immer rechts neben dem Bild bleibt.

Gruß Xaver