h-Tag links und p-Tag rechts in einem div

Muckel

Guten Tag zusammen,

ich habe ein div (oben) und in jenem möchte ich die Überschrift h1 links anordnen und den p-Tag rechts daneben. Das ganze habe ich versucht, so um zu setzen:

Code

#oben {
    display:block;
    padding:0;
    margin:0;
    height:2.5em;
    width:100%;
    border:none;
    background-color:red;
}


#oben h1 {text-align:center; font-size:2em; line-height:2.5em; float:left; max-width:50%;} /*Titel der Seite*/


#oben p {text-align:center; font-weight:bold; font-size:1.5em; line-height:2.5em; float:right;} /*Untertitel der Seite*/

Alles anzeigen

html Teil:

Code

<div id="oben"><h1 name="oben">Titel der Seite</h1>
<p>Untertitel</p></div>

Doch leider funktioniert es nicht: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Es wird zwar beides links bzw. rechts gefloatet, doch es ist außerhalb des divs. Gut wäre es, wenn es so aussieht: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Wie kann ich das ändern? (Die rote Hintergrundfarbe ist nur zum testen).

Gruß Muckel

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Du brauchst danach noch ein clearendes Element, da floatende Elemente aus dem normalen Fluß heruasgenommen werden. Daher wird das umschließende <div> nicht auf deren Höhe aufgezogen.

HTML

<br style="clear:both" />

Muckel

Moin,

ein Fehler habe ich schon gefunden, es war das text-align:center was noch drinne war. Doch jetzt wird es komisch an geziegt: Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Wie bekomme ich diesen versatz weg und wie bekomme ich das ins rote div?

Gruß und Danke
Muckel

Muckel

Zitat von marX
Du brauchst danach noch ein clearendes Element, da floatende Elemente aus dem normalen Fluß heruasgenommen werden. Daher wird das umschließende <div> nicht auf deren Höhe aufgezogen.
HTML
<br style="clear:both" />

Das hat leider auch zu keinem Ergebnis geführt:

Code

<div id="oben"><h1 name="oben">Titel der Seite</h1>
<p>Untertitel</p><br style="clear:both" /></div>

Muckel

Das mit der höhe ging jetzt (hatte noch ein height drin :( .). Doch ich habe ein versatz drin - würde gerne beide unten anordnen.

Der Inhalt kann nicht angezeigt werden, da er nicht mehr verfügbar ist.

Gruß Muckel

marX

Natürlich muss genügend Platz vorhnaden sein, dass die beiden auch nebeneinander passen. Sonst rutscht das eine unter das andere. Abstand nach oben geht mittels margin-top. Oder du nimmst einfach eine Tabelle mit 2 Spalten. :twisted:

Muckel

Das Problem ist ja nicht die höhe - denn jene habe ich entfernt, so dass das ganze "dynamisch" ist. Leider ist es so, dass das h1 ja höher ist als das p Tag. Und das p Tag richtet sich nun an die obere Grenze des h1 und nicht, wie gewollt/gewünscht, an die untere.

Gruß und Danke
Muckel

marX

Ich weiß schon was dein Problem ist. Wie gesagt, am einfachsten wäre in deinem Fall die Verwendung einer 2spaltigen Tabelle, da nur dort vertical-align wie "erwartet" funktioniert. Ansonsten musst du versuchen bei <hX> und <p> mit height und line-height solange rumzuspielen, bis du auf vernünftige Werte kommst.

Monika

wenn was nach rechts fließt sollte es im Quelltext VOR dem Teil stehen, das nach Links fließt, dann sind die auf gleicher Höhe

lg

Muckel

Ist eine Tabelle noch valid bei so etwas und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Gruß Muckel

Monika

Zitat von Muckel

Ist eine Tabelle noch valid bei so etwas und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Gruß Muckel

:-? nix gut , Lösung ist oberhalb

lg

marX

Zitat von Muckel

Ist eine Tabelle noch valid bei so etwas

Warum nicht? :confused:

Zitat

und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Was ist an einer Tabelle mit 2 <td>s semantisch anders als an 2 <div>s?

Du kannst natürlich auch die display-Eigenschaften "table-cell" verwenden:
display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
(manche ganz verwirrte Leute meinen, das Tabellen so böse™ sind, dass man sie nicht verwenden darf, und bauen statt dessen Tabellen mit <div>s und entsprechenden display-Eigenschaften nach und meinen, dass das ja viieel besser ist...)

Das Problem bei Barrierearmut ("Barrierefreiheit" gibts nicht) sind ineinander verschachtelte Tabellen, da hier die Screenreader nicht mehr wissen, wie sie es darstellen sollen.

Versuchs erstmal mit Monikas Tipp und mit angepassten Höhen. Wenn das nicht so wirklich klappen will, dann kannst es immernoch mit einer "bösen™" Tabelle versuchen. ;-)

Muckel

Ist eine Tabelle noch valid bei so etwas und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Gruß Muckel

Monika

Zitat von Muckel

Ist eine Tabelle noch valid bei so etwas und wie verhält sich das mit den Richtlinien zur Barriere freiheit?

Gruß Muckel

valid ja barrierefrei nein

fload right muß immer vor float left stehen, dann gehts

lg

marX

Zitat von Monika

valid ja barrierefrei nein

Mmmh... :? Na egal...

Zitat

fload right muß immer vor float left stehen, dann gehts

Wobei man sich dann wahrscheinlich auch das float:left sparen kann. Es soll ja dann nichts mehr danach rechts am links gefloateten vorbei fließen.

Monika

Zitat von marX

Mmmh... :? Na egal...

Wobei man sich dann wahrscheinlich auch das float:left sparen kann. Es soll ja dann nichts mehr danach rechts am links gefloateten vorbei fließen.

naja kann man nicht, weil h2 ein Blockelement ist und display:inline anders reagiert als float left und weils sonst mit der Breite hapert usw...
aber wenn man kann, kann man --- leicht ists mit dem fließen

lg

marX

Mein Testcase: (zugegebenermaßen nur im FF3 getestet)

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "html-dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
  <title>Testcase</title>
  
  <style type="text/css">
	* {
		margin:0;
		padding:0;
	}
	
	#oben {
	    display:block;
	    height:2.5em;
		padding-top:1em;
	    width:100%;
	    border:none;
	    background-color:red;
	}


	#oben h1 {
		font-size:2em; 
		line-height:1em; 
		width:50%;
	}


	#oben p {
		float:right;
		width:50%;
		font-weight:bold;
		font-size:1em; 
		line-height:1em;
		margin-top:1em;
	}
  </style>
  
</head>


<body>


<div id="oben">
	<p>Untertitel</p>
	<h1>Titel der Seite</h1>
	<br style="clear:both" />
</div>


</body>


</html>

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

h-Tag links und p-Tag rechts in einem div

Jetzt mitmachen!