nicht angemeldet
Layout mit CSS
Hallo..
hab nur mal ne Frage zum besseren Verständnis:
Wenn ich jetzt beschliesse ein Layout für ne Seite ohne Tabellen sondern mit CSS zu machen (was ja besser und richtiger sein soll,
komme ich dann für die Positionierung der Elemente (Menu links + Content rechts) auch ohne divs aus?
Ich hab gestern hier sonen Beitrag gelesen, aus dem ich das irgendwie so verstanden habe.
Wenn dem so ist, kann mir dann jemand verraten wie, oder mir sagen, wo ich finde wie man das macht?
Wenn dem nicht so ist, sagt es mir dann auch jemand?
Ich finde das äußerst spannend und möchte das unbedingt versuchen.. aber möchte halt gerne wissen, ob nu mit oder ohne divs?
Bevor ich mich in was verenne was so nicht funktioniert oder was nen schlechten Stil hat.
danke
chow
-
Hallo chow,
hab nur mal ne Frage zum besseren Verständnis:
Wenn ich jetzt beschliesse ein Layout für ne Seite ohne Tabellen sondern mit CSS zu machen (was ja besser und richtiger sein soll,
komme ich dann für die Positionierung der Elemente (Menu links + Content rechts) auch ohne divs aus?
Ja. Laut http://www.w3.org/TR/html401/struct/global.html#edef-DIV ist <div> ein Element zum Gruppieren, wie auch <span>. Ich bezweile nicht, daß es eine Möglichkeit geben mag, Dokumente valide zu gestalten, die kein einziges Element <div> enthalten. Ich neige aber dazu, stark zu bezweifel, daß es dann noch semanitsch korrekt ist.
Ich hab gestern hier sonen Beitrag gelesen, aus dem ich das irgendwie so verstanden habe.
Schade! Liefere doch den Link des Beitrags, dann kann man vielleicht an einem Beispiel arbeiten.
Wenn dem so ist, kann mir dann jemand verraten wie, oder mir sagen, wo ich finde wie man das macht?
Kurz und knapp, in der Hoffnung, daß es als die Hilfe, in der ich es meine, von Dir aufgefaßt wird: Lies http://de.selfhtml.org/css/index.htm ff.!
Gruß aus Berlin!
eddi--
at, wie er leibt und lebt auf ein Posting
> > Nein, ich denke nicht.
gepromptet
> Das empfiehlt sich aber.
:))))-
Ich habe mir den Beitrag leider nicht gemerkt...
Es war aber ne Diskussion über Tabellenlayout..
wo einer gesagt hat,er würde alle Elemente in ein Div packen.. und dann jemand anderes gesagt hat, daß wäre doch gar nicht nötig..
man bräuchte doch gar nicht für jedes Elemnt ein div... das ginge auch noch anders.
Was in self-HTML dazu steht kenne ich schon.. was nicht heißen soll, daß ich es beherrsche.. *g*
Wenn ich dich also richtig verstanden habe, macht es sinn, daß Menu z.B. in ein Div zu packen.
Wie positioniere ich denn dieses div jetzt mit einer relativen Größenangabe so, daß es nicht direkt ganz oben anfängt? Mit '%' klappt das nicht oder?
muß ich da auf eine absolute größenangabe zurückgreifen?
chow
-
Hallo,
Wie positioniere ich denn dieses div jetzt mit einer relativen
Größenangabe so, daß es nicht direkt ganz oben anfängt?schau Dich mal bei margin (hier die Wahl) und padding um. Das "box"-Modell kann einen am Anfang etwas verwirren, ist aber recht mächtig. Und Elementarwissen.
Margin würde hier den mit dem Div-Paar geschaffenen Block von der eigentlichen Positionen "wegrücken", genauer: es schafft einen Abstand zu den vorherigen und nachfolgenden Elementen der Seite. (Oder vom Elternelementrand) Nimm ein DIN-A4 Blatt (Elternelement) und klebe oben links ein Post-it. Wenn Du jetzt das Post-it abtrennst und 5 cm nach innen und 5 cm nach rechts klebst, hast Du einen Abstand von? Eben, 5 cm gesetzt - das macht man mit margin, hier eben margin-top und margin-left.
Wenn Du (übrigens) auf dem Post-it gaaanz am Rand anfängst zu schreiben, wirkst gedrückt. Wenn Du also zum Post-it Rand was Platz läst und weiter in der Mitte des gelben Zettels anfängst zu schreiben, hast Du einen Innenabstand gelassen, das wäre dann padding....)
Chräcker
-
Hi,
wo einer gesagt hat,er würde alle Elemente in ein Div packen.. und dann jemand anderes gesagt hat, daß wäre doch gar nicht nötig..
man bräuchte doch gar nicht für jedes Elemnt ein div... das ginge auch noch anders.völlig richtig.
Wenn ich dich also richtig verstanden habe, macht es sinn, daß Menu z.B. in ein Div zu packen.
Dieses nun gerade meistens nicht. Wenn Du hierfür z.B. eine Liste verwendest, hast Du bereits ein Block-Element, welches die Menüpunkte gruppiert und das Du ausreichend formatieren kannst. Ein umschließendes div wäre hier überflüssig.
Wie positioniere ich denn dieses div jetzt mit einer relativen Größenangabe so, daß es nicht direkt ganz oben anfängt? Mit '%' klappt das nicht oder?
Vielleicht schaust Du Dir mal http://www.1ngo.de/web/css-layout.html an. Hier siehst Du auch, wann divs sinnvoll eingesetzt werden.
Das äußere div gruppiert sämtliche Elemente und wäre für für das Standardlayout hier auch nicht erforderlich; da mit demselben HTML aber auch eine Begrenzung und Umrahmung der Seite möglich sein soll, ist es doch erforderlich.
Das Menü kommt wie bereits erwähnt hier ohne div aus. Lediglich die Elemente des Inhaltsbereichs werden über ein div gruppiert, um einen Rahmen und einheitlichen Hintergrund zu ermöglichen. Bei Verzicht hierauf könnte man allerdings auch dieses div einsparen.freundliche Grüße
Ingo-
Moin moin
Wenn ich dich also richtig verstanden habe, macht es sinn, daß Menu z.B. in ein Div zu packen.
Dieses nun gerade meistens nicht. Wenn Du hierfür z.B. eine Liste verwendest, hast Du bereits ein Block-Element, welches die Menüpunkte gruppiert und das Du ausreichend formatieren kannst. Ein umschließendes div wäre hier überflüssig.Nicht in jedem Fall. In einem aktuellen Projekt habe ich folgende Analogie hergestellt: Überschrift 2. Ebene im Inhalt gleich Überschrfit 2. Ebene im Menü.
Unter jeder Überschrift kommt eine Liste mit allen weiteren Links.
<h2>Einleitung</h2>
<ul>
<li>Vorwort</li>
<li>
Zielgruppe
<ul>
<li>Junge Leser</li>
<li>Alte Leser</li>
<li>(...)</li>
</ul>
</li>
<li>Konventionen</li>
<li>Copyright</li>
</ul>usw.
Bisher habe ich wie Du gedacht, fand die Idee, die Struktur des Dokumentes in dem Menü wiederzugeben, aber interessant (über die Möglichkeit der verschachtelten Listen hinaus)...
An dem Beispiel soll lediglich klar werden: es hängt von den Inhalten ab, welche Lösung die beste ist.
Eine pauschale Aussage läßt sich halt schwer machen.
Wie positioniere ich denn dieses div jetzt mit einer relativen Größenangabe so, daß es nicht direkt ganz oben anfängt? Mit '%' klappt das nicht oder?
Vielleicht schaust Du Dir mal http://www.1ngo.de/web/css-layout.html an. Hier siehst Du auch, wann divs sinnvoll eingesetzt werden.
Das äußere div gruppiert sämtliche Elemente und wäre für für das Standardlayout hier auch nicht erforderlich; da mit demselben HTML aber auch eine Begrenzung und Umrahmung der Seite möglich sein soll, ist es doch erforderlich.Geht doch - du hast doch das <body>-Element - oder habe ich da etwas ncit verstanden?
Das Menü kommt wie bereits erwähnt hier ohne div aus. Lediglich die Elemente des Inhaltsbereichs werden über ein div gruppiert, um einen Rahmen und einheitlichen Hintergrund zu ermöglichen. Bei Verzicht hierauf könnte man allerdings auch dieses div einsparen.
Für einen Anfänger ist es sicher leichter, die Seite in verschiedene, inhaltlich logische Bereiche aufzuteilen, wie zum Beispiel:
Site-Identifikator (1)
Menü (2)
Inhalt (3)(1) Mit Site-Identifikator meine ich den Bereich, der fast immer (aber eben manchmal auch nicht) den Kopf der Seite bereitstellt.
(2) Navigation
(3) Nimmt die eigentlichen textlichen und bildlichen Inhalte auf.
Beispiel
+-------------------------------+
| (1) |
+-------------------------------+
| | |
| (2) | |
| | (3) |
| | |
+------+ |
| . |
| . |
| . |
| . |
| . |
+-------------------------------+Warum ich solche "komischen" namen verwende: Bei einem Redesign der Seite kann ich u. U. einen "Kopf" nciht mehr gebrauchen, weil ich die Seitenidentifikation mit Namen des Angebotes usw z. B. am rechten Seitenrand darstellen will.
Ich überlege mir immer Namen, die ich auch dann noch verwenden kann, wenn die Seite einmal nicht nur farblich, sondern komplett umgestaltet werden soll - was oben ist nach unten und umgekehrt.
Nur so stelle ich sicher, daß ich zu layoutzwecken, das HTML nciht mehr anfassen muss.
Um mal ein Negativ-Beispiel zu nennen: eine Klasse blck12pxbld um schwarezn, 12 Pixel großen, fetten Text darzustellen.
Die Klasse muss dann später in allen HTML-Dokumenten umbenannt werden, wenn dieser Text mal nicht mehr fett sein soll oder nciht mehr schwarz oder was auch immer...
Gruß,
Marc.--
Und immer schön
validieren (http://validator.w3c.org)
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28-
Hi,
Wenn Du hierfür z.B. eine Liste verwendest, hast Du bereits ein Block-Element, welches die Menüpunkte gruppiert und das Du ausreichend formatieren kannst. Ein umschließendes div wäre hier überflüssig.
Nicht in jedem Fall. In einem aktuellen Projekt habe ich folgende Analogie hergestellt: Überschrift 2. Ebene im Inhalt gleich Überschrfit 2. Ebene im Menü.
Klar. Hier gruppierst Du eine Überschrift und ein Menü.
Das äußere div gruppiert sämtliche Elemente und wäre für für das Standardlayout hier auch nicht erforderlich; da mit demselben HTML aber auch eine Begrenzung und Umrahmung der Seite möglich sein soll, ist es doch erforderlich.
Geht doch - du hast doch das <body>-Element - oder habe ich da etwas ncit verstanden?
Ja. Es sei denn, Du wüßtest eine CSS-Formatierung für body, die den Seiteninhalt auf eine bestimmte Breite bringt und mit einem border versieht (auch im IE) und außerdem dem Seiteninhalt eine andere Hintergrundfarbe gibt.
Um mal ein Negativ-Beispiel zu nennen: eine Klasse blck12pxbld um schwarezn, 12 Pixel großen, fetten Text darzustellen.
Die Klasse muss dann später in allen HTML-Dokumenten umbenannt werden, wenn dieser Text mal nicht mehr fett sein soll oder nciht mehr schwarz oder was auch immer...
muß nicht.. ;-)
freundliche Grüße
Ingo
-
-
-
Hallo,
man bräuchte doch gar nicht für jedes Elemnt ein div... das ginge auch noch anders.
du kannst Elemente auch ohne Div positionieren.
Wenn ich dich also richtig verstanden habe, macht es sinn, daß Menu z.B. in ein Div zu packen.
Eine Navigation könnte z.B. auch so gruppiert werden: <p class=nav><a href..>|<a href..></p>, oder per Listen, wie z.B. hier http://www.lipfert-malik.de/webdesign/tutorial/bsp/zwei-spalten-layout.html bei einem Beispiel für ein zweispaltiges Layout mit position:fixed.
Grüsse
Cyx23
-
-
Hallo.
Ich bezweile nicht, daß es eine Möglichkeit geben mag, Dokumente valide zu gestalten, die kein einziges Element <div> enthalten. Ich neige aber dazu, stark zu bezweifel, daß es dann noch semanitsch korrekt ist.
Weshalb sollte ein Dokument semantisch weniger korrekt sein, wenn ein semantisch belangloses Element wie <div> keine Verwendung findet?
MfG, at-
Hallo.
Weshalb sollte ein Dokument semantisch weniger korrekt sein, wenn ein semantisch belangloses Element wie <div> keine Verwendung findet?
Naja... Wie würdest Du eine Aneinanderreihung von Praragrahen <p> semantisch korrekt gruppieren? Da fiele mir eine pauschale Aussage schwer. In gewissen Situationen kann auf Listen zugegriffen werden, was aber, wenn der Inhalt das nicht hergibt?
Darauf bezog sich das "semanitsch korrekt".Gruß aus Berlin!
eddi--
at, wie er leibt und lebt auf ein Posting
> > Nein, ich denke nicht.
gepromptet
> Das empfiehlt sich aber.
:))))-
Hallo.
Naja... Wie würdest Du eine Aneinanderreihung von Praragrahen <p> semantisch korrekt gruppieren? Da fiele mir eine pauschale Aussage schwer. In gewissen Situationen kann auf Listen zugegriffen werden, was aber, wenn der Inhalt das nicht hergibt?
Wenn es der Inhalt nicht hergibt, besteht auf Ebene der Semantik doch gar kein Handlungsbedarf.
MfG, at-
Re:
Wenn es der Inhalt nicht hergibt, besteht auf Ebene der Semantik doch gar kein Handlungsbedarf.
Stimmt :)
Gruß aus Berlin!
eddi--
at, wie er leibt und lebt auf ein Posting
> > Nein, ich denke nicht.
gepromptet
> Das empfiehlt sich aber.
:))))
-
-
-
-
Hi,
Ja. Laut http://www.w3.org/TR/html401/struct/global.html#edef-DIV ist <div> ein Element zum Gruppieren, wie auch <span>.
welche Elemente wolltest Du denn mit <span> gruppieren? ;-)
freundliche Grüße
Ingo-
Hallo.
welche Elemente wolltest Du denn mit <span> gruppieren? ;-)
Für Listen-Verweigerer:
<span id="seitennavigation"><a href="...">zurück</a>, <a href="...">weiter</a></span>
Für Fließtext-Praktiker:
<span><img src="..." alt="..." /><strong>Self</strong><em>HTML</em></span>
MfG, at -
Hi,
Ja. Laut http://www.w3.org/TR/html401/struct/global.html#edef-DIV ist <div> ein Element zum Gruppieren, wie auch <span>.
welche Elemente wolltest Du denn mit <span> gruppieren? ;-)Bitte mal dem o. g. Verweis folgen: "7.5.4 Grouping elements: the DIV and SPAN elements"
Zu Deiner Frage: Ich würde Inline-Elemente damit gruppieren wollen.Gruß aus Berlin!
eddi--
at, wie er leibt und lebt auf ein Posting
> > Nein, ich denke nicht.
gepromptet
> Das empfiehlt sich aber.
:))))-
Hi,
Bitte mal dem o. g. Verweis folgen: "7.5.4 Grouping elements: the DIV and SPAN elements"
ist mir schon klar, daß span unter dieser Überschrift aufgeführt ist. Nur ist selbst dem W3C hier kein passendes Beispiel für eine Gruppierung mit span eingefallen und die netten Beispiele von at zeigen, wie weit das an der Praxis vorbeigeht.
freundliche Grüße
Ingo-
Hallo.
ist mir schon klar, daß span unter dieser Überschrift aufgeführt ist. Nur ist selbst dem W3C hier kein passendes Beispiel für eine Gruppierung mit span eingefallen und die netten Beispiele von at zeigen, wie weit das an der Praxis vorbeigeht.
Eines meiner netten Beispiele setze ich wie viele andere regelmäßig ein. Das hat auch etwas damit zu tun, dass es für viele Zwecke keine spezialisierten Elemente gibt ich regen Gebrauch von Attributen wie "lang" mache. Wenn man hingegen nur gedankenlos Texte heruntertippt und gelegentlich mal ein Element einstreut, statt eine Struktur aufzubauen, ergibt sich die Verwendung natürlich nicht.
MfG, at -
Hi Ingo,
Bitte mal dem o. g. Verweis folgen: "7.5.4 Grouping elements: the DIV and SPAN elements"
ist mir schon klar, daß span unter dieser Überschrift aufgeführt ist. Nur ist selbst dem W3C hier kein passendes Beispiel für eine Gruppierung mit span eingefallen und die netten Beispiele von at zeigen, wie weit das an der Praxis vorbeigeht.ATs Argument schlägt mich genauso auch in diesem Falle, das sehe ich hier ebenso ein. Formal und nur HTML ansich bedarf es beider Elemente nicht. Je mehr Ergänzungen man in die Überlegung mit einbezieht, desto eher wird auch der praktische Sinn dahinter ersichtlich. Gerade <span> ist in http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm ein überzeugendes Beispiel einer Gruppierung von (möglichen) Inlinern.
Das Element <div> hat dennoch eine Daseinsberechtigung zum Gruppieren, mit besseren Strukturierungsmöglichkeiten für das DOM also JavaScript. In Ermangelung eines äquivalenten Beispiels für hover-Effekte, sehe ich ein - ja - man kann darauf verzichten und es ist möglich semantisch korrekt zu arbeiten.
Man kann also, wenn keine gestalterischen Widrigkeiten auftreten, oder anderweitige Strukturen, die das MakeUp nicht betreffen sondern Scripte den Weg ebnen, nicht benötigt werden, darauf verzichten.
Gruß aus Berlin!
eddi--
at, wie er leibt und lebt auf ein Posting
> > Nein, ich denke nicht.
gepromptet
> Das empfiehlt sich aber.
:))))-
Hi,
ATs Argument schlägt mich genauso auch in diesem Falle, das sehe ich hier ebenso ein.
zumindest die später angesprochene Nutzung von span für das lang-Attribut (sorry wenn ich jetzt wieder nicht zu diesem Posting antworte) mag - in den (seltenen?) Fällen, in denen kein kompletter fremdsprachiger Absatz zu kennzeichnen ist und der enthaltene Fließtext weitere Inline-Elemente enthält - ein Beispiel für eine sinnvolle Gruppierung mittels span sein.
Gerade <span> ist in http://aktuell.de.selfhtml.org/tippstricks/css/infobox/index.htm ein überzeugendes Beispiel einer Gruppierung von (möglichen) Inlinern.
zwar wird hier noch nichts damit gruppiert, aber Du hast recht - hier könnten genauso gut Inline-Elemente z.B. zur Hervorhebung vorkommen wie beim o.g. Fall.
die das MakeUp nicht betreffen
:-))
freundliche Grüße
Ingo-
Hallo.
(sorry wenn ich jetzt wieder nicht zu diesem Posting antworte)
Kein Problem, ich lese ja nicht nur die Antworten auf meine eigenen Beiträge.
MfG, at
-
-
-
-
-
-
-
Hallo,
Wenn ich jetzt beschliesse ein Layout für ne Seite ohne Tabellen
sondern mit CSS zu machen (was ja besser und richtiger sein soll,nur, wenn man den (guten) Grund verstanden hat und es deswegen macht. Niemals etwas machen, nur weil "es so sein soll" ;-)
komme ich dann für die Positionierung der Elemente (Menu links +
Content rechts) auch ohne divs aus?Das kann ich mir jetzt kaum vorstellen. Ich bin allerdings wahrlich keine Leuchte in CSS... Jedoch: das angedachte Layout bedingt doch eine zumindest Breitendiemnsionierung des linken Textteiles (hier das Menü), also ein Blockelement-Paar. Hier wäre also div doch passend...
oder was nen schlechten Stil hat.
Da würde ich mich nie drum kümmern. Sinnvoll oder nicht, das wäre die treffendere Frage. Aus der tiefe, in der man den Sinn dann auslotet ergibt sich dann automatisch ein "passender Stil" ;-)
Chräcker
-
Hallo Chräcker,
Aus der tiefe, in der man den Sinn dann auslotet ergibt sich dann automatisch ein "passender Stil" ;-)
hach, das muß ich mir nochmal so richtig auf der Zunge zergehen lassen... ich seh's geradezu zum Greifen vor mir ;-)
Gruß aus Köln-Ehrenfeld,
Elya
--
keep passing the open windows.
-
-
hi,
komme ich dann für die Positionierung der Elemente (Menu links + Content rechts) auch ohne divs aus?
ja.
gruß,
wahsaga--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."