Zur Navigation

CSS: Element rechts von zentriertem Element positionieren

1 Gast (Gast)

Hallo zusammen,

im Moment habe ich folgende Situation (vereinfacht):

CSS:
body {
text-align:center;
width:100%;
height:100%;
}
h2, p {
display:inline;
}

HTML:
<body>
<h2>ÜBERSCHRIFT</h2>&nbsp;<p id="notice">kurzer Text</p>
</body>

Ich möchte nun erreichen, dass die Überschrift genau in der Mitte ist und notice rechts daneben. Also dass die Überschrift sich so verhält, als wäre notice garnicht da (dann würde "Überschrift" durch text-align:center ja genau in die Mitte rücken). notice soll einfach daneben erscheinen, so als ob man die Seite ausdruckt und dann den Text neben die Überschrift schreibt (Überschrift bleibt da wo sie vorher war).

Leider bin ich bis jetzt trotz Experimentieren mit allen möglichen CSS-Eigenschaften nicht zum Ziel gekommen, und bezweifle mittlerweile ob mein Vorhaben überhaupt möglich ist.

Vielleicht hat ja hier jemand eine Idee, wie man das realisieren könnte :)

18.01.2013 15:04

2 Jörg Kruse

Vielleicht so in der Art:

h2 {
display:inline-block;
}
p {
display:inline-block;
position:absolute;
}

18.01.2013 16:01

3 Gast (Gast)

Hallo Jörg,

so funktioniert es schon fast :)

allerdings steht notice jetzt nicht mehr ganz auf der "Zeile" der Überschrift, sondern "klebt" auf Höhe des oberen Randes der Überschrift.
Gibt es da eine andere Möglichkeit, außer mit margin-top, notice wieder auf die gleiche Höhe zu bringen?

18.01.2013 17:00

4 Jörg Kruse

Mit line-height und vertical-align wird es glaube ich nicht gehen, nachdem man p#notice mit postion:absolute aus dem Kontext gerissen hat. Ich würde hier auch einfach margin-top oder padding-top verwenden.

18.01.2013 17:15

Zum Schreiben einloggen

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]