nicht angemeldet
Besserer Stil: divs als Layouthilfsmittel
Hi!
Ich setzte mich seit einiger Zeit (6 Monate) mit HTML und CSS auseinander. Bisher habe ich meine Homepages mitttels Tabellen und Frames "gelayoutet". Nun habe ich hier im Forum einige Diskussionen über tables und frames als Mittel fürs Seitenlayout gelesen und dabei konnte ich feststellen: tables und frames seien kein gutes Mittel hierzu. Besser solle man divs+CSS verwenden.
Ich habe mir jetzt einige Seiten angeschaut. Z.b. http://thunderbird.bric.de/ . Die stützen sich nur auf divs und css. Aber wie macht man da zB. das Menü? Ich werde aus deren Quelltext irgendwie nicht schlaue - vll weil ich mich noch nicht so tief mit Klassen und id's auseinandergesetzt habe?!
Wie erreicht man z.B. das das Menü von einem border mit runden ecken eingefasst wird? Oder: Wenn man über die Links im Menü fährt wird die ganze Breite grau? Mit JavaScript? Zum Hintergrund: Das Menü hat ja einen Hintergrund der nach rechts immer schwächer wird - wie macht man das?
Ich hoffe, ihr könnt mir dabei helfen - sodass auch ich mich bald zu diejenigen zählen kann, die keine Tables oder Frames brauchen ;)
Grüße,
euer Fabian
-
hi,
Bisher habe ich meine Homepages mitttels Tabellen und Frames "gelayoutet". Nun habe ich hier im Forum einige Diskussionen über tables und frames als Mittel fürs Seitenlayout gelesen und dabei konnte ich feststellen: tables und frames seien kein gutes Mittel hierzu.
stimmt.
Besser solle man divs+CSS verwenden.
jein.
zuerst einmal solltest semantisch sinnvolles HTML schreiben. also <h1> etc. für überschriften nutzen, <p> für absätze, etc.
wenn du für alles nur divs nimmst, und diese anschliessend über CSS formatierst, hast du immer noch eine "tag soup", die einem tabellenlayout in ihrer unsinnigkeit nur um wenig nachsteht.Ich habe mir jetzt einige Seiten angeschaut. Z.b. http://thunderbird.bric.de/ . Die stützen sich nur auf divs und css. Aber wie macht man da zB. das Menü? Ich werde aus deren Quelltext irgendwie nicht schlaue - vll weil ich mich noch nicht so tief mit Klassen und id's auseinandergesetzt habe?!
das sieht man doch recht leicht, suche nach der kommentarzeile
<!-- START OF MENU -->darunter findest du dann das menü, dass hier als definitionsliste aufgebaut ist.
wenn dir elemente wie <dl>, <dt> und <dd> nichts sagen, schlag' sie in selfhtml nach.Wie erreicht man z.B. das das Menü von einem border mit runden ecken eingefasst wird?
ist doch beim beispiel gar nicht der fall?
Oder: Wenn man über die Links im Menü fährt wird die ganze Breite grau? Mit JavaScript?
die links sind vermutlich mit display:block formatiert, was sie über die gesamte breite ihres elternelementes gehen lässt.
Zum Hintergrund: Das Menü hat ja einen Hintergrund der nach rechts immer schwächer wird - wie macht man das?
hintergrundbild mit einem farbverlauf reinsetzen.
Ich hoffe, ihr könnt mir dabei helfen - sodass auch ich mich bald zu diejenigen zählen kann, die keine Tables oder Frames brauchen ;)
von jetzt auf gleich klappt das nicht, da musst du dich schon intensiver mit dem layouten per CSS auseinandersetzen.
was die umsetzung eines menüs als liste angeht, ist z.b. http://css.maxdesign.com.au/listamatic/ eine sehr gute anlaufstelle.
gruss,
wahsaga-
Hi!
ich hänge mich mal hier an, weil ich genau dasselbe Grundproblem gerade wälze.
Ich möchte das hier http://physalia.de/tmp/kirche_mono.gif umsetzen. Ich würde das mit einer einfachen Tabelle machen, also eine Zelle für das Menü, eine für den Contentblock und aussenrum je eine mit fixierter Breite für Rahmen bzw. Bildchen.
Nun hab ich ja mit der letzten Site schon in CSS und DIV-Boxen reingeschnuppert. Und da hier ja gebetsmühlenhaft von Tabellen ab und zu CSS zugeraten wird, bin ich da durchaus bereit, mich weiterzuentwickeln ;-)
Rahmen und Menü-/Contentblock sind ja auch einfach zu machen, denke ich. Aber _wie_ nur würde ich das Rahmenproblem angehen. Mit einer border-Definition kann ich ja die 'Kirche' nicht ausnehmen? Die soll natürlich nach unten offen bleiben...
Also wie würde man das machen? Irgendwie eine Box mit der Kirche drin _über_ dem Rahmen einer anderen Box positionieren? Ginge das? Wie?
Für einen Fahrplan der generellen Konstruktionsidee wäre ich dankbar.
Oder wäre hier - ob der Einfachheit - eine Tabellenkonstruktion doch die belastbarere Methode?
Herzliche Grüße
Nicola
-
Hi,
Rahmen und Menü-/Contentblock sind ja auch einfach zu machen, denke ich. Aber _wie_ nur würde ich das Rahmenproblem angehen. Mit einer border-Definition kann ich ja die 'Kirche' nicht ausnehmen? Die soll natürlich nach unten offen bleiben...
schon klar. Aber das geht doch leicht mit DIVs. definiere den hellen block mit der hintergrundfarbe und border-top -bottom und -right. Dem dunklen gibst Du border-left und -bottom. für die dunkle hintergrundfarbe der linken box muß wohl ein beide boxen umschließendes DIV her, wenn die Höhe flxibel sein soll. Die Kirchengrafik kommt dann auch einfach ins umschließene DIV. Zu guter letzt dann noch margin-top für die helle box und fast fertig.
Gruß
Ingofreundliche Grüße
Ingo-
Hi!
schon klar. Aber das geht doch leicht mit DIVs. definiere den »»
Leicht. Schon klar ;-) Ich weiss gar nicht warum, aber wenn man das gerade erst lernt, ist das Boxen-System _viel_ verwirrender als Tabellen... Für mich jedenfalls. Ich werd es mal ausprobieren, sobald der Kleine Mann mal wieder schläft.
hellen block mit der hintergrundfarbe und border-top -bottom und -right. Dem dunklen gibst Du border-left und -bottom. für die dunkle
Völlig klar soweit.
hintergrundfarbe der linken box muß wohl ein beide boxen umschließendes DIV her, wenn die Höhe flexibel sein soll. Die
Natürlich soll sie. Und dafür muss ich dann den overflow definieren, gell? Sonst 'wachsen' die Boxen ja nicht...? Das also in alle drei, nicht vergessen. Mein Problem auch: Wie positioniere ich die. Beim äußeren ist es ja ziemlich egal, ich muss ihn nur horizontal zentrieren. Dazu gabs ja hier schon threads, ich hoffe mal, das verstehe ich, wenn ich mir die genauer angucke. Also ich positioniere das Außen-DIV mit absolute - dann verhält es sich relativ zum body (?). Und die beiden drinnen: Die auch absolute, damit sie sich relativ zum Außen-DIV positionieren? Ich hab ja bisher nur absolute und fixed kennengelernt und bin unsicher, wozu man denn die anderen Methoden braucht.
Kirchengrafik kommt dann auch einfach ins umschließene DIV. Zu guter letzt dann noch margin-top für die helle box und fast fertig.
Ah, klar - auf die Höhe der Kirchengrafik nämlich! Ok - wenn ich das richtig verstanden habe, ist das tatsächlich nicht so schwierig *aha-Effekt* (das eigentliche Gepuzzle mal ausgenommen, das wird sich ja erweisen). WOW.
Herzliche Grüße
Nicola
-
Re!
Kirchengrafik kommt dann auch einfach ins umschließene DIV. Zu guter letzt dann noch margin-top für die helle box und fast fertig.
Ah, klar - auf die Höhe der Kirchengrafik nämlich! Ok - wenn ich das richtig verstanden habe, ist das tatsächlich nicht so schwierig *aha-Effekt* (das eigentliche Gepuzzle mal ausgenommen, das wird sich ja erweisen). WOW.
Sooo falsch sieht das schon mal nicht aus. Ich hab jetzt mit position:absolute gearbeitet und dann mit top: bei Menue und Content - weil sich das ja soweit ich es versteht dann eh auf das Eltern-DIV (#rahmen) bezieht. Das ist schon mal sehr gut - im Prinzip. Tolles Erfolgserlebnis!
ABER: Das Kirchenbild soll unten bis auf den unteren Rahmenrand laufen - das tut es natuerlich nicht, denn der Rahmen gehört ja zu #content und wird nach _innen_ konstruiert (ausser IE vielleicht, aber DAMIT will ich mich erst beschäftigen, wenn ich das Prinzip stehen habe). So muesste ich das Bild in der Rahmenbox sozusagen 5 px in die Menuebox reinragen lassen... Oder irgendwie das Bild _über_ alles drüber legen, geht das? Denn ich kann die Bildbehausende DIV ja nicht nach vorn holen, dann laege sie auch über Content und Menü. Das Beste wäre, ich könnte den weißen Rahmen um #content irgendwie so definieren, dass er _außen_ um die Box gelegt wird - dazu habe ich aber nix gefunden ;-(
Kann mich da noch einmal jemand 'einnorden'?
Hier hab ich meinen ersten Versuch:
http://physalia.de/tmp/kirche.htmlHerzliche Grüße
Nicola
PS: Mit Zentrierung und anderem Schnickschnack hab ich mich noch nicht beschäftigt, der KM wacht ja gleich wieder auf und ich wollte noch duschen vorher ;-) Also alles noch sehr 'pur'.
-
Sauberer Geist in sauberem Körper:
Unter der Dusche grad ne Idee gehabt: Ich mach einfach den oberen Border von #content raus und setze die Linie in einem Bild. Dann fangen Menue- & Content-DIV auch auf selber Höhe an, was ja auch für die Texte dann wieder besser ist.
Hier: http://physalia.de/tmp/kirche2.html
*ganz glücklich*: Nicola
Jetzt aber anziehen! ;-)
-
Hi Nicola,
Und dafür muss ich dann den overflow definieren, gell? Sonst 'wachsen' die Boxen ja nicht...?
nöö. wenn Du keine Höhe angibst, passen sich die DIVs dem Inhalt schon selbst an.
Ich hab jetzt mit position:absolute gearbeitet
leider ein schlechter Ansatz...
Ich mach einfach den oberen Border von #content raus und setze die Linie in einem Bild. Dann fangen Menue- & Content-DIV auch auf selber Höhe an, was ja auch für die Texte dann wieder besser ist.
Hier: http://physalia.de/tmp/kirche2.htmlSchonmal eine gute Idee, die Umsetzung hat aber noch nicht besonders geklappt - zumindest im IE nicht.
Aber da Du Dich ja wirklich angestrengt hast und dieses Layout doch etwas kompliziert umzusetzen ist, habe ich es Dir mal zusammengebastelt:
http://www.isis.de/members/~iturski/tests/kirchengemeinde.html
Ich denke, daß das Prinzip so leicher rüberkommt, als wenn wir hier noch lange Tips austauschen. Und so wie ich Dich einschätze, wirst Du die Vorlage bestimmt nicht einfach übernehmen, ohne sie vorher zu analysieren, um sie zu verstehen.
Außerdem hast Du noch eine Kleinigkeit dran zu tun, um sie für ältere IEs anzupassen.freundliche Grüße
Ingo-
Hi Ingo!
Und dafür muss ich dann den overflow definieren, gell? Sonst 'wachsen' die Boxen ja nicht...?
nöö. wenn Du keine Höhe angibst, passen sich die DIVs dem Inhalt schon selbst an.Ah, dann ist das ja sinnvoller gamcht, als ich dachte ;-)
Ich hab jetzt mit position:absolute gearbeitet
leider ein schlechter Ansatz...Verraetst du mir warum? Du hast jetzt ja _gar kein_ position drin *staun*. Und es funktioniert. Hmm, ich hatte das so verstanden, dass man den Boxen immer sagen muss, wo/wie sie hängen sollen.
Ich mach einfach den oberen Border von #content raus und setze die Linie in einem Bild. Dann fangen Menue- & Content-DIV auch auf selber Höhe an, was ja auch für die Texte dann wieder besser ist.
Hier: http://physalia.de/tmp/kirche2.html
Schonmal eine gute Idee, die Umsetzung hat aber noch nicht besonders geklappt - zumindest im IE nicht.Den hab ich ja nicht hier - das ist immer wieder eine schöne Bescherung, wenn ich mir da angucke, was hier im Konqueror einwandfrei aussieht ;-( Ich hatte ja die Bilder noch nicht aufeinander abgestimmt und sie hatten unterschiedliche Hoehen - ich dachte mir schon, dass das Probleme gibt. Hmm. Ich gucks (meinen Ansatz) mir grad mal in Opera und Mozilla an: Grauenhaft. Mozilla malt die Border nicht *staun* und Opera vermurxt alles *seuftz*.
Das Problem mit dem Bild ist ja auch, dass der Contentbereich so nicht horizontal wachsen/schrumpfen kann. Fiel mir spaeter ein...
Aber da Du Dich ja wirklich angestrengt hast und dieses Layout doch etwas kompliziert umzusetzen ist, habe ich es Dir mal zusammengebastelt:
http://www.isis.de/members/~iturski/tests/kirchengemeinde.htmlUii, danke!
Ich denke, daß das Prinzip so leicher rüberkommt, als wenn wir hier noch lange Tips austauschen. Und so wie ich Dich einschätze, wirst Du die Vorlage bestimmt nicht einfach übernehmen, ohne sie vorher zu analysieren, um sie zu verstehen.
Jo. Voellig neu ist mir die Art, das Bild einzubinden. Dem Konqui übrigens auch, der lässt es weg. Das muss ich mir mal angucken, hab ich noch nicht gekannt. Kann man das auch benutzen, um dasselbe Bild mehrfach in eine Seite einzusetzen (dann nicht mit 'id', sondern mit 'class' natuerlich)? Das waere ja eleganter (schlanker) als 'normal' einzubinden? Aber hier koennte man es doch auch 'normal' einbinden, oder? Und warum display:block ('eine Zeile erzwingen').
Die position laesst du ganz weg - dann gilt also 'static'(?): 'normaler Elementfluss' nennt selfhtml das. Was immer 'normal' ist ;-)
Float ist ja klasse, das hatte ich mal gelesen, aber offenbar völlig in der Bedeutung verkannt. Ich hatte ja mit den Positionierungen gearbeitet, weil ich nicht wusste, wie ich sonst erzwingen koennte, das #rechts rechts _neben_ #links steht. Und das machst du mit dem bescheidenen 'float' (ich dachte, das ist 'bloß' was zum Bilder und Ueberschriften umfliessen lassen)!
Außerdem hast Du noch eine Kleinigkeit dran zu tun, um sie für ältere IEs anzupassen.
Ich hab erst nochmal VIEL dran zu tun, das alles zu verstehen. Ich werd mal mit verschiedenen Farben arbeiten, um die Boxen richtig beobachten zu können. Und dann werd ich mal etwas damit rumspielen. Insbesondere interessiert mich, ob man so auch mit min-width bei #seite arbeiten kann und dann das Ganze auch horizontal wächst bei größeren Fenstergrößen. Dann könnte ich mit margin einen Randabstand definieren, so würden Leute mit größeren Auflösungen nicht so ungeheuer viel grauen Rand sehen.
Leider hat meine bessere Hälfte Bereitschaft und werd den 'puta' (Linus Wortschatz wächst täglich ;-) nicht viel sehen dieses WE. Drum hab ich auch noch nicht Gelegenheit gehabt, weiter einzutauchen in deinen Code, wollte aber mich unbedingt heute noch bedanken. Vielen lieben Dank! Auch wenn mein anfänglicher Stolz und das 'ha, ist alles ja doch gar nicht so kryptisch!'-Gefühl erst mal gelitten hat ;-( Aber ich lern wirklich gern!
Liebe Grüße
Nicola
-
Hi Nicola,
Ich hab jetzt mit position:absolute gearbeitet
leider ein schlechter Ansatz...
Verraetst du mir warum? Du hast jetzt ja _gar kein_ position drin *staun*. Und es funktioniert.absolute Positionierung hat immer einen großen Nachteil: es ist absolut unflexibel. Da man nie weiß, wieviel Raum ein Text beansprucht und vor allem, wieviel Platz im Fenster noch übrig ist, kann es sehr schnell zu Überlagerungen kommen.
Eine gut überlegte absolute Positionierung ist durchaus ok, nur sollte man das Layout hiervon nicht zu sehr abhängig machen. Leider meinen viele, die mit CSS anfangen, mit absoluter Positionierung ginge alles so einfach. Das Ergebnis ist dann z.B. die berüchtigte Fragen "Wie verhindere ich die Änderung der Schriftgröße"...Jo. Voellig neu ist mir die Art, das Bild einzubinden. Dem Konqui übrigens auch, der lässt es weg.
Echt? Finde ich aber merkwürdig. Mozilla hat keine Probleme damit.
Kann man das auch benutzen, um dasselbe Bild mehrfach in eine Seite einzusetzen (dann nicht mit 'id', sondern mit 'class' natuerlich)?
aber sicher doch - jedenfalls wenn es auch links gefloated werden soll.
Und warum display:block ('eine Zeile erzwingen').
nein, das ist bei weitem nicht die einzige Funktion. Ein Bild ist notrmalerweise ein inline-Element. Als solches hätte es zum einen Unterlängen (für nebenstehende Texte), wenn es sich defaultmäßig an der Baseline orientiert. DEn Effekt sieht man in Geckos, wenn ein Bild verlinkt wird.
Zum anderen ein inline-Element nur soviel Platz wie sein Inhalt. Sofern das Bild geladen werden kann, ist alles Ok, wenn aber nicht, dann passen die Alternativtexte im Opera z.B. nicht mehr vernünftig rein. Als Block wird dagegen exakt die Bildgröße auch für den Alternativtext genutzt.
KLeinigkeiten, aber wenn ich ein Bild ohnehin über float ausrichte, dann verwende ich auch immer gleich display:block.Float ist ja klasse,
stimmt - und die eigentlich logischste Methode, um Elemente nebeneinander auszurichten. Nebenbei 'fließt' dann auch alles wunderbar und kann den zur Verfügung stehenden Raum i.d.R. so am besten ausnutzen.
Insbesondere interessiert mich, ob man so auch mit min-width bei #seite arbeiten kann und dann das Ganze auch horizontal wächst bei größeren Fenstergrößen.
Wäre ja schön, wenn der IE sowas könnte. Aber es gibt einen simplen Workaround: ein unsichtbares gif in der gewünschten Mindestbreite irgendwo platzieren.
Nur ist m.E. max-width wesentlich interessanter. Denn meist ist es sinnvoller, _nicht_ die maximal mögliche Fensterbreite zu nuzen, da die Zeilenlängen sonst viel zu unleserlich lang werden.
Einen guten Kompromiß sehe ich in der Breitenangabe in EM (gab's erst vor kurzem noch einen Thread dazu).werd den 'puta' (Linus Wortschatz wächst täglich ;-)
nomen est omen..;-)
Vielen lieben Dank! Auch wenn mein anfänglicher Stolz und das 'ha, ist alles ja doch gar nicht so kryptisch!'-Gefühl erst mal gelitten hat ;-( Aber ich lern wirklich gern!
Bitte, gern gescheh'n. Freut mich, wenn ich Dich ein bisschen auf den richtigen Weg gebracht habe.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-
-
Hi,
tables und frames seien kein gutes Mittel hierzu. Besser solle man divs+CSS verwenden.
statt <div> benutze HTML in dem Sinn, in dem es gedacht wurde - überlege Dir also, welche Semantik ein bestimmtes Strukturelement besitzt, und wähle das dazu passende HTML-Element, dessen Darstellung Du mittels CSS empfiehlst.
Ich habe mir jetzt einige Seiten angeschaut. Z.b. http://thunderbird.bric.de/ .
</faq/#Q-19>
Die stützen sich nur auf divs und css. Aber wie macht man da zB. das Menü?
Mittels <dl>, <dt> und <dd>. Ich empfehle üblicherweise <ul> und <li>, aber im Endeffekt folgen beide Wege der selben Denkweise.
Ich werde aus deren Quelltext irgendwie nicht schlaue - vll weil ich mich noch nicht so tief mit Klassen und id's auseinandergesetzt habe?!
Keine Ahnung. Vielleicht ist Dir einfach noch nicht bewusst, dass HTML *nichts* mit der Darstellung zu tun hat, auch wenn jeder HTML-Tag ohne weiteres Zutun bereits eine bestimmte, individuelle Darstellung erhält.
Wie erreicht man z.B. das das Menü von einem border mit runden ecken eingefasst wird?
Dies wurde mit geschachtelten <div>s erkauft. _Nur_ mittels CSS geht derartiges erst ab CSS/3.0, welches a) noch nicht verabschiedet ist und sich b) keiner besonders umfangreichen Verbreitung erfreut.
Oder: Wenn man über die Links im Menü fährt wird die ganze Breite grau? Mit JavaScript?
Nein, mit CSS.
Zum Hintergrund: Das Menü hat ja einen Hintergrund der nach rechts immer schwächer wird - wie macht man das?
Mit einer Grafik.
Ich hoffe, ihr könnt mir dabei helfen - sodass auch ich mich bald zu diejenigen zählen kann, die keine Tables oder Frames brauchen ;)
Gerne. Frage und Dir wird geantwortet werden.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi!
@wahsaga: Vielen Dank für den Link - der ist wirklich Spitze! Die Beispiele werd' ich mir reinziehen :-) :-)
@cheatah: Kannst du das mit den geschachtelten divs genauer erklären. Meinst du diese stelle im Quellcode:
<div class="menu"> <---?
<div class="nav"> <---?
<div class="spacer2"><span class="lockmenu"><a onclick="setActiveStyleSheet('LockedMenu'); return false;" href="#">Menü Fixieren</a></span><span class="unlockmenu"><a onclick="setActiveStyleSheet('Default'); return false;" href="#">Menü Lösen</a></span></div>Wie kann man nun mittels geschachtelter divs so einen Effekt erzielen?
Grüße,
Fabian
-
Hi,
@cheatah: Kannst du das mit den geschachtelten divs genauer erklären. Meinst du diese stelle im Quellcode:
exakt.
Wie kann man nun mittels geschachtelter divs so einen Effekt erzielen?
Die CSS-Codes dazu stehen in externen Ressourcen, referenziert im <head> des HTML-Dokumentes.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
