Überschrift: Problem mit Anordnung

[Bochea]

Hallo!

ich habe folgendes Problem.

Ich möchte eine Überschrift, die aus 3 Wörtern besteht so aufteilen, dass das Erste Wort ganz Links, das Zweite in der Mitte und das Dritte ganz Rechts angezeigt wird und alle 3 Wörter sollen in einer Zeile sein.Ich bin echt überfragt und finde auch nirgends etwas dazu :/
Wenn ich

<h1 align="left>Wort</h1><h1 align="center">Wort</h1><h1 align="right">Wort</h1>

mache, dann wird das Wort ja immer eine Zeile nach unten verschoben, aber ich möchte es ja in einer Zeile haben.

Kann mir jemand helfen? Danke schön

gruß Bochea

 

[seblon]

Versuchs mal so:

<h1><font style="position:relative; left:0px;">Wort</font><font style="position:relative; left:50%;">Wort</font><font style="position:relative; left:100%;">Wort</font></h1>

Eventuell musst du die Prozentzahlen noch anpassen. Aber vom Grundgedanken her sollte dir das helfen.

Und wenn jetzt jemand kommt von wegen: Das ist nicht konform soll er es besser machen ;)

Lg,
Seblon

 

[_Thor_]

OK

<h1><span class="left">Test</span><span class="center">Test</span><span class="right">Test</span></h1>

h1 span {
  width: 33%;
  display: inline-block;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

Für den IE6 müsste man wohl auf float: left zurück greifen, da er inline-block nicht kennt.

 

[Bochea]

danke für die antworten! jetzt klappt es !
schönen tag noch

gruß bochea

 

[neuroleptika]

Für den IE6 müsste man wohl auf float: left zurück greifen, da er inline-block nicht kennt.

Das stimmt so nicht ganz.
display: inline-block löst im IE auf inline-Elemente Layout aus.
Das ist dann quasi auch display: inline-block.

Dein Beispiel funktioniert also auch ab IE5.

danke für die antworten! jetzt klappt es !

Nicht im ff2.
ff kennt display: inline-block; erst seit Vers.3.

Außer für IE5-7 kannst du display:table verwenden. Für IE5-7 funktioniert _Thor_s Vorschlag:

#ueberschrift {
  width: 100%;
  display: table;
}

h1 {
  display: table-row;
}

  h1 span {
  width: 33%;
  display: table-cell;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}


/*IE5-6*/
* html h1 span {
  display: inline-block;
}
/*IE7*/
*:first-child+html h1 span {
  display: inline-block;
}

Anstelle von display: inline-block; würde auch zoom: 1; funktionieren (ab IE5.5). Es geht nur um haslayout.


Auch eine css-Tabelle sollte eine vollständige Tabellenstruktur haben.
Deshalb habe ich noch ein Element um _Thor_s html gezogen:

<div id="ueberschrift">
<h1><!--
--><span class="left">Test</span><!--
--><span class="center">Test</span><!--
--><span class="right">Test</span><!--
--></h1>
</div>

Ich weiß nicht was du genau vor hast.
Aber vermutlich ist float oder text-align : justify; die einfachere Variante für alle Browser.


ff2 und ie6 sind derzeit in vielen Statistiken die verbreitetsten Browser.