überschrift und linie in html

[kolja]

nabend

ich bin ja nicht blöd, aber ich schaffe es nicht eine überschrift (<h1>)
direkt auf einer horizontalen linie (<hr>) zu platzieren...

aussehen soll das ganze später so:

Code: Alles auswählen

überschrift                                                   datum
-------------------------------------------------------------------

nur sollen die beiden texte genau auf oder über der linie stehen

bitte nicht lachen, und vielleicht helfen

danke

[PhilippK]

Da wirst du um CSS nicht drumrumkommen. Entweder in dem du den Abstand zwischen h1 und hr reduzierst oder indem du einfach dem h1 eine Linie hinzufügst.
Siehe http://de.selfhtml.org/navigation/css.htm

Gruß, Philipp

[kolja]

danke für den link:

Die CSS-Kurzreferenz ist nicht für Anfänger geeignet!

ich hab bis jetzt das hier:

Code: Alles auswählen

.h1 {
  border-bottom-color: #08884C;
  border-bottom-width: 2px;
  border-bottom-style:solid;
}

dummerweise kommt nach dem h1 tag immer ein zeilenumbruch,
desshalb muss ich mit 2 tabellenzellen arbeiten:

Code: Alles auswählen

<table width="100%" >
<tr>
<td class="h1"><h1>heute neu</h1></td>
<td class="h1"><div style="text-align: right;">01.10.1056</div></td>
</tr>
</table>

nur liegen diese beiden nicht genau nebeneinander, so dass immer ein spalt zwischen den linien entsteht:
http://mona-davinci.de/phpbb/portal.php

vielleicht gibt es da noch eine elegantere möglichkeit...

danke kolja

[Jensemann]

dummerweise kommt nach dem h1 tag immer ein zeilenumbruch,
desshalb muss ich mit 2 tabellenzellen arbeiten:

Nein, das ist aus 2 Gründen falsch:

1. Tabellen sind kein Layout Mittel. Vergesse bitte alle alten Publikationen zu HTML Layout Methoden, diese sind überholt.

2. Der Zeilenumbruch kommt nur deswegen, weil h1 ein Block-Element ist, setze im CSS die display Eigenschaft auf inline, dann wird es ein inline Element und es folgt kein Zeilenumbruch.

[kolja]

na gut, dann so:

Code: Alles auswählen

<h1 style="display:inline">Ich bin eine Überschrift</h1><div style="text-align: right;">01.10.1053</div>
<hr>

aber die ausgabe ändert sich nicht wirklich...

[S2B]

<div> ist auch ein Block-Element...

[Daniel92]

Code: Alles auswählen

<div style="border-bottom: 2px solid black;">
<span style="align: left; font-size: 25px;">Überschrift</span><span style="align:right">datum</span></div>

gehts vielleicht so???
keine ahnung, habe das mal so schnell zusammengebastelt

[S2B]

Womit die Semantik am ... wäre.

Ich dachte eigentlich, dass kolja das mal alleine versuchen sollte, aber egal jetzt:

Code: Alles auswählen

<div style="border-bottom: 1px #000 solid">
  <h1 style="margin: 0; float: left">Überschrift</h1>
  <div style="text-align: right">Datum</div>
  <!-- Wenn die Schriftgröße der Überschrift größer ist als das Datum: -->
  <div style="clear: left"></div>
</div>

Eine mehrerer Möglichkeiten...

[Jensemann]

Ich würde allerdings wirklich hr bevorzugen und keinen border-bottom setzen. HTML ist eben mehr als Pixelmalen und HR für eine Abtrennung durch eine Trennlinie ist logisch korrekt.

[S2B]

Ich würde allerdings wirklich hr bevorzugen und keinen border-bottom setzen. HTML ist eben mehr als Pixelmalen und HR für eine Abtrennung durch eine Trennlinie ist logisch korrekt.

Naja, ist die Frage, ob eine Überschrift vom Text darunter (davon gehe ich jetzt mal aus) semantisch abgetrennt werden sollte...