CSS Frage: Text auf Höhe der Überschrift

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich habe gerade ein kleines CSS Anfänger Problem. Alle Seiten auf meiner Website besitzen eine Überschrift, welche im folgenden Code zu sehen ist.

h1 {margin-top:20px; margin-bottom:20px; font-size:12pt}

Unter der Überschrift befindet sich etwas Abstand (20px), damit der nachfolgende Seiteninhalt nicht an der Überschrift klebt. Nun möchte ich aber auf einigen Seiten auf Höhe der Überschrift weiteren Text normaler Größe platzieren. Dieser sollte rechtsbündig sein. Wie muss ich forgehen, damit dieser Text nicht unter die Überschrift rutscht?

#2

Hallo Eddie,

h1 macht einen automatischen Absatz:

-> http://de.selfhtml.org/html/referenz/elemente.htm#bl…

damit kannst du den Absatz unterdrücken:

h1{ display: inline;}

-> http://de.selfhtml.org/navigation/suche/index.htm?Su…

welchen HTML-Standard verwendest du, wie sieht dein Doctype aus?

Grüße Roman

#3

Moin,

lies am besten etwas über das „Box Model“ nach, darüber, was Block- und was Inline-Elemente sind, und wie sie sich verhalten. Das ist notwendiges Basis-Wissen, wenn man CSS verstehen will.

Da wirst Du dann sehen, dass ein Block-Element ist. Eine Alternative zu Romans Lösung wäre „float“.

Liebe Grüße,
-Efchen

#4

Hallo,

danke für eure Posts. Die Block/Inline Erklärung klingt sehr verständlich. Ich habe mir auch heute ein CSS Buch bestellt, um mich besser einlesen zu können.

Mit „float“ habe ich bereits experimentiert. Mein Problem ist allerdings, dass sich auf Höhe der Überschrift rechtbündig z.B. eine dynamische Seitennavigation befinden soll. Diese Seitennavigation wird nur angezeigt, wenn mehr als eine Seite vorhanden ist.

Mehr als eine Seite:

**Überschrift** \>

Seiteninhalt
Seiteninhalt

Nur eine Seite:

**Überschrift**

Seiteninhalt
Seiteninhalt

Als Doctype verwende ich übrigens . Ich habe quasi den erstbesten genommen. Auch hier besteht wohl noch Nachholbedarf.

#5

Hallo,

huch, so kurz ist aber ein Doctype leider nicht. Das ist so wie der Hut vom Manne, wo der Körper fehlt…

-> http://de.selfhtml.org/html/allgemein/grundgeruest.htm

Da du vermutlich Unsicherheiten wegen dem verwendeten HTML-Standard haben wirst, prüfe dein Ergebnis:

-> http://validator.w3.org/

und auch deine CSS-Datei:

-> http://jigsaw.w3.org/css-validator/

Ich würde einen Platzhalter machen, der in jedem Fall eine „>“ hat, denn eine Seite gibt es ja immer :wink: Dann ist das mit der Formatierung leichter, denn der Platz ist dann nicht mal leer, mal belegt. Vermutlich gibt es aber noch elegantere Lösungen…

Grüße Roman

#6

Doctype HTML5
Moin.

Bei HTML5 schon: http://www.w3schools.com/html5/tag_doctype.asp

Schöne Grüße

Leo

#7

Ich vermute mittlerweile ein Block Elemet, das den Abstand nach unten regelt und zwei Inline Elemente umfasst, ist die „richtige“ Lösung.

Danke für deine Links, ich prüfe meine Seite am Abend, wenn ich wieder zuhause bin.

Schöne Grüße!

#8

Danke für Hinweis
Hallo Leo,

war in der Schnelle darüber gestolpert, Sorry. Dazu muss ich aber sagen, dass Eddie sich Gedanken um die Nutzer machen sollte, die keine HTML5 fähigen Browser haben, oder wo HTML5 nur teilweise unterstützt wird. Laut Wikipedia (14.6.2011) ist HTML5 noch in Entwicklung, also noch nicht fertig.

Als Doctype verwende ich übrigens . Ich habe quasi den erstbesten genommen

Grüße Roman

#9

Ich habe mein Problem nun wie im folgenden Beispiel gelöst. Was haltet ihr davon?

body {width:1000px; margin:0 auto}
#titel {display:block; width:1000px; margin-top:20px; margin-bottom:20px}
.ueberschrift {display:inline-block; font-weight:bold}
.navigation {display:inline-block; float:right}

Überschrift
>

Seiteninhalt

Seiteninhalt

#10

Moin!

Dazu muss ich
aber sagen, dass Eddie sich Gedanken um die Nutzer machen
sollte, die keine HTML5 fähigen Browser haben, oder wo HTML5
nur teilweise unterstützt wird. Laut Wikipedia (14.6.2011) ist
HTML5 noch in Entwicklung, also noch nicht fertig.

Und was passiert, wenn Du die Seite mit einem Browser ansiehst, der kein HTML5 kann?

Na?

Nichts, richtig. Es sieht genauso aus, wie bei anderen visuellen Browsern. Denn HTML hat ja nichts mit dem Aussehen der Site zu tun, sondern definiert die Semantik.
Natürlich gibt es dann sicher ältere Vorlesebrowser, die dann das ein oder andere Element nicht verstehen, aber schlimmer als eine Website, die sich einen Dreck um Semantik kümmert ist es sicherlich nicht. Und davon gibts ja leider immer noch zu viele.

Ist also nichts schlimm, HTML5 zu benutzen, zumal es auch nach Fertigstellung von HTML5 noch Browser geben wird, die das nicht kennen. So wie es heute noch Browser gibt, die kein CSS können, kein CSS brauchen oder solche, die nichtmal HTML4 können. Aber nutzbar ist die Website trotzdem.

Liebe Grüße,
-Efchen

#11

Tach!

Ich vermute mittlerweile ein Block Elemet, das den Abstand
nach unten regelt und zwei Inline Elemente umfasst, ist die
„richtige“ Lösung.

Primär ist vor allem erstmal zu prüfen, was der Inhalt bedeuten soll, denn in HTML legt man ja genau das fest. Irgendwelche Tags zu verwenden, ist keine gute Idee.

Grüße,
-Efchen

#12

Ich habe mein Problem nun wie im folgenden Beispiel gelöst.
Was haltet ihr davon?

Zunächst mal nichts, weil Du da beweist, dass Du den Sinn von HTML nicht verstanden hast, Dich aber schon auf das darauf aufbauende CSS stürzt. Das geht über Lang in die Hose.

Tipp: Inner Inhalt strikt von Layout trennen. Dazu gehört auch, dass CSS nur per externem Stylesheet eingebunden wird.

<div id=„titel“>

Gut gewählte ID. Tipp: Auch Klassen-/ID-Bezeichnungen immer mit semantischen Benennungen bezeichnen, so wie alles in HTML.

<div class=„ueberschrift“>Überschrift</div>

Grober Fehler: Damit definierst Du eine Gruppe, keine Überschrift. Kein Browser kann hier erkennen, dass das eine Überschrift sein soll. Überschriften werden ausschließlich mit den Tags <h1> bis <h6> definiert.

<div class=„navigation“><< 1 2 3 4 5 >></div>

Zwei grobe Fehler.

  1. Ein Tag „<< 1 2 3 4 5 >>“ gibt es nicht. Maskiere also die Entities.
  2. Das ist keine Navigation. <div> bedeutet „Gruppe“. Eine Gruppe ist das auch nicht. Eine Navigation ist eine Liste von Links. Richtig wäre also z.B. eine <ul>, wo jeder Link noch als <li> definiert ist. In HTML5 gibts IMHO auch ein eigenes Tag für Navigationen.

Seiteninhalt<br>

Ich weiß, es ist ja alles nur ein Beispiel, aber es gibt keinen vernünftigen Grund, bei Beispielen fehlerhaften bzw. sinnfreien Code zu schreiben, nur weil es schneller geht.
Benutze <br> nie für einen optischen Zeilenumbruch. HTML definiert die Semantik, nicht die Optik. <br> macht nur in sehr wenigen Fällen einen Sinn, wo wirklich ein logischer Bruch eingebaut werden soll, wie z.B. bei Adressen oder Gedichten. Oft wird <br> mehrmals hintereinander benutzt, um Abstände zu definieren. Das ist definitiv falsch.

Optisch wirst Du damit aber vermutlich Deinen Effekt erzielen, wobei ich gerade gestehen muss, dass mir die Wirkung von inline-block nicht richtig vertraut ist, ich mir also die Frage stelle, ob das wirklich nötig ist und nicht Probleme mit älteren IEs verursacht, die das nicht verstehen. Wenn Du bei beiden kein display angibst, sind beide Block-Elemente und zusammen mit float funktioniert das gut, wobei dann allerdings div#navigation im HTML-Code *vor* dem anderen Element kommen muss. Warum? Das liest Du bei der Definition von „float“ nach und was es mit dem „Textfluss“ auf sich hat. Denn gefloatete Elemente werden aus dem Textfluss genommen.

Bei Fragen einfach fragen!

Liebe Grüße,
-Efchen

#13

Das leuchtet soweit ein, wieder was dazugelernt. In meinem derzeitigen (minimalistischen) Design besitzen die Überschriten dieselbe Schriftgröße wie der restliche Text. In diesem Fall geht es anscheinend auch einfacher:

<!-- Später in seperater CSS Datei -->
body {width:1000px; margin:0 auto; font-family:verdana, sans-serif; font-size:10pt}
h1 {font-size:10pt}
.navigation {float:right}
Dynamisch generierte Seitennavigation auf Höhe der Überschrift
Überschrift
Seiteninhalt…

Sollte ich mich aber eines Tages entscheiden, die Überschrift zu vergrößern, habe ich anscheinend erst wieder den Salat. Einen besseren Lösungsweg würde ich daher nicht ablehnen :wink:

#14

sind beide Block-Elemente und
zusammen mit float funktioniert das gut, wobei dann allerdings
div#navigation im HTML-Code *vor* dem anderen Element kommen
muss. Warum? Das liest Du bei der Definition von „float“ nach
und was es mit dem „Textfluss“ auf sich hat. Denn gefloatete
Elemente werden aus dem Textfluss genommen.

Nicht vergessen
h1 {float:left}
p {float:left}
div {clear:left … float:left}

nicht ganz fein aber

das div wird durchs clear:left; wieder wie ein block-element in der neuen zeile starten.Das ist bei script erstelltem HTML schon ok.

Es gibt natürlich ganz üble automaten die produizeren sowas

h1 {float:left}
p {float:left}
.neuezeile {clear:both}
div { float:left}

das ist aber in jedem sinne falsch . Was soll da das leere div neuezeile .

#15

Wie auch immer .

Ich hab festgestellt das wenn ich von jemand ein tabellen layout bekomme mit
und allen schnickschnack , ich genau das alles erstmal wegmache.
Dann die HTML tags die noch sinn machen im ablauf richtig umstellen und erst am ende , fang ich an die dinger optisch mit css zu barbeiten.
Nie und nicht mach ich mir im HTML viel gedanken darüber .

Es gibt also diese Die Ueberschrift nur für das Auge , das Auge wird wohl an position und aussehen erkken das es eine Üeberschrift ist , alles ohne auge kann das nicht als ueberschrift identifizieren .
somit würde jeder webcrawler es als schlichten text identifizieren.
Will man aber gefunden werden nach wichtigkeit so ist eine üeberschrift erstmal wichtiger als der text dazu . Bei Die Ueberschrift , weiss ein anderes System, das das die Hauptüberschrift ist . Will man die klein und anders haben dann bestimmt man das mit css , da geht dann auch der sinn nicht verloren .

1 Like
#16

In meinem
derzeitigen (minimalistischen) Design besitzen die
Überschriten dieselbe Schriftgröße wie der restliche Text. In
diesem Fall geht es anscheinend auch einfacher:

Es?

h1 {font-size:10pt}

„pt“ ist eine Einheit für die Druckausgabe. „pt“ gibt es am Bildschirm nicht. Besser ist „px“ (wobei der IE die Skalierung von Text in „px“ nicht zulässt, was eine Barriere darstellt) oder besser „em“, weil das orientiert sich an der im Browser von jedem Benutzer individuell voreingestellten Idealschriftgröße.

Seiteninhalt…

Da fehlt ein Tag drumrum.

Sollte ich mich aber eines Tages entscheiden, die Überschrift
zu vergrößern, habe ich anscheinend erst wieder den Salat.

Nein. Wieso?
Zunächst ist der HTML-Code so richtig. Der ändert sich nicht, wenn man eine Schriftgröße ändern will.

Einen besseren Lösungsweg würde ich daher nicht ablehnen :wink:

Ich hab zuerst gegrübelt, was Du meinst, vermute aber, dass Du für das nachfolgende Tag (wo dann „Seiteninhalt“ drin steht) ein „clear:both“ suchst. Damit stellst Du den Textfluss wieder her (da gibts den Spruch: Wer „float“ sagt, muss auch „clear“ sagen) und der nachfolgende Inhalt fängt dann immer unterhalb des letzten Tags an, egal wie hoch es (oder das gefloatete) ist.
Probiers mal aus.

#17

Ich hab festgestellt das wenn ich von jemand ein tabellen
layout bekomme mit
und allen schnickschnack , ich genau
das alles erstmal wegmache.
Dann die HTML tags die noch sinn machen im ablauf richtig
umstellen und erst am ende , fang ich an die dinger optisch
mit css zu barbeiten.
Nie und nicht mach ich mir im HTML viel gedanken darüber .

das ist ja eigentlich auch genau richtig so. Im Regelfalle macht man im HTML-Code nichts, was mit der Optik zu tun hat.

Es gibt also diese Die Ueberschrift
nur für das Auge

Wobei dann Suchmaschinen und Vorlesebrowser einen anderen Eindruck vom Inhalt der Seite bekommen, als Menschen vor einem visuellen Browser. Und das kann wohl kaum gewünscht sein.

Will man aber gefunden werden nach wichtigkeit so ist eine
üeberschrift erstmal wichtiger als der text dazu . Bei Die
Ueberschrift , weiss ein anderes System, das das die
Hauptüberschrift ist .

Und ich gehe noch weiter und behaupte, dass Suchmaschinen, die die Wichtigkeit des Inhalts bewerten, Probleme mit Seiten haben, die keinerlei Überschriften und keine Textabsätze haben, weil eigentlich jede *normale* Seite genau sowas hat. Auch hier bestätigen Ausnahmen wieder die Regel. Es ist also nicht nur ein „Goodwill“ gegenüber Behinderten Menschen, sondern auch wichtig für das eigene Auftreten. Und das Gefundenwerden in Suchmaschinen. Aber das dringt halt leider nur langsam zu Normalsichtigen durch („Hauptsache es sieht so aus, wie ich es will“).

#18

Diesen Beitrag hast Du vorher dreimal gelöscht… :smile:
Mailbenachrichtigung sei dank habe ich alle gelesen. Trotzdem weiß ich nicht genau, was Du mir letztlich damit sagen willst :wink:

Außer des wahrscheinlich essenziellen Hinweises auf das clear, der anderswo im Thread besser aufgehoben gewesen wäre.

#19

Diesen Beitrag hast Du vorher dreimal gelöscht… :smile:
Mailbenachrichtigung sei dank habe ich alle gelesen. Trotzdem
weiß ich nicht genau, was Du mir letztlich damit sagen willst

Das dein float wie ich ja zitiert habe , auch wieder gelöscht werden kann mit clear:float .

Das hast du irgentwie ganz verweigert das zu sagen . float bleibt ja nicht unbedingt ewig oder ? , laut deinem beitrag aber schon .

#20

OT^5: CSS Frage: Text auf Höhe der Überschrift

Diesen Beitrag hast Du vorher dreimal gelöscht… :smile:
Mailbenachrichtigung sei dank habe ich alle gelesen. Trotzdem
weiß ich nicht genau, was Du mir letztlich damit sagen willst
:wink:

tja das grösste manko hier ist das man seine Fehler nachher nicht mehr korrigieren kann , jedes stink normale Forum kann das auch , macht ja auch sinn . aber wir sind hier ja nicht in einem Stink normalen forum , eher in einem frame gestörten system.

P.S. der Abbruch button beim Thread schreiben , lääst mich mal wieder irgentwo aufschlagen . Da passiert es doch des öffteren das meine Antwort dann sogar an einem Falschen thread hängt, warum , weil tranig wie man ist , denkt das man den gleichen thread angeklickt hat , der aber leider (scroll runter) viel weiter unten WAR. Ja WAR , ugly FRAMES .

Ich werd also solange meine Beiträge löschen wie ich der Meinung bin das sich da noch fehler eingeschlichen haben , die auch wenn ichs vorher verscuhe zu checken dennoch übersehe , das liegt aber wirklich an meiner legstenie , ich brauch halt ewig um meine eigenen texte zu verbessern , denn im Kopf scheint das richtig zu sein , nur auf dem Zettel fehlt dann einiges . :smile:

also immer gut aufbewahren die email lol und in ein blog paken und mal chronologisch mein kampf mit der rechtschreibung und satzstellung im Lehruntericht durchgehen . Was sagt eigentlich ein Psychologe dazu :smile:

P.P.S. in anderen foren hab ich da weniger Probleme , die gehen nicht von dem Perfekten Detuschen Frager aus . Und auch ich mag meine Fehler , dennich sie sehe ,nicht online lassen :smile: