nicht angemeldet
erste Versuche mit div
Hallo.
Nachdem ich aufgrund diverser Forumsbeiträge vom Seitenlayout mit Frames und Tabellen weggehen wollte, habe ich mich etwas mehr mit css beschäftigt.
Beim Entwurf einer Seite mit den nachfolgenden Anforderungen habe ich das auch gleich mal anzuwenden versucht.
Ziele:
- oben: Banner / Schriftzug
- links Navigationsbereich mit fester Breite
- rechts oben Bereich für Navigations-Unterpunkte
- rechts Mitte: Bereich für den Seiteninhalt
- darunter: Werbelink und Such-Button
- Flexibilität der Seite in Bezug auf alle möglichen Bildschirmauflösungen ist besonders wichtig
Das Design meiner Testseite ist grausam, aber nicht von Belang, da es mir lediglich um die Seitenaufteilung geht!
Als Entwurf habe ich mal folgenden Code geschrieben, und würde gern wissen, ob dieser Code nun
- den Standards entspricht
- als einigermaßen "gut" angesehen wird
- ob es dazu noch Verbesserungsvorschläge gibt
Hier der Code:
<body style="background-color:#000000; font-size:100.1%">
<div style="position:absolute; left:10%; top:3%; width:80%; height:10%;">
<img style="width:100%; height:100%;" alt="Schriftzug coming soon">
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:60%; z-index:5;">
<div style="margin-left:188px; background-color:red; z-index:2;">
<p align="left" style="font-size:12px; color:yellow;"><u>Link 1 | Link 2 | Link 3 | Link
4</u></p>
</div>
</div>
<div style="position:absolute; left:3%; top:15%; width:170px; height:60%;
background-color:red; overflow:auto;">
<p align="center" style="font-size:0.95em; color:yellow;">MENÜPUNKT 1<br>PUNKT 2<br>DER
DRITTE LINK<br>KONTAKT</p>
</div>
<div style="position:absolute; left:3%; top:15%; width:95%; height:60%; z-index:3;">
<div style="margin-left:188px; background-color:yellow; height:100%; overflow:auto;
z-index:1;">
<br><h1 align="center" style="font-size:16px; color:red;">Überschrift</h1>
<p align="left" style="font-size:12px; color:red;">Testinhalt<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest
Testinhalt<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest<br>
Testtesttest<br>Testtesttest<br>Testtesttest<br>Testtesttest</p>
</div>
</div>
<div style="position:absolute; left:3%; top:76%; width:95%; height:9%;">
<p align="center" style="color:yellow; border-style=dotted; border-color:red;
border-width:1px;">
Werbe-Link: <a style="color:lime;"
target="_blank"href="http://www.selfhtml.teamone.de">SELFHTML</a></p>
</p>
</div>
<form name="FormularSuche" method="post" action="volltextsuche.php">
<div style="position:absolute; left:3%; top:86%; width:95%; height:12%;">
<p align="center" style="color:yellow; vertical-align:middle;">
<input type="text" name="Suchbegriff" style="width:25%">
<input type="submit" value="suchen">
</p>
</div>
</form>
Vielen Dank schonmal für weitere Tipps,
Thomas
-
Hi,
Nachdem ich aufgrund diverser Forumsbeiträge vom Seitenlayout mit Frames und Tabellen weggehen wollte, habe ich mich etwas mehr mit css beschäftigt.
das freut mich zu hören. Allerdings verstehe ich nicht, was der Hinweis auf "div" im Subject bedeuten soll - "erste Versuche mit semantischem Markup" wäre passender. <div>-Elemente werden zwar vorhanden sein, aber nur selten. Faustregel: Ein <div> ist dann richtig, wenn Du eine eingängige ID dafür finden kannst.
- oben: Banner / Schriftzug
Header-Bereich.
- links Navigationsbereich mit fester Breite
Navigations-Bereich.
- rechts oben Bereich für Navigations-Unterpunkte
Immer noch Navigations-Bereich.
- rechts Mitte: Bereich für den Seiteninhalt
Content-Bereich.
- darunter: Werbelink und Such-Button
Streng genommen auch Navigations-Bereich.
- Flexibilität der Seite in Bezug auf alle möglichen Bildschirmauflösungen ist besonders wichtig
Von Bildschirmauflösungen wirst Du nie etwas erfahren. Flexibilität in Bezug auf die Browserfensterinnengröße ist bei Deinem Wunschlayout beinahe trivial.
Das Design meiner Testseite ist grausam, aber nicht von Belang, da es mir lediglich um die Seitenaufteilung geht!
Trotzdem wäre es nett, wenn Du einen Link zu derselben posten würdest, da ich nur mäßig Lust verspüre, bei mir irgend welche HTML-Dokumente zu erzeugen.
Als Entwurf habe ich mal folgenden Code geschrieben, und würde gern wissen, ob dieser Code nun
- den Standards entspricht
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/- als einigermaßen "gut" angesehen wird
- ob es dazu noch Verbesserungsvorschläge gibt
Bitte Link posten.
Hier der Code:
Ohne den Beginn ist der nur die halbe Miete.
<div style="position:absolute; left:10%; top:3%; width:80%; height:10%;">
Bitte setze absolute Positionierung nur ann ein, wenn Du Dir _sicher_ bist, sie verstanden zu haben.
<img style="width:100%; height:100%;" alt="Schriftzug coming soon">
Bei Replaced Elements ist es legitim, die Größen in Form von HTML-Attributen zu transportieren: Sie sind Teil des Inhalts. Das src-Attribut ist zudem bei <img> required.
<p align="left" style="font-size:12px; color:yellow;"><u>Link 1 | Link 2 | Link 3 | Link
4</u></p>Eine Liste von Links ist eine Liste, kein Absatz. Auf Elemente wie <u> verzichte zudem.
<p align="center" style="font-size:0.95em; color:yellow;">MENÜPUNKT 1<br>PUNKT 2<br>DER
Der Einsatz von <br> ist ein sehr starkes Indiz dafür, dass die umgebende Struktur falsch gewählt ist.
<br><h1 align="center" style="font-size:16px; color:red;">Überschrift</h1>
Das align-Attribut ist deprecated. _Alles_, was Darstellung ist, wird per CSS transportiert, _nicht_ per HTML.
<p align="center" style="color:yellow; border-style=dotted; border-color:red;
border-width:1px;">
Werbe-Link: <a style="color:lime;"Ein Werbe-Link ist sicher kein Absatz im Textfluss. Beschäftige Dich mehr mit der Semantik der Elemente.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Trotzdem wäre es nett, wenn Du einen Link zu derselben posten würdest, da ich nur mäßig Lust verspüre, bei mir irgend welche HTML-Dokumente zu erzeugen.
Hab die nur lokal gespeichert, da ich wie gesagt nur ein wenig mit der Positionierung rumspielen wollte, um das ganze zu erlernen.
Ohne den Beginn ist der nur die halbe Miete.
head-Bereich usw. ist vorhanden, wurde nur weggelassen, weil ich nur den für meine Frage relevanten Code posten wollte.
Bitte setze absolute Positionierung nur ann ein, wenn Du Dir _sicher_ bist, sie verstanden zu haben.
<div style="position:absolute; left:10%; top:3%; width:80%; height:10%;">
Hab ich sie hier etwa falsch verwendet?<p align="left" style="font-size:12px; color:yellow;"><u>Link 1 | Link 2 | Link 3 | Link
4</u></p>Eine Liste von Links ist eine Liste, kein Absatz. Auf Elemente wie <u> verzichte zudem.
War nur, um Links zu simulieren (das Layout der Links wird natürlich in ein css-File ausgelagert)
<p align="center" style="font-size:0.95em; color:yellow;">MENÜPUNKT 1<br>PUNKT 2<br>DER
Der Einsatz von <br> ist ein sehr starkes Indiz dafür, dass die umgebende Struktur falsch gewählt ist.
Ich versteh liedre nicht ganz, was da falsch sein soll. Ist es nicht legitim, die Menüpunkte einfach untereinander hinzuschreiben?
<p align="center" style="color:yellow; border-style=dotted; border-color:red;
border-width:1px;">
Werbe-Link: <a style="color:lime;"Ein Werbe-Link ist sicher kein Absatz im Textfluss. Beschäftige Dich mehr mit der Semantik der Elemente.
Also dann einfach das den Link umgebende <p> weglassen?
Vielen Dank auf jeden Fall für die Tipps,
Thomas-
Hallo Thomas,
<p align="center" style="font-size:0.95em; color:yellow;">MENÜPUNKT 1<br>PUNKT 2<br>DER
Der Einsatz von <br> ist ein sehr starkes Indiz dafür, dass die umgebende Struktur falsch gewählt ist.
Ich versteh liedre nicht ganz, was da falsch sein soll. Ist es nicht legitim, die Menüpunkte einfach untereinander hinzuschreiben?
Ich denke mal (bin selbst CSS-Anfänger) Cheatah hat damit gemeint, die Menuepunkte sollten so definiert sein:
<h3>Menuepunkt 1</h3>
<h3>Menuepunkt 2</h3>Um u.U. zwischen den einzelnen Menuepunkten noch einen Zusatzabstand zu definieren, gilt dann:
<h3 style="margin-top:50px">Menüpunkt 3</h3>
Gruß
Robin@Cheatah: Krieg ich jetzt 'nen Leuchtkeks oder einen Tritt vor's Schienbein?;-)
-
Hallo Robin!
Ich denke mal (bin selbst CSS-Anfänger) Cheatah hat damit gemeint, die Menuepunkte sollten so definiert sein:
<h3>Menuepunkt 1</h3>
<h3>Menuepunkt 2</h3>Cheatah hat g a n z sicher nicht das Obige gemeint. Menus sind immer listen und sollten so auch dargestellt werden:
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>Wenn man diese nicht gestapelt dargestellt haben möchte macht man eben inline Elemente daraus.
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154-
Cheatah hat g a n z sicher nicht das Obige gemeint. Menus sind immer listen und sollten so auch dargestellt werden
Na gut, dann werd ich das ändern.
Wird mein Code (in meinem ersten Eintrag enthalten) denn eigentlich von allen gängigen Browser-Typen korrekt interprtiert oder habe ich da irgendwelche Probleme zu erwarten?
-
Hallo Thomas!
Nein. Ausser den bekannten Bugs im IE.
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154
-
-
Hallo,
Menus sind immer listen
Pauschalisierungen sind immer falsch[1].
viele Grüße ;-))
Axel
[1] Ähm, was war noch gleich Rekursion?
-
Hallo Axel!
Soweit hast Du natürlich recht, man sollte nicht pauschalisieren. Aber eine Headline ist wohl um einiges weniger richtig als eine Liste ;)
Dass man Menus auch anders als Listen _darstellen_ kann ist klar. Aber ein Menu ist im Normalfall immer eine Menge (Liste?) von Links.
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154-
Hallo,
Aber eine Headline ist wohl um einiges weniger richtig als eine Liste ;)
Eine Aufeinanderfolge von Headlines wäre im gegebenen Beispiel um _vieles_ weniger richtig als eine Liste. ;-))
Dass man Menus auch anders als Listen _darstellen_ kann ist klar. Aber ein Menu ist im Normalfall immer eine Menge (Liste?) von Links.
Nein.
Für
Erstes Kapitel - Vorheriges Kapitel - Inhaltsübersicht - Nächstes Kapitel - Letztes Kapitel
würde ich keine UL/LI-Elemente in eine Linie zwängen.
Da bin ich übrigens in guter Gesellschaft.
http://www.w3.org/WAI/Overview.html,detab
...
<p><span class="intnavbar"><a href="#News">news</a> - <a
href="#About">about</a> - <a href="#Participation"> participation</a> - <a
href="#resources">resources</a> <a name="startcontent"></a> <a
title="change column layout" href="/WAI/Overview.html"> <img
alt="change column layout" border="0" src="/Icons/detab"></a></span></p>
...viele Grüße
Axel
-
Hallo Axel!
Gerade vergleichst Du Äpfel mit Birnen. Das von Dir genannte ist in diesem Sinne natürlich nur bedingt eine Navigation, denn sie ruft keine neue Seiten auf, da es sich um Anker handelt. Ich finde da kann man natülich trefflich streiten, ob das als Kaptel-Navigation, oder als Kapitelverlinkung bezeichnet werden soll ;o)
Schönen Gruß
Afra
--
Heute schon gepixelt? http://www.pixel-plaza.de/index.php?module=profile&subName=house&itemID=154-
Hallo,
Gerade vergleichst Du Äpfel mit Birnen.
Ja, und?
viele Grüße
Axel
PS: Sagte ich schon, dass Pauschalisierungen immer falsch sind? Denn erstens kommt es anders und zweitens als man denkt :-)).
-
-
Hallo zusammen,
ist das jetzt richtig?
<div id="Inhaltsverzeichnis">
<div class="Titel" style="margin-top:130px">Inhalt</div>
<div class="Eintrag"><a href="Irgendwas_1.htm">Irgendwas 1</a></div>
<div class="Eintrag"><a href="Irgendwas_2.htm">Irgendwas 2</a></div>
<div class="Eintrag" style="margin-top:50px"><a href="AllgemeineDaten.htm">Allgemeine Daten</a></div>
</div>(Das mit den Headlines war wirklich völliger Quatsch, da hab' ich mal wieder von zwölf bis mittag gedacht ;-))
Gruß
Robin-
Hallo,
ist das jetzt richtig?
<div id="Inhaltsverzeichnis">
<div class="Titel" style="margin-top:130px">Inhalt</div>
<div class="Eintrag"><a href="Irgendwas_1.htm">Irgendwas 1</a></div>
<div class="Eintrag"><a href="Irgendwas_2.htm">Irgendwas 2</a></div>
<div class="Eintrag" style="margin-top:50px"><a href="AllgemeineDaten.htm">Allgemeine Daten</a></div>
</div>Nein, lass Dich nicht von unserer Diskussion irritieren. Für Dein Beispiel ist eine Liste, bzw. eine verschachtelte Liste, _wirklich_ optimal.
<ul style="list-style-type:none; margin:0; padding:0; margin-top:130px;">
<li>Inhalt
<ul style="list-style-type:none; margin:0; padding:0;">
<li><a href="Irgendwas_1.htm">Irgendwas 1</a></li>
<li><a href="Irgendwas_2.htm">Irgendwas 2</a></li>
<li style="margin-top:50px"><a href="AllgemeineDaten.htm">Allgemeine Daten</a></li>
</ul>
</li>
</ul>Das wäre 1:1 die Darstellung von Deinen DIVs.
So würde das allerdings nur sinnvoll sein, wenn es außer "Inhalt" noch weitere Hauptpunkte gibt und wenn der Abstand zwischen "Irgendwas 2" und "Allgemeine Daten" nur etwas mit dem Layout zu tun hat. Wenn der Punkt "Allgemeine Daten" nicht zum "Inhalt" gehört, muss er in eine separate Liste. Wenn es außer "Inhalt" keine weiteren Hauptpunkte gibt, kann das auch ein Hx-Element sein.
viele Grüße
Axel
-
Hallo Axel,
Nein, lass Dich nicht von unserer Diskussion irritieren.
Zu spät...;-)
So würde das allerdings nur sinnvoll sein, wenn es außer "Inhalt" noch weitere Hauptpunkte gibt und wenn der Abstand zwischen "Irgendwas 2" und "Allgemeine Daten" nur etwas mit dem Layout zu tun hat.
Das ist der Fall.
Danke für Deine Erklärung und Hilfe. Ist ja eigentlich auch logisch, eine Liste "aufzulisten", aber mein logisches Denken scheint Urlaub zu machen (hoffentlich kommt's mal wieder zurück!;-))Schönes Wochenende
Robin
-
-
-
-
-
-
Hallo Afra,
Menus sind immer listen und sollten so auch dargestellt werden:
Uups, da war ich aber auf dem völlig verkehrten Boot. Danke für den Hinweis.
Gruß
Robin
-
-
-
-
hi,
Faustregel: Ein <div> ist dann richtig, wenn Du eine eingängige ID dafür finden kannst.
also so?
<div id="ersterAbsatz">blah laber sülz, einleitender textabschnitt.</div>
scnr,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }