Divs und Scroll bar ?
- Ersteller cron
- Erstellt am
- Status
Werbung:
![]()
thuemmy
Aktives Mitglied
Sowas macht man mittels CSS. Das Stchwort heißt hier overflow.
overflow: Übergroßer Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Gruß thuemmy
overflow: Übergroßer Inhalt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Gruß thuemmy
Werbung:
![]()
E
Efchen
Guest
Suchst Du selber mit der Forensuche nach meinen Beiträgen zu folgendem Thema oder muss ichs nochmal breit treten?
"Seite mit divs aufbauen" ist genauso falsch wie "Seite mit Tabellen aufbauen".
"Seite mit divs aufbauen" ist genauso falsch wie "Seite mit Tabellen aufbauen".
Werbung:
![]()
E
Efchen
Guest
Natürlich ist das auch ein Forum für Anfänger. Deswegen machen das ja auch so viele falsch und deswegen hab ich das ja auch schon mehrmals erklärt, wie man über die Forensuche finden könnte.
Aber ich erklärs Dir gern nochmal:
Zur Auszeichnung der logischen Struktur Deines Inhalts verwedest Du HTML. Nur dafür ist HTML konzipiert und nur dafür sollte man es benutzen. Das bedeutet, dass Du erst Deinen Inhalt hast und dann diesem eine Bedeutung gibt. Für verschiedene Bedeutungen gibt es Tags. Z.B. gibt es sechs Tags für Überschriften, ein Tag für Textabsätze, eines für tabellarische Daten, es gibt Tags für wichtige Textpassagen, für Zitate, Adressen usw.
Diese Tags sollte man richtig anwenden, z.B. werden Menüs als Liste ausgezeichnet. HTML ist nicht dafür da, das Aussehen der Seite festzulegen, auch nicht um das Layout zu machen. Das Tag <div> ist hauptsächlich dafür da, logische Zusammenhänge herzustellen, also mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.
Völlig falsch wäre z.B.
Das entehrt jeglicher Semantik und setzt HTML nicht so ein, wie es gedacht ist. Außerdem nimmt dieser Code jedem Client, der auf den HTML-Code angewiesen ist, jegliche Möglichkeit, den Inhalt zu verstehen. Vorlesebrowser oder Suchmaschinen können aus obigem Code nicht erkennen, dass es sich um eine Überschrift handelt. Da <div> außerdem nur als "allgemeines Block-Element" bekannt ist, können sie dem Text oben im Code keinerlei andere Bedeutung geben.
Richtig muss es heißen:
Für das Layout ist - wie auch für Design - allein CSS zuständig. Welche Tags man braucht, ist allein vom Inhalt abhägig, nicht vom gewünschten Layout. Jedes Element (Tag) kann man mit CSS auf die selbe Art und Weise anordnen (einziger Unterschied: Inline- und Block-Elemente), dazu bedarf es keines besonderen Tags. Viele setzen um ein einzelnes Element gerne ein <div> um dieses dann irgendwie zu positionieren. Das ist aber Nonsense, man kann auch das Element direkt positionieren. Das Tag <div> ist keine Wunderwaffe, sondern spielt nur eine untergeordnete Rolle. Echte CSS-Layouts, die die Trennung von Inhalt und Layout beherzigen, können auch ohne ein einziges <div> auskommen.
Der Hinweis auf Frames war völlig deplatziert, weil Frames in eine ganz andere Kategorie gehören: "Gute Ideen schlecht umgesetzt". Wie Du vielleicht weißt, bieten Frames für den Anwender keinerlei Vorteile, aber dafür heftige Nachteile.
Merke: HTML ist für die logische Auszeichnung des Inhalts zuständig (Semantik).
CSS ist für Layout und Design zuständig.
Unter "Trennung von Inhalt und Layout" versteht man die ständige Trennung von beidem. Inhalt mit seiner Auszeichnung kommt in die HTML-Datei, Layout&Design wird nur mit CSS gemacht und kommt in ein externes Stylesheet. Das erleichtert Dir die Wartung Deiner Website enorm und steigert die Ladegeschwindigkeit. Es hat nur Vorteile. Wenn man ständig daran denkt und das kontinuierlich umsetzt, erschafft man damit die perfekte Website (technisch), die überdies auch noch barrierefrei ist und in jedem Client (auch alte Browser wie Netscape 0.8 oder solche Krücken, und auch in neuen Browsern) zu 100% nutzbar ist (Nutzbarkeit bezieht sich nicht auf das Aussehen). Und das ist das Ziel des WWW und sollte Ziel jeder öffentlichen Website sein.
Ich hoffe ich konnte Dir damit ein paar neue Horizonte eröffnen, Du kannst aber auch gerne nochmal nachfragen.
Wenn ich anfangs irgendwie arrogant geklungen habe, liegt das nur daran, dass so wenig Leute die Forensuche nutzen und meine Antworten - wie Du siehst :-) - nicht unbedingt schnell geschrieben sind ;-)
Grüße,
-Efchen
Aber ich erklärs Dir gern nochmal:
Zur Auszeichnung der logischen Struktur Deines Inhalts verwedest Du HTML. Nur dafür ist HTML konzipiert und nur dafür sollte man es benutzen. Das bedeutet, dass Du erst Deinen Inhalt hast und dann diesem eine Bedeutung gibt. Für verschiedene Bedeutungen gibt es Tags. Z.B. gibt es sechs Tags für Überschriften, ein Tag für Textabsätze, eines für tabellarische Daten, es gibt Tags für wichtige Textpassagen, für Zitate, Adressen usw.
Diese Tags sollte man richtig anwenden, z.B. werden Menüs als Liste ausgezeichnet. HTML ist nicht dafür da, das Aussehen der Seite festzulegen, auch nicht um das Layout zu machen. Das Tag <div> ist hauptsächlich dafür da, logische Zusammenhänge herzustellen, also mehrere Elemente zwecks gemeinsamer Formatierung zu gruppieren.
Völlig falsch wäre z.B.
Code:
<div id="Ueberschrift">Herzlich willkommen</div>Richtig muss es heißen:
Code:
<h1>Herzlich Willkommen</h1>Für das Layout ist - wie auch für Design - allein CSS zuständig. Welche Tags man braucht, ist allein vom Inhalt abhägig, nicht vom gewünschten Layout. Jedes Element (Tag) kann man mit CSS auf die selbe Art und Weise anordnen (einziger Unterschied: Inline- und Block-Elemente), dazu bedarf es keines besonderen Tags. Viele setzen um ein einzelnes Element gerne ein <div> um dieses dann irgendwie zu positionieren. Das ist aber Nonsense, man kann auch das Element direkt positionieren. Das Tag <div> ist keine Wunderwaffe, sondern spielt nur eine untergeordnete Rolle. Echte CSS-Layouts, die die Trennung von Inhalt und Layout beherzigen, können auch ohne ein einziges <div> auskommen.
Der Hinweis auf Frames war völlig deplatziert, weil Frames in eine ganz andere Kategorie gehören: "Gute Ideen schlecht umgesetzt". Wie Du vielleicht weißt, bieten Frames für den Anwender keinerlei Vorteile, aber dafür heftige Nachteile.
Merke: HTML ist für die logische Auszeichnung des Inhalts zuständig (Semantik).
CSS ist für Layout und Design zuständig.
Unter "Trennung von Inhalt und Layout" versteht man die ständige Trennung von beidem. Inhalt mit seiner Auszeichnung kommt in die HTML-Datei, Layout&Design wird nur mit CSS gemacht und kommt in ein externes Stylesheet. Das erleichtert Dir die Wartung Deiner Website enorm und steigert die Ladegeschwindigkeit. Es hat nur Vorteile. Wenn man ständig daran denkt und das kontinuierlich umsetzt, erschafft man damit die perfekte Website (technisch), die überdies auch noch barrierefrei ist und in jedem Client (auch alte Browser wie Netscape 0.8 oder solche Krücken, und auch in neuen Browsern) zu 100% nutzbar ist (Nutzbarkeit bezieht sich nicht auf das Aussehen). Und das ist das Ziel des WWW und sollte Ziel jeder öffentlichen Website sein.
Ich hoffe ich konnte Dir damit ein paar neue Horizonte eröffnen, Du kannst aber auch gerne nochmal nachfragen.
Wenn ich anfangs irgendwie arrogant geklungen habe, liegt das nur daran, dass so wenig Leute die Forensuche nutzen und meine Antworten - wie Du siehst :-) - nicht unbedingt schnell geschrieben sind ;-)
Grüße,
-Efchen
Hey ;)
Als erstes vielen dank für die Antwort. Ich muss sagen das ich Grafikdesign und Homepage erstellung schon ein wenig länger betreibe. Nur habe ich mich nie mit barrierefreiheit beschäftigt. Ich habe anfangs meine Seiten nur mit
Tabellen aufgebaut ;).
Eine große und dann alles in einander geschachtelt war für den anfang das leichteste und leicht an cms systeme wie Webspell anpassbar.
Nun bin ich wie du sucht darrauf umgestiegen meine seite mit Divs auf zu bauen also divs für die positionierung zu verwenden. Ich benutze aber auch noch Tabellen .. irgendwie ist das so nen mischmasch ^^.
Ich versuche mich im moment an XHTML nur bin ich da noch nicht so der Pro drinne und komme noch nicht mit den ganzen datein klar(*.xml,*.dtd,*.xsl) obwohl ich da nächste Woche ne Klausur drüber schreibe ^^.
Ich habe mir deinen Text mehrere male durch gelesen... mir ist jetzt klar was ich nicht tun soll aber ich weiß nicht genau wie ich die Homepage jetzt richtig aufbau nur über *.css hättest du da event. nen guten link zu nem Tutorial oder was änlichem ?
Sorry das mit den Frames war eher nen Witz ^^ und ich hätte gerne nach einträgen gesucht habe aber leider die Suchfunktion nicht gefunden ;)
mfg Cron;ugl
Als erstes vielen dank für die Antwort. Ich muss sagen das ich Grafikdesign und Homepage erstellung schon ein wenig länger betreibe. Nur habe ich mich nie mit barrierefreiheit beschäftigt. Ich habe anfangs meine Seiten nur mit
Tabellen aufgebaut ;).
Eine große und dann alles in einander geschachtelt war für den anfang das leichteste und leicht an cms systeme wie Webspell anpassbar.
Nun bin ich wie du sucht darrauf umgestiegen meine seite mit Divs auf zu bauen also divs für die positionierung zu verwenden. Ich benutze aber auch noch Tabellen .. irgendwie ist das so nen mischmasch ^^.
Ich versuche mich im moment an XHTML nur bin ich da noch nicht so der Pro drinne und komme noch nicht mit den ganzen datein klar(*.xml,*.dtd,*.xsl) obwohl ich da nächste Woche ne Klausur drüber schreibe ^^.
Ich habe mir deinen Text mehrere male durch gelesen... mir ist jetzt klar was ich nicht tun soll aber ich weiß nicht genau wie ich die Homepage jetzt richtig aufbau nur über *.css hättest du da event. nen guten link zu nem Tutorial oder was änlichem ?
Sorry das mit den Frames war eher nen Witz ^^ und ich hätte gerne nach einträgen gesucht habe aber leider die Suchfunktion nicht gefunden ;)
mfg Cron;ugl
E
Efchen
Guest
Tabellen zum Layout zu missbrauchen ist nicht nur etwas, das die Barrierefreiheit zerstören kann, es ist auch einfach nicht im Sinne von HTML. Daher muss man auch sagen, jemand der Tabellenlayouts fabriziert, hat sich nicht nur nicht mit Barrierefreiheit beschäftigt, sondern auch nicht mit HTML.
Wer den Umstieg zu CSS richtig geschafft hat, wird einsehen, dass das sogar oder insbesondere für Anfänger viel leichter ist, als Tabellen zu verschachteln.
Und es ist beides nicht im Sinne von HTML. Wozu muss man ein Element in einen gleichwertigen Container packen, m ihn zu positionieren? Warum positioniert man nicht gleich das Element? Du verpackst doch sicher Weihnachtsgeschenke auch nur einmal und nicht in zwei Kartons?
Für XHTML brauchst Du das alle ja gar nicht, sondern für XML.
Nein, hab ich leider nicht. Aber das Thema ist wahrscheinlich so einfach, dass das die meisten Leute für zu einfach halten und deswegen es nicht verstehen :-)
HTML benutzt Du für den Inhalt. Zeichne damit die logische Struktur aus. Benutze das Tag, was den Inhalt des Tags am besten beschreibt. Wie das Tag zu dem Zeitpunkt im Browser aussieht ist irrelevant. Erst wenn die Struktur mit HTML steht, machst Du Layout&Design mit CSS. Das ist eigentlich schon alles, dafür braucht man an sich kein Tutorial. Man muss nur kapieren, dass das, was man macht, wenn man den Inhalt auszeichnet, nichts mit dem Aussehen zu tun hat. Wenn Du das kapiert hast, macht es Klick und es wird alles glasklar und einfach :-)
Erst dann kommt CSS - das ist ein Kapitel für sich und da gibts sicherlich gute Tutorials.
Werbung:
![]()
E
Efchen
Guest
Nein. Keine Ahnung.
Schnapp Dir SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) und benutze die Kurzreferenz, da stehen alle Tags drin. Die Bedeutung ist auch erklärt. Es stehen zwar auch noch die alten Tags drin, die Layout/Design machen, wie z.B. <i> oder <b>, aber das ist aus der Beschreibung offensichtlich, dass diese keine Semantik machen. Ich bin mir nicht sicher, ob SelfHTML darauf schon explizit hinweist.
Ansonsten:
Schnapp Dir SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) und benutze die Kurzreferenz, da stehen alle Tags drin. Die Bedeutung ist auch erklärt. Es stehen zwar auch noch die alten Tags drin, die Layout/Design machen, wie z.B. <i> oder <b>, aber das ist aus der Beschreibung offensichtlich, dass diese keine Semantik machen. Ich bin mir nicht sicher, ob SelfHTML darauf schon explizit hinweist.
Ansonsten:
Code:
<h1><img src="banner.jpg" alt="Willkommen bei Firma Hase" /></h1>
<ul id="Menu">
<li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
</ul>
<div id="Content">
<h2>Seitentitel</h2>
<p>Lorem ipsum dolor sit amet.</p>
<h3>Impressum</h3>
<address>
Vorname Name
Hasenstr. 42
4242 Stadt
</address>
<p>Lorem ipsum <strong>dolor</strong> sit amet.</p>
</div>Werbung:
![]()
E
Efchen
Guest
Du hast gesagt, Du baust Deine Seite mit divs auf. Ich kann mich nur darauf beziehen, was Du sagst. Dann hast Du Dich falsch ausgedrückt.
Positionieren kann man übrigens alle Elemente, dazu braucht man nicht epxlizit ein div.
Positionieren kann man übrigens alle Elemente, dazu braucht man nicht epxlizit ein div.
- Status