[GELÖST] <div> - Strukturierung

Hai

ich kenne mich schon eigentlich sehr gut aus in HTML & CSS. Vorher habe ich für das Design immer

benutzt. Hab’ mich mal jetzt an
rangetraut. :slight_smile:
Nun meine Frage, wie sage ich dem Computer, dass z.B. erst der header kommt und DARUNTER beispielsweise die Navigation…

Gruss Tobii

Problem hatte ich auch schon mal. Du musst width:100% im Header setzen, dann kommt die Navigation darunter.

Du schreibst ‘header’ und ‘Navigation’ in geeignete
Blockelemente wie div, p (Absatz), h1-h6 (header, heading?),
ul/ol/dl (Navigation?).
Wenn nun das Blockelement für ‘Navigation’ hinter dem für
’header’ im Quelltext steht, erscheint es darunter.

Verfeinern kann man sowas natürlich mit CSS, da gibt man
dem betreffenden Blockelement einen die Funktion
wiederspiegelnden Fragmentidentifizierer (id-Attribut) oder
wenn ähnlich Blockelemente mehrmals im Dokument auftauchen
ein class-Attribut.
Dem Fragment oder den Elementen einer Klasse kann man dann
per CSS Eigenschaften zuordnen, Randabstände zu anderen
Elementen, relative, absolute und fixierte Positionierungen, je
nachdem, was man braucht.

Stimmt, über die h1-Funktion gehts auch. Das hab ich ganz vergessen im Laufe der Zeit,aber mal in SelfHTML gelesen

Danke für die Antworten, nun klappt es :smiley:
gruss Tobii :smiley:

janbender - Jaja, das sieht man am Aufbau deiner Seite, daß du
vergessen (oder nie gewußt hast), wie man (X)HTML sinnvoll
benutzt ;o)
Die Elemente haben eine sinvolle semantische Funktion.
div ist hingegen ein Blockelement ohne spezifische Bedeutung.
Verwendet man eigentlich nur, wenn sonst gar kein passendes
Blockelement definiert ist, etwa auch für allgemeine oder rein
dekorative Strukturierungen von großen Inhaltsgruppen, ist aber
inhaltlich belanglos.

Jo, bin auch so ein Table-Div-Umsteiger. Hab leider kein passendes Buch zuhause, daher musste ich gucken, wie ich klarkomme.

Mhh meine 2. Frage :smiley: :slight_smile:
wie vermeide ich dass der text über die rechte box geht?

Beispiel: http://img.bplaced.net/div/

das kommt drauf an, wie es aussehen soll.

Bei (X)HTML ist das kniffliger, gibt aber mehrere Möglichkeiten:

  1. Box größer machen (CSS)
  2. Nicht so lange Wörter verwenden
  3. An kann-Trennstellen ­ verwenden
    (manche browser interpretieren das allerdings nicht komplett
    korrekt, arbeiten da also fehlerhaft)

Weitere Möglichkeiten gibt es mit PHP, damit kann man
lange Wörter mehr oder weniger willkürlich nach n Buchstaben
zwangstrennen. Das ist allerdings eher hilfreich, wenn man
die Breite der Box in für Buchstaben geeigneten Einheiten
festlegt (em, ex), px ist da für Textinhalt ganz allgemein eine
ziemlich unsinnige Einheit.

aber das sieht ja wieder verschieden aus bei mehreren bildschirmauflösungen ^^ es muss doch noch eine simple Lösung geben :smiley:

Du meinst bei verschiedenen Fenstergrößen?
(Auflösung natürlich auch, denn bei hoher Auflösung wird der
Nutzer einen größere Schriftart verwenden, um etwas lesen
zu können).
Es ist ja einer der großen Vorteile von (X)HTML, daß sich der
Inhalt den Bedürfnissen des Betrachters anpaßt, anders herum
hat sich das oftmals als wenig freundlich und hilfreich erwiesen.

Ein anderer Ansatz wird etwa mit SVG verfolgt, da malt man ein
vom Nutzer frei skalierbares Bild - bis auf die Größe sieht es
bei jedem gleich aus. Es ist aber relativ mühsam, bei SVG
größere Mengen Text als Autor unterzubringen, weil man sich
da wirklich um alles selber kümmern muß. Bei XHTML hingegen,
was ja ein Format zur Auszeichnung von Text ist, übernimmt der
browser die Optimierung der Darstellung für den jeweiligen
Nutzer (wobei dieser einige Vorgaben macht, auch durch die
Größe des Monitors, Sehfähigkeit, Hörfähigkeit etc …)

Also es muss doch irgendwas geben^^ ich meine ich bin ja nicht der einzigste der divs verwendet ^^

Nun, es gibt wohl inzwischen browser, die, sofern sie die Sprache
erkennen und mit den Trennregeln vertraut sind, sich daran
versuchen, Wörter zaghaft zu trennen. Wird ihnen bei zufälligen
Buchstabenkombinationen kaum gelingen ;o)
Insofern - was erwartest du, was da passieren soll?
Automatischen Zeilenumbruch gibt es, wo Leerzeichen sind,
bei einigen browsern eben auch bei Trennstrichen oder wenn
sie keinen Fehler haben bei Bedarf immer dort, wo ­
eingefügt ist.
Fortgeschrittene Textsatzsysteme wie LaTex haben spezielle
Pakete, die Silbentrennung pro Sprache auf die Reihe bekommen
und selbst da darf man als Autor noch manchmal nachhelfen.
Wenn du nun (X)HTML nimmst, wo automatisches Trennen gar
nicht vorgesehen ist und es auch in keiner Sprache Trennregeln
für willkürliche Buchstabenfolgen gibt, so kannst du da von den
browsern keine sinnvollen Reaktionen erwarten. Je ungünstiger
das Verhältnis von Schriftgröße zu Containerbreite wird, desto
auffälliger wird der Effekt eben, das ist letztlich bei keinem
Textsatzsystem anders, wobei die für Papierausdrucke den
Vorteil haben, daß das Ausgabeformat klar definiert ist.
Dafür hat bei (X)HTML der Leser den Vorteil, daß er etwa die
Schriftgröße frei einstellen kann und für ihn unsinnige Angaben
des Autors damit überschreiben kann (minimale Schriftgröße
nennt sich das beim browser oft). Deswegen müssen auch
Angaben zur Schriftgröße, die kleiner als 1em für html/body
sind, nicht helfen, da sie je nach Voreinstellung ignoriert
werden können.

CSS bietet jedenfalls die Möglichkeit, daß man Inhalte in solchen
Fällen entweder überstehen lassen kann (overflow: visible,
Voreinstellung), ihn verstecken kann (overflow: hidden) oder
daß man das Element Rollen kann (overflow: scroll). Dann gibt
es noch overflow: auto, da guckt der browser dann, ob Platz
genug ist oder nicht, wenn nicht, werden Rolleisten angeboten.