phpBB.de

Verfasst: **07.01.2007 23:12**

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

Verfasst: **07.01.2007 23:37**

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

Verfasst: **08.01.2007 01:08**

danke für den link:

SELFHTML hat geschrieben: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

Verfasst: **08.01.2007 09:51**

kolja hat geschrieben: 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.

Verfasst: **08.01.2007 10:49**

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...

Verfasst: **08.01.2007 14:12**

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

Verfasst: **08.01.2007 16:45**

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

Verfasst: **08.01.2007 18:14**

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...

Verfasst: **08.01.2007 18:16**

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.

Verfasst: **08.01.2007 18:18**

Jensemann hat geschrieben: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...

phpBB.de

überschrift und linie in html

überschrift und linie in html