nicht angemeldet
Frage zu <section>
Gunnar Bittersmann
Der Martin
Matthias ApselMoin,
darf Innerhalb von <section> ein <footer> auftauchen?
-
Moin,
ich habe noch eine zweite Frage und zwar zu <figure>. Ich binde mein Bilde wie im Wiki von SELFHTML beschrieben so ein:
<figure class="einzel"> <img src="img/1.jpg" alt="Bild 1" /> <figcaption>Bild 1</figcaption> </figure> <figure class="einzel"> <img src="img/2.jpg" alt="Bild 2" /> <figcaption>Bild 2</figcaption> </figure>Nun habe ich die Bildunterschrift darunter. Wäre es möglich diese _über_ dem Bild anzuordnen oder muss ich dann auf DIVs zurückgreifen?
-
@@Jnnbo:
nuqneH
Nun habe ich die Bildunterschrift darunter. Wäre es möglich diese _über_ dem Bild anzuordnen oder muss ich dann auf DIVs zurückgreifen?
RTFM. figcaption darf auch als erstes im figure-Element stehen.
Bei bestehendem Markup ließe sich die Bildunterschrift auch mit CSS über das Bild setzen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Hallo,
<figure class="einzel"> <img src="img/1.jpg" alt="Bild 1" />
<figcaption>Bild 1</figcaption>
</figure>
<figure class="einzel"> <img src="img/2.jpg" alt="Bild 2" />
<figcaption>Bild 2</figcaption>
</figure>> > Nun habe ich die Bildunterschrift darunter. Wäre es möglich diese \_über\_ dem Bild anzuordnen ... ja sicher - dreh einfach die Reihenfolge der beiden Kindelemente des figure-Elements um. > oder muss ich dann auf DIVs zurückgreifen? Das eine hat mit dem anderen nichts zu tun. Ein div dient dazu, mehrere andere Elemente zu einem Block zu gruppieren, wenn kein semantisch passenderes Element in Frage kommt. Aber hier hast du ja figure als gruppierendes Element. So long, Martin -- Es sagte... ein korpulenter Lehrer zu einem Schüler, der ihn ein Fass genannt hatte: "Nein. Ein Fass ist von Reifen umgeben, ich dagegen von Unreifen." Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo
oder muss ich dann auf DIVs zurückgreifen?
Das eine hat mit dem anderen nichts zu tun.
<ironie>Aber kann er dann überhaupt CSS verwenden ohne DIVs?</ironie>
Gruß
Kalk
-
-
-
@@Jnnbo:
nuqneH
darf Innerhalb von <section> ein <footer> auftauchen?
RTFM. footer element, Contexts in which this element can be used, click auf flow content.
RTFM2. section element, Content model, click auf flow content.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Moin,
RTFM. footer element, Contexts in which this element can be used, click auf flow content.
also darf ich innerhalb von einer <section> kein <footer> nehmen? Dann habe ich jetzt ein großes Problem bzw. greife hier eben auf ein <div> zurück.
-
@@Jnnbo:
nuqneH
RTFM. footer element, Contexts in which this element can be used, click auf flow content.
also darf ich innerhalb von einer <section> kein <footer> nehmen?
Wie kommst du denn darauf? Steht doch anders an der von mir verlinkten Stelle.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Moin Gunnar,
das heißt, ich kann mit diesem Dokument weiter arbeiten?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Titel</title> <link rel="stylesheet" href="css/design.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Name der Seite</h1> <img src="img/design/logo.png" alt="Logo" class="logo"> <nav> <ul> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> <li><a href="#">Test 4</a></li> <li><a href="#">Test 5</a></li> </ul> </nav> </header> <section> <h2>Herzlich Willkommen</h2> <article class="phone"> <h2>Nehmen Sie Kontakt mit uns auf</h2> <p>Telefon</p> <p>Handy</p> </article> <article> <h2>Titel</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <figure class="einzel"> <figcaption>Bild 1</figcaption> <img src="img/1.jpg" alt="Bild 1" /> </figure> <figure class="einzel"> <figcaption>Bild 2</figcaption> <img src="img/2.jpg" alt="Bild 2" /> </figure> </article> <footer> <p>© 2015</p> </footer> </section> </body> </html>Laut http://validator.w3.org/check bekomme ich zwar 2 warning(s) aber damit kann ich erstmal leben.
-
@@Jnnbo:
nuqneH
<html lang="en">
Da ist die falsche Sprache angegeben; es muss "de" heißen.
<section>
Hier wäre statt
<section>wohl<main role="main">angebracht. (Verdammt, gibt’s dazu immer noch keinen SELF-Artikel? :-/)<h2>Herzlich Willkommen</h2>
Ein „Herzlich Willkommen“ ist auf einer Webseite unnötig. Ein Nutzer kann davon ausgehen, dass er/sie auf der Website willkommen ist, sonst wäre diese nicht im Web.
<article class="phone">
Hier wäre statt
<article>wohl<address>angebracht.<article>
Hier wäre statt
<article>wohl<section>angebracht.Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo,
<h2>Herzlich Willkommen</h2>
Ein „Herzlich Willkommen“ ist auf einer Webseite unnötig. Ein Nutzer kann davon ausgehen, dass er/sie auf der Website willkommen ist, sonst wäre diese nicht im Web.
Wenn du einem Bettler 50 € in die Hand drückst und er sich herzlich bedankt, sagst du ihm dann auch: "Das ist unnötig, ich geh davon aus, dass du dankbar bist."?
Gruß
Kalk -
Hallo Gunnar,
vielen dank für deine Verbesserungen. Ich habe es geändert, passt es nun?
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Titel der Seite</title> <link rel="stylesheet" href="css/design.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> <h1>Titel der Seite</h1> <img src="img/design/logo.png" alt="Logo" class="logo"> <nav> <ul> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> <li><a href="#">Test 4</a></li> <li><a href="#">Test 5</a></li> </ul> </nav> </header> <main role="main"> <address class="phone"> <p>Nummer</p> <p>Mail Adresse</p> </address> <section> <h2>Titel</h2> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> <figure class="einzel"> <figcaption>Bild 1</figcaption> <img src="img/1.jpg" alt="Bild 1" /> </figure> <figure class="einzel"> <figcaption>Bild 2</figcaption> <img src="img/2.jpg" alt="Bild 2" /> </figure> </section> <footer> <p>© 2015</p> </footer> </main> </body> </html>-
Om nah hoo pez nyeetz, Jnnbo!
Ich würde die Navigation nicht in den header stecken, auch wenn sie vielleicht visuell dort zu sehen sein soll, ebenso gehört der Footer nicht in das main-Element, imho.
http://wiki.selfhtml.org/wiki/Header
Matthias
-
Hallo Matthias,
da ich jetzt doch ein paar verschiedene Meinungen zum Thema Aufbau gelesen habe, hier mal ein ganz einfacher Aufbau meiner Seite
vielleicht kommt es jetzt besser rüber wo es hingehen soll. Daher denke ich schon, dass es besser ist, wenn meine Navigation im <header> ist dass ich diese beide nach links bringen kann und der <footer> im <main> dass der immer auf der rechten Seite unter dem Content ist?
-
@@Matthias Apsel:
nuqneH
Ich würde die Navigation nicht in den header stecken
Warum nicht?
“A header typically contains a group of introductory or navigational aids.” [HTML5]
ebenso gehört der Footer nicht in das main-Element, imho.
“The footer element represents a footer for its nearest ancestor … element. A footer typically contains information _about its section_” [HTML5]
Kommt also drauf an, ob sich der Inhalt des Footers auf den Bereich bezieht oder auf die Seite/Website.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Om nah hoo pez nyeetz, Gunnar Bittersmann!
Ich würde die Navigation nicht in den header stecken
Warum nicht?
“A header typically contains a group of introductory or navigational aids.” [HTML5]
Ich sehe die Hauptnavigation eines Projektes nicht als Navigations_hilfe_ an. Dennoch kann es Links im header geben, etwa zum Impressum oder zum Kontaktformular.
Matthias
-
-
-
Hallo,
ich möchte gerne den <header> Bereich links beim scrollen stehen lassen. Um beide Bereiche also den <header> und <main> links und rechts anzuordnen verwende ich folgendes CSS
header { margin-top:2em; margin-right:50px; display:inline-block; width:230px; vertical-align:top; } main { display:inline-block; width:680px; margin-top:2em; }Klappt auch, aber sobald ich dem <header> ein position:fixed; gebe, bleibt dieser zwar stehen, aber der <main> Bereich legt sich _über_ den <header> Bereich. Warum greift hier das display:inline-block; nicht mehr?
-
Om nah hoo pez nyeetz, Jnnbo!
ich möchte gerne den <header> Bereich links beim scrollen stehen lassen.
Nein, den header-Bereich. Siehe http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Klappt auch, aber sobald ich dem <header> ein position:fixed; gebe, bleibt dieser zwar stehen, aber der <main> Bereich legt sich _über_ den <header> Bereich. Warum greift hier das display:inline-block; nicht mehr?
position fixed und absolute nehmen das Element aus dem Elementfluss. Die anderen Elemente kennen und sehen es quasi nicht mehr, wissen also auch nicht, wo es sich umhertreibt und denken deshalb nicht im Traum daran, sich selbst in irgendeiner Form einzuschränken.
Matthias
-
Hallo Matthias,
Nein, den header-Bereich. Siehe http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Ich weiß jetzt wirklich nicht, was du mir mit dieser Grafik bzw. mit dieser Seite sagen willst?
position fixed und absolute nehmen das Element aus dem Elementfluss. Die anderen Elemente kennen und sehen es quasi nicht mehr, wissen also auch nicht, wo es sich umhertreibt und denken deshalb nicht im Traum daran, sich selbst in irgendeiner Form einzuschränken.
Finde ich aber sehr schade, dass die sich so verhalten. Denen sollte man mal etwas Manieren beibringen :) Spaß bei Seite, das heißt ich muss in diesem Fall mit margin-left arbeiten?
-
Om nah hoo pez nyeetz, Jnnbo!
Nein, den header-Bereich. Siehe http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Ich weiß jetzt wirklich nicht, was du mir mit dieser Grafik bzw. mit dieser Seite sagen willst?
<header> ist das Starttag des Elements header. <header> gibt es nur im Quelltext, das was im Browser nachher zu sehen sein soll, ist der Elementinhalt.
position fixed und absolute nehmen das Element aus dem Elementfluss. Die anderen Elemente kennen und sehen es quasi nicht mehr, wissen also auch nicht, wo es sich umhertreibt und denken deshalb nicht im Traum daran, sich selbst in irgendeiner Form einzuschränken.
Finde ich aber sehr schade, dass die sich so verhalten. Denen sollte man mal etwas Manieren beibringen :) Spaß bei Seite, das heißt ich muss in diesem Fall mit margin-left arbeiten?
Beispielsweise.
position: fixed; ist nicht unproblematisch. Etwa, wenn die Navigation länger ist als der Bildschirm hoch. Außerdem verschenkst du ggf. eine ganze Menge Platz. Siehe http://selfhtml.apsel-mv.de/scroll/scroll.html
Matthias
-
-
-
-
-
-
-
-
-
