Layout mit 3 Hintergrundgrafiken

[lisali]

Guten Morgen!

Ich hab es jetzt hinbekommen, dass die BC-Navigation an gewünschter Stelle ist, dankeschön!

Ich glaube so langsam gewöhne ich mir CSS an.

Achja... ist es eigentlich suboptimal <img src... > im HTML Code einzufügen und lieber dafür css zu verwenden? Ich meine, gibt es da irgendwelche Vor- und/oder Nachteile?

Momentan möchte ich zwischen der Navigation jeweils eine Grafik anzeigen lassen. Dort wo "grafik" steht. Also, ich lad es jetzt nochmals hoch.

Danke dir nochmals!

Lisa

 

[Maik]

Anstelle des mehrfach zu wiederholenden <img>-Elements kannst du die Grafik doch direkt als Hintergrundbild für die entsprechenden Listeneinträgen definieren.

mfg Maik

 

[lisali]

Ja, das wollte ich ja auch machen mit dem akutellen code, aber es funktioniert nicht.

Ich hab es so geschrieben:

#navi ul li .bg { background:url(img/nline.gif) no-repeat; width:1px;  }

und dann jeweils in HTML: <li class='bg'>

Aber irgendwie zeigt er mir nichts an.

 

[Maik]

Entferne mal das enthaltende Leerzeichen zwischen dem Elementtyp und dem Klassennamen.

In dieser Form handelt es sich nämlich um einen Selektor für Nachfahren, der in deinem Markup aber keine Übereinstimmung erzielt, und somit die Regel vom Browser auch nicht angewendet wird.

mfg Maik

 

[lisali]

Ahh... okay!

Super, ich freu mich... sieht schon fast so aus wie ich mir vorstelle! Und alles schön mit CSS!

Angenommen ich möchte nun auch einen Text ganz unten, jedoch innerhalb des Content-Bereiches, platzieren - müsste ich da was umstellen was meine Grafikdateien angeht oder könnte ich das auch einfach per CSS lösen?

 

[Maik]

Im Falle des Menüs war es noch ein Leichtes, da ja im Footer das untere Abschluß-Hintergrundbild für die beiden Spalten enthalten ist, und sich durch den vertikalen Versatz eine gewisse Höhe für die Menüspalte ergeben hat, in der sich der untere Text problemlos einbetten ließ.

Im Falle des rechten Spaltenblocks sieht's leider nicht so gut aus, denn erstens besitzt der dazugehörige Abschnitt im unteren Hintergrundbild keine ausreichende Höhe, und zweitens hast du schon für die rechte Hälfte im Footer drei Verweise vorgesehen:

Mediadaten | Impressum | Datenschutz

Wenn kategorisch auszuschließen wäre, dass der Inhaltsumfang in der Menüspalte jemals größer ausfällt, wie im DIV #content, würde dir mein gestern schon angesprochene und verlinkte Webmaster FAQ-Artikel Wie richte ich eine Box am unteren Rand der Elternbox aus? weiterhelfen.

Aber nochmal zur Erinnerung: Wenn in der Menüspalte doch mehr Inhalt steckt, sodass ihre Höhe größer ausfällt, als die des DIV-Blocks #content, wandert dieser Text nicht mit nach unten, sondern verharrt in seiner Ausgangsposition.

mfg Maik

 

[lisali]

Dankeschön, das hat mir wieder echt weitergeholfen! Besonders das mit dem FAQ-Artikel!

Also, ich habe es jetzt zwar nicht direkt ausprobiert den Footer an die Stelle zu setzen, aber links im Menü habe ich es hingekriegt.

Jetzt wollte ich erstmal den Content-Bereich gestalten für die Startseite. Wie man sieht sind rechts im Content 3 Listeneinträge. Also, einmal das Twitter-Logo, dann meine Menüpunktgrafik und rechts daneben die Titelbeschreibung.

Ich möchte jetzt jedoch, dass das Logo jeweils ganz ganz links ist (so wie es momentan ist und der rechts ganz rechts am anderen Ende.
Dazu müsste ich wahrscheinlich das Logo aus dem Listeneintrag löschen, oder?

Und beides geteilt in Div's setzen oder eher in < p >'s ? Wo liegt da eigentlich der Unterschied?

 

[Maik]

Wieso muß das Logo aus der Liste entfernt werden, wenn der benachbarte Text ("Twitter") nach rechts außen wandern soll?

Da das relevante <li>-Element zwar eine Klasse namens ".right" besitzt, jedoch diese im Stylesheet überhaupt nicht auftaucht, setzt du für sie einfach diese Regel auf:

#content #right ul li.right { float:right; }

Der semantische Unterschied zwischen dem <div>- und <p>-Element liegt darin, dass ersteres einen allgemeinen Bereich (Division) umschreibt, und letzteres einen Textabsatz markiert.

Übrigens muß ein ID-Bezeichner im HTML-Dokumentbaum eindeutig sein, heißt: er darf darin nicht mehrmals vergeben werden (betrifft bei dir die <div>-Elemente mit der ID #top).

mfg Maik

 

[Maik]

Dankeschön, das hat mir wieder echt weitergeholfen! Besonders das mit dem FAQ-Artikel!

Also, ich habe es jetzt zwar nicht direkt ausprobiert den Footer an die Stelle zu setzen, aber links im Menü habe ich es hingekriegt.

Und nun füge in der rechten Spalte weiteren Inhalt ein, der die Mindesthöhe (600px) von #menu überschreitet, und beobachte, wie sich der untere Text in der Menüspalte verhält.

Ich hab dich hier aber schon zweimal darauf aufmerksam gemacht, dass die Box, wenn sie an dieser Stelle im HTML-Code notiert und mit CSS entsprechend formatiert wird, in ihrer Ausgangsposition stehen bleibt, wenn der Inhalt in der benachbarten Spalte zunimmt.

Um genau das zu vermeiden, hatte ich diesen "Textblock" auf deine Frage

Eins fällt mir dabei jetzt schon ein. Also, ich möchte gaanz unten im Menü (jedoch noch vor der Menü-unten-Grafik) so nen kleinen Text hinmachen, dass zwar auch "im Inhalt" drin ist, jedoch irgendwie eher wie unten angeheftet ist und sich vom eigentlich Inhalt (darüber) trennt. Wie kriege ich das hin? Ich denke immernoch in Tabellen... leider.

in meinem Modell (siehe Post #26) im Footerbereich eingebunden, da dieser ja immer nach unten geschoben wird, unabhängig, wie umfangreich der jeweilige Spalteninhalt ist. Denn laut deiner "Konzept-Skizze" (http://www.tutorials.de/forum/attachments/css/49985d1260526494-konzept.gif) ist es dir doch wichtig, dass sich die Höhe der Menüspalte immer automatisch der Inhaltspalte angleichen soll (vermutlich dann auch umgekehrt), und das dürfte sicherlich den "Textblock" am unteren Rand miteinbeziehen.

mfg Maik

 

[lisali]

Vielen Dank für die ausführliche Erläuterung. Habe soweit auch alles bereinigt soweit ich das überblicken kann! Das mit dem Footer werde ich noch probieren, wenn ich Zeit dazu finde.

Ich würde gerne eine Frage stellen zur optimalen Lösung meines Sprechblasen-Problems auf der Seite. Also, ich hab da irgendwie mehrere div's verschachtelt und wollte jeweils mit der Datei spike_left.gif und spike_right.gif so ein Icon-Pfeil setzen für die Sprechblase der letzten Foren-Einträge.
Möchte ich nun aber abwechselnd links und rechts jeweils den "User reden lassen", ergeben sich erstmal jetzt das Problem, dass es nicht in einer neuen Zeile passiert. Also, was so eine Formatierung angeht von mehrspaltigen Dingen in CSS bin ich echt unentschlossen wie ich da rangehen sollte, deshalb wäre ich echt sehr dankbar um weiteren Rat, auch wenn ich mich schon schlecht fühle, weil du mir schon so viel geholfen hast!

LG,

Lisa