Sliding Doors - rechtsbündig

[the0dor]

Hallo, Leute!

Versuche mich gerade mal an den "Sliding Doors"...
Schaut mal unter Kontaktseite von Jost Butzko,
da könnt Ihr rechts oben den Titel sehen.
Nun will ich genau da eine Art flexiblen Tab einbauen, hab ich auch probiert,
sieht bei mir dann so aus:
Kontaktseite von Jost Butzko
Die Anleitungen, die ich bisher gesehen habe, arbeiten nicht mit diesem rechtsbündigen Prinzip, wie krieg ich das jetzt gebacken, geht das überhaupt?
Für Tipps wie immer dankbar,
the0dor.
P.S.: Klar könnt ich den Titel einfach in ne Grafikdatei einbauen, ich hätte aber gerne erstens das Prinzip kapiert, und zweitens würde ich gerne den Text so im Markup lassen

 

[Tar]

Du kriegst die Schrift nach rechts, in dem du einfach text-align:right; einhängst. Zusammen mit ner Prise margin-top:0px; und padding-top:30px; könnte es dann schon fast so aussehen :)

 

[the0dor]

Hallo, Tar-Minyatur!
Aber mit text-align:right krieg ich ja wahrscheinlich die Positionierung der beiden Hintergrundbilder nicht hin, oder?
Hab aber mal noch einen Versuch gestartet, sieht jetzt so aus:
Sliding Doors rechtsbündig
Funktioniert leider im IE6 nicht, wenn ich den Schriftgrad ändere, aber das ist ja eigentlich der Gag von den Sl.Doors:roll:
Vielleicht versucht sich ja mal jemand daran?
Gruß, the0dor

 

[neuroleptika]

Für dieses Beispiel braucht man keine sliding doors. Eine geammte Grafik tut es auch.

Wenn mann das background-image einem Inlinelement gibt, kann man text-align: right; verwenden und braucht keine Breitenangaben.
html

<h1>
<span>Kontaktseite von Jost Butzko</span>
</h1>

css

* {
    margin: 0;
    padding: 0;
  }


body {
    background-color: #116FAE;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }


h1 {
    text-align: right;
    font-size: 110%;
    background-color: #DADADA;
    padding-top: 60px;
    border-bottom: 1px solid #fff;
  }


h1  span {
    background-image : url(Grafiken/bgkopf.gif);
    background-repeat : no-repeat;
    color : #6AA3AE;
    font-size : 100%;
    font-style : italic;
    padding: 7px 8px 0 15px;
  }

<h1> nimmt als Blockelement die volle Breite des Elternelementes (body) ein.
<span> ist ein Inlineelement und nur so breit wie der Inhalt.

Sliding door bräuchte man wenn die rechte Ecke ebenfalls rund sein soll.
ohne sliding door

 

[the0dor]

SuperKlasse!

Tolle Infos, vielen Dank für die Mühe;Jump!
Aber irgendwie auch schade, ich dachte, ich wäre kurz davor, eine ganz harte Nuss zu knacken...;-)
Gruß

 

[Tar]

Nicht immer gleich so kompliziert denken. Simplicity rulez!