Div im Hintergrund

Hallo,
ich bastle mal wieder ein bissl und zwing mich nur mit dem nodepad die Seite fertig zu machen.
Aktuell hab ich ein kleine Porblem, ich würde gern, einen dicken roten streifen in den Hintergrund legen, am liebsten ein div mit Hintergrundfarbe, um den rot/orangen streifen in der mitte der seite über die komplette breite zu „strecken“.
Versuche mit rechts und links ein div daneben legen sind gescheitert (eher wohl an mir) und mit der z achse wills auch nicht klappen.
Design sonst ist erstmal nicht so wichtig (ich weiss, das banner und die zwischenbild ist noch nicht 100% auf einer ebene :wink:.
Sollte jemand sonst noch einen Fehler im html sehen, bitte brüllen :smile:
Zum guckili machen: http://mombeach.ath.cx:6551/chor/pages/index.php.
Btw, nicht wundern, die Seite kommt aus einem CMS, die reines html/css als Vorlagen verarbeiten kann :smile:
danke und gruss

Hallo Genius malignus,

ich bastle mal wieder ein bissl und zwing mich nur mit dem
nodepad die Seite fertig zu machen.

das ist schnon mal gut :smiley:

Aktuell hab ich ein kleine Porblem, ich würde gern, einen
dicken roten streifen in den Hintergrund legen, am liebsten
ein div mit Hintergrundfarbe, um den rot/orangen streifen in
der mitte der seite über die komplette breite zu „strecken“.

Ok. Ich verstehe was du meinst.

Versuche mit rechts und links ein div daneben legen sind
gescheitert (eher wohl an mir) und mit der z achse wills auch
nicht klappen.

Das wäre alles auch ein bisschen kompliziert.

Sollte jemand sonst noch einen Fehler im html sehen, bitte
brüllen :smile:

http://validator.w3.org/check?verbose=1&uri=http%3A%…

Also… es gibt viele Ansätze.

Am einfachsten und logischsten wäre es wahrscheinlich, wenn du diesen Streifen in ein JPEG-Bild speicherst, welches du 210 x 1px groß machst. Dann lässt du es per background-image in die Seite laden und mit background-repeat entsprechend wiederholen. Durch background-position kannst du es dann genau positionieren.

Hier kannst du ein Beispiel mit Code sehen.

http://www.css4you.de/background-position.html

MfG, Florian J.

Hallo

das ist schnon mal gut :smiley:

anders gehts nicht :wink:

Sollte jemand sonst noch einen Fehler im html sehen, bitte
brüllen :smile:

http://validator.w3.org/check?verbose=1&uri=http%3A%…

die Fehler seh ich auch, aber wie oben geschrieben, steck ich noch ein bissl in den Kinderschuhe und seh keinen Ansatz, wie ich es besser machen könnte. Einen Tipp? Vorallem da sich die Fehler ja wiederholen und seltsamerweise z.b. validome (ja ich gebs zu, ich such einen auf deutsch) andere Daten auswirft

Also… es gibt viele Ansätze.

Am einfachsten und logischsten wäre es wahrscheinlich, wenn du
diesen Streifen in ein JPEG-Bild speicherst, welches du 210 x
1px groß machst. Dann lässt du es per background-image in die
Seite laden und mit background-repeat entsprechend
wiederholen. Durch background-position kannst du es dann genau
positionieren.

Hier kannst du ein Beispiel mit Code sehen.

http://www.css4you.de/background-position.html

daran dachte ich auch schon, werd ich dann wohl auch so machen. Ein ich dachte mir halt, das es mit dem div im hintergrund vielleicht leichter ist :frowning:

MfG, Florian J.

gruss und dank

Hallo Genius malignus,

die Fehler seh ich auch, aber wie oben geschrieben, steck ich
noch ein bissl in den Kinderschuhe und seh keinen Ansatz, wie
ich es besser machen könnte. Einen Tipp? Vorallem da sich die
Fehler ja wiederholen und seltsamerweise z.b. validome (ja ich
gebs zu, ich such einen auf deutsch) andere Daten auswirft

natürlich gibt es deutsche Validatoren, die die fehler anders ausgeben. Aber selbst wenn man erst noch lernen muss, die Fehlerangaben richtig zu deuten (was selbst manchem Profi schwer fallen kann), ist es doch besser sich von Anfang an an diesen „offiziellen“ Validator zu gewöhnen. Nicht nur, dass dies Standard ist, sondern auch, dass man gerade dadurch lernt. Meistens stehen auch Hilfen oder Erklärungen dabei (natürlich auch auf Englisch), aber damit sollte es klappen.

Noch ein Tipp: Die meisten angezeigten Fehler beziehen sich nicht unbedingt auf das angezeigte Element. Manchmal kann es daran liegen, dass der Dokumententyp ein bestimmtes Attribut nicht erlaubt, oder das man vergessen hat, ein Element davor zu schließen.

Und eben weil diese Fehler meist nur aus dem „Kontext“ zu erklären sind, kann man nicht pauschal sagen: „so hier ist der Fehler, da die Lösung“, sondern der Autor des Codes muss sich darüber Gedanken machen. Wenn dann immer nochwas unklar ist, kann man für einen bestimmten Fehler hier im Forum fragen.

daran dachte ich auch schon, werd ich dann wohl auch so
machen. Ein ich dachte mir halt, das es mit dem div im
hintergrund vielleicht leichter ist :frowning:

Hmm… kommt drauf an, was genau leichter für dich bedeuted. Natürlich ist das realisierbar. Aber dabei muss man auf position: absolute zurückgreifen, was ich eigentlich nie als Tipp an Anfänger weitergebe, da man genau wissen muss, wie sich die einzelnen Elemente zu einander verhalten und was danach kommt.

Zudem würde man bei dieser Lösung gegen das „Inhalt-von-Layout-Trennungs-Gesetz“ verstoßen. Man sollte im Übrigen dafür mal einen vernünftigen Namen finden oder ihn mir sagen :smiley:. Denn du müsstest ja einen Unterteilungs-Container (div) anlegen, der leer wäre, um das Layout umzusetzen.

Um dies zu umgehen könntest du wiederrum Skip-links (Gehe zur Navigation, Gehe zum Inhalt, etc.) darin platzieren, welche du als Liste auszeichnest und per CSS entsprechend versteckst. Aber dann hättest du wiederrum nur ein Element in dem div, was die Sinnlosigkeit nicht gerade behebt.

Du siehst, es ist schon etwas komplizierter, das alles mit einem „div“ zu machen. Nicht zuletzt wegen der http://tinyurl.com/2d5ff9l :wink:

MfG, Florian J.

Hallo,
hmmm suppe *sabber*

aber ich hab den Fehler gefunden, Freund hats mir gezeigt, ich hab einfach 2 Leerzeichen vergessen gehabt… arg :wink:, darauf muss man erstmal kommen :frowning:
Aber danke :wink:
gruss