|
|||
Absolute Position
Hi alle zusammen,
Ich habe ein kleines Problem bei einer Positionierung eines Containers. Ich möchte eine Icon-Bar innerhalb meines Window gern unten ausrichten lassen... und zwar ohne, dass sich die Icon-Bar mit verschiebt, wenn man den Window-Content scrollen muss. Vielleicht habt Ihr eine Idee. Die Struktur sieht z.B. so aus. <div> <div class="title">Window</div> <div class="content"> <div class="icon-bar">...</div> <div class="panel">...</div> <div class="panel">...</div> <div class="panel">...</div> </div> </div> Wenn ich die icon-bar auf "position: absolute; bottom: 0; width: 100%;" stelle, dann wird die Bar auch korrekt im Window unten positioniert. Problem ist nur, dass sobald ich den Content Bereich scrollen muss, dann verschiebt sich die Bar leider mit dem scrollen mit nach oben. Habt ihr eine Idee, wie ich die Bar "innerhalb" des Window Content FIX ausrichten kann? Gruß Mario |
Sponsored Links |
|
|||
mit position:fixed vielleicht?
siehe hier position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
Position
Hi explanator,
Position fixed fixiert ein Element leider absolut zum Browser und nicht zu meinem Window. Zumal mein Window ja auch draggable ist und somit keine feste Position in der Seite hat. Gruß Mario |
|
|||
Wenn du Browser mit Viewport gleichsetzt hast du sicherlich recht, ist nu mal so.
Zitat:
Hast du eine Seite wo man sich das Problem mal anschauen kann.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Position
Ich habe am Viewport soweit eigentlich keinerlei Einstellungen verändert.
Zum Verständnis.... ja ich habe mir natürlich aus DIV Containern ein Window erstellt. Hier als Beispiel mal ein Bild vom extJS Framework, damit es klarer wird, was ich mit "Window" meine, da meine Komponente noch nicht ganz fertig ist. http://www.danvega.org/blog/images//windowgroups.gif Ich wollte "wenn möglich" die Ausrichtung meiner Elemente über CSS steuern und nur wenn wirklich nötig, die Positionen richtig berechnen lassen. Gruß Mario |
|
|||
Ich glaube ich habe es so einigermassen verstanden was du vorhast.
Du baust dir die windows fenstertechnik nach mit Divs und willst einen scrollbereich haben und unten eine Werkzeugleiste immer fixiert, egal wie gross das Fenster(Div) ist. Habe ich das so richtig verstanden_
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Position
Die Struktur meines Fensters sieht ohne viele Inhalte so aus:
PHP-Code:
Gruß Mario |
Sponsored Links |
|
|||
Meinst du das in etwa so:
HTML-Code:
<!DOCTYPE html> <html> <head> <title>echt oder fake</title> <style> div.window { position:relative; height:300px; width:300px; border:1px solid #96AECD; background: linear-gradient(to bottom, #f0f9ff 0%,#dfeaf7 13%,#dfeaf7 100%); padding: 22px 5px 30px 5px; } div.header-bar { position:absolute;top:0px;left:0px; font:bold 12px/18px arial, sans-serif; padding:2px 5px; } button{ position:absolute; top:2px; right:2px; font:bold 12px arial, sans-serif; padding:0; height:18px; width:18px; background-color:rgb(210, 0, 0); color: white; } div.toolbar{ position:absolute;bottom:2px;left:5px; font:bold 12px/18px arial, sans-serif; padding:2px 5px; height:18px; width:auto; Background-color:lightgrey; border: 1px solid grey; } div.inner { height:100%; width:100%; border:1px solid #96AECD; background-color:white; overflow:auto; } </style> <head> <body> <div id="window1" class="window"> <div class="header-bar">Window1 </div> <button id="closew1" type="button" value="close" onclick="alert('OH NOOO!');">X</button> <div class="inner" contenteditable> bla </div> <div class="toolbar">malen | schreiben | [1] [+] </div> </div> </body> </html> Verlaufsfarbe ist jetzt nur im FF sichtbar oder Browser die das schon können. Schliessenbutton ohne grosse Funktion. Werkzeugleiste ist unten angedeutet. Den Rest denke ich, kannste ja mit Javascript umsetzen.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div-höhe? - Hauptcontainer über ganze Seite will nicht... | AndMei | CSS | 5 | 13.12.2010 15:43 |
Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 15:30 |
CSS Layout Probleme | MichaelJason | CSS | 3 | 19.09.2008 13:40 |
Overeffect soll im SubMenü statisch bleiben | omex | CSS | 4 | 11.05.2008 19:49 |
prblemme mit mein inhalt div | carlos587261 | CSS | 3 | 23.04.2008 15:07 |