nicht angemeldet
- Das Element
<div id="Seite">wird inzwischen von einigen verpönt, da es eine im Grunde überflüssige Verschachtelung darstellt, die von Autoren benutzt wurde, deren CSS-Kenntnisse nicht ausreichten, um gewünschte visuelle Darstellungen zu erreichen, ohne die gesamte Seite in dieses zusätzliche "Wrapper-Div" zu verpacken. Auch die aus meiner Feder stammende Website an meiner Schule leidet noch unter dieser Altlast. Daher kannst Du dieses Element getrost eliminieren.
Wenn ich dieses Element:
}
div#Seite {
text-align: left;
margin: 0 auto;
width: 760px;
padding: 0.5em;
border: 2px ridge silver;
}
aus der CSS entferne, habe ich die Struktur 2sp (Navi neben Text) nicht mehr!
Wie kann ich das sonst machen, außer mit div#Seite ??
- Für eine Navigation bietet HTML5 ein eigenes Element <nav> an. Damit können wir diesen Abschnitt Deines Dokuments so umgestalten:
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="...">...</a></li>
...
</ul>
</nav>
>
> Damit ist die Navigation völlig ohne id-Attribut mit CSS gestaltbar, da sie nun mit einem eigenen Element daher kommt.
>
Diese <nav> oben unter <body> verschiebt den Text nach unten. Ich will den Text aber daneben haben. Gebe ich die <navi> oberhalb von </body>, dann rutscht sie ganz nach unten.
> Entgegen dem Artikel über [die wichtige Reihenfolge von Webinhalten](http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/) finde ich keineswegs, dass die Navigation so früh im Dokument stehen muss. Wenn man sie von Fließtext "umfließen" lassen möchte, dann führt daran wohl kein Weg vorbei, aber in meinen Webseiten notiere ich sie als quasi-letztes Element (danach steht der Footer). Auf der Schulwebsite kannst Du das live in Aktion sehen.
Wenn ich die Navi nicht oben unter <body> gebe, dann rutscht sie ganz nach unten.
>
> > <h2><center>Das MOND AWARD Programm </center></h2>
>
> Das ist ein Anachronismus. Das <center>-Element hat mit der Verfügbarkeit der CSS-Technologie 1998 seine Daseinsberechtigung verloren. Wenn Du diese Unter-Überschrift unbedingt zentriert darstellen lassen möchtest, solltest Du ihr eine Klasse zuweisen. Beispiel:
>
> `<h2 class="eyecatcher">Das Mond AWARD Programm</h2>`{:.language-html}
>
> Das englische Wort "eye catcher" bedeutet "Blickfänger". Ich habe es als Namen für die Klasse gewählt, weil es eben nichts über das später beabsichtige Aussehen verrät, sondern über den Sinn dieser Klasse. Solltest Du später andere visuelle Gestaltungen umsetzen, dann wäre ein Klassenname wie "zentriert-und-rot" plötzlich nicht mehr vernünftig. Daher versucht man die Bedeutung und nicht das Aussehen für die Benennung bei Klassen zu verwenden. - Du darfst hier natürlich auch "blickfaenger" als Klasse benutzen.
>
> Mit einem passenden Eintrag in der CSS-Datei wird diese Überschrift dann zentriert (und rot) dargestellt:
>
> ~~~css
.eyecatcher {
> color: red;
> text-align: center;
> }
»
Wenn ich das in CSS einfüge:
.eyecatcher {
color: red;
text-align: center;
}
verändert das den Titel nicht, weder ist er zentriert, noch rot.
Liebe Grüße
Jenny
Matthias Apsel
Gunnar Bittersmann
JürgenB