Rechtspositionierung eines Menüs

[cssx]

Hi!

Ich habe ein virtuelles Fenster wo ich in der Titelleiste ein "Systemmenü" einrichten.
Wie kann man das so positionieren das es am rechte Rand der Titellesite positioniert ist.

lg cssx

[Steel]

Nabend!

Ich habe ein virtuelles Fenster wo ich in der Titelleiste ein "Systemmenü" einrichten.
Wie kann man das so positionieren das es am rechte Rand der Titellesite positioniert ist.

Da ich nicht weiss, was Du genau unter virtuellem Fesnter verstehst, leg ich Dir mal nahe, dich mit absoluter Positionierung (right) vertraut zu machen. Eventuell geht's aber schon mit einem float.

Ein Beispiel waere schoen gewesen.

[cssx]

Hallo!

Da ich nicht weiss, was Du genau unter virtuellem Fesnter verstehst, leg ich Dir mal nahe, dich mit absoluter Positionierung (right) vertraut zu machen. Eventuell geht's aber schon mit einem float.

Ein Beispiel waere schoen gewesen.

Ein Beispliel für ein virtuelles Fenster:

------------------------------------
| Fenstertitel                   |X|
------------------------------------
|  Inhalt des                      |
|  Fensters                        |
------------------------------------

window mit border: 1px solid [color]

Rechts oben das "x" ist das Systemmenü welches rechts ausgerichtet sein sollte.
Absolute Positionirung ist nicht das Richtige.
Grund: ich habe meherere virtuelle Fenster auf der Seite und jeweils CSS-Klassen für
-Titelbox
-Fensterinhalt
-gesamtes Fenster.
Das Ganze funktioniert auch. Nun möchte ich auch eine Klasse sysmenu fürs "Systemmenü" schreiben.
Hinzu kommt das nicht jedes "Systemmenü" die gleichen Anzahl von Symbolen besitzt.

lg cssx

[ChrisB]

Hi,

Ein Beispliel für ein virtuelles Fenster:

Also schlicht ein paar positionierte Elemente.

Rechts oben das "x" ist das Systemmenü welches rechts ausgerichtet sein sollte.

Schoen, dann mach das doch.

Absolute Positionirung ist nicht das Richtige.
Grund: ich habe meherere virtuelle Fenster auf der Seite und jeweils CSS-Klassen für [...]

Deine Begruendung ist keine.
Informiere dich, worauf sich absolute Positionierung bezieht.

MfG ChrisB

[cssx]

Hallo!

Informiere dich, worauf sich absolute Positionierung bezieht.

Hab http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=hier nachgelesen und dadurch Lösung:

HTML:

<div style="margin-top:10px" class="windowbox">  
  <h2 class="titelbox" style=""><span class="titeltext">Film</span><div class="sysmenu"><button>X</button></div></h2>  
  <div class="windowcontent">Inhalt des Fensters</div>  
</div>

CSS:

.windowbox  
{  
 border:1px solid #ccf;  
 width:330px;  
}  
  
.titelbox  
{  
 background-color:ccf;  
 font-family:Helvetica;  
 font-size:0.8em;  
 margin:0;  
 height:1.5em;  
}  
  
.titelbox  
{  
 position:relative;  
}  
  
.titelbox .sysmenu  
{  
 position:absolute;  
 top:0;  
 right:0px;  
}  
  
.sysmenu button  
{  
 border:1px solid #eef;  
 font-size:0.8em;  
 font-weight:bold;  
 background:#ddf;  
 width:28px;  
}

lg cssx

[Steel]

Hi,

Ein Beispliel für ein virtuelles Fenster:

---

| Fenstertitel                   |X|

|  Inhalt des                      |

Fensters

Was mich interessiert haette, waere, wie du Das realisiert hast. Wie es aussieht kann man sich ja denken.

Rechts oben das "x" ist das Systemmenü welches rechts ausgerichtet sein sollte.

Aha! Das war z.B. total unklar. Ein Schliessen Button faellt bei mir nicht unter den Begriff Systemmenue.

Absolute Positionirung ist nicht das Richtige.
Grund: ich habe meherere virtuelle Fenster auf der Seite und jeweils CSS-Klassen für
-Titelbox
-Fensterinhalt
-gesamtes Fenster.
Das Ganze funktioniert auch. Nun möchte ich auch eine Klasse sysmenu fürs "Systemmenü" schreiben.
Hinzu kommt das nicht jedes "Systemmenü" die gleichen Anzahl von Symbolen besitzt.

Gruende gegen absolute Positionierung sehe ich grad aber keine...

Ich geh mal davon aus, ein Fenster sieht ungefaehr so aus:

<div>
 <div>Titelbox</div>
 <div>Inhalt und so</div>
</div>

Was spricht nun gegen:

<div>Titelbox<div>Systemmenu</div></div>

mit einem gefloateten oder absolut positioiniertem 'Systemmenue'?

Die Divs darfst du gern als Veranschaulichungsobjekt zur Beispielerlaeuterung betrachten. Ich wuerde andere Elemente waehlen. Dein Menue koennte z.B. eine prima Liste abgeben und die 'Titelbox' schreit quasi nach ner Ueberschrift.

[cssx]

Hallo!

Was mich interessiert haette, waere, wie du Das realisiert hast.

So:

  
<div class="windowbox">  
     <h2><span class="titeltext">Fenstertitel</span><span class="sysmenue">X</span></h2>  
     <div class="windowcontent">Fensterinhalt</div>  
</div>  

Ich hab zwar schon was zusammengeschrieben aber jetzt siehts so aus:

----------------------
| Titel              |
--------------Sysmenu-
Da war das Menü in der Falschen Reihe.

Uns so:
----------------------
| Sysmenu      Titel |
----------------------
Für die Darstellung müsste ich die Titelbox und das Systemmenü umtauschen also  <h2><span class="sysmenue">X</span><span class="titeltext">Fenstertitel</span></h2> schreiben.
Wäre das OK?

lg cssx

[Steel]

Hi!

Für die Darstellung müsste ich die Titelbox und das Systemmenü umtauschen also  <h2><span class="sysmenue">X</span><span class="titeltext">Fenstertitel</span></h2> schreiben.
Wäre das OK?

Sicher das. Aber ich würde es trotzdem anders machen. (absolut positionieren)

Wenn ich z.b. meine Fenster grad anschaue ist der Titel zentriert allerding in seiner eigenen Box mit einem eigenem (grau-dunkelgrau) diagonalem Verlauf. Davor haben wir das Logo (Ordnergrafik, oder Browserlog) und dahinter das, was Du als Systemmenü bezeichnest. Beides in dem Verlauf, der z.b. meine Startleiste ziert (links am Fenster Blau, rechts dunkelblau) Das würde ich vielleicht so erreichen:
<div mit standardhintergrund><img Logo><h> Titel mit eigenem Hintergrund</h><ul> Systemmenü</ul></div>

Das 'Systemmenü' wird rechts absolut positioniert. Das extra div nur damit man fuer den Text einen extra Hintergrund einbauen kann. Das ginge aber auch, wenn man das div mit dem h ersetzt und aus dem h ein span macht.

Für Deinen Fall sähe das dann so aus:

<div class="windowbox">  
     <h2><span class="titeltext">Fenstertitel</span><ul class="sysmenue"><li>X</li></ul></h2>  
     <div class="windowcontent">Fensterinhalt</div>  
</div>

.sysmenue  
{  
 position:absolute;  
 right:0px;  
}

Die Liste benutze ich, falls es mal mehr Buttons werden sollten. Wenn das nicht der Fall ist, reicht ein anklickbares Element.

Weil 'Systemmenü' nun aus dem Elementfluss ist, bekommt 'titeltext' noch ausreichend rechtes padding, damit ein längerer Titel nicht hinter 'Systemmenü' verschwindet.

Fertig ist die Titelleiste. (für beliebig viele Fenster)