zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Absolute Position

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.03.2013, 22:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.03.2013, 23:05
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.03.2013, 23:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #4 (permalink)  
Alt 01.04.2013, 00:13
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von GELight Beitrag anzeigen
Position fixed fixiert ein Element leider absolut zum Browser
Wenn du Browser mit Viewport gleichsetzt hast du sicherlich recht, ist nu mal so.

Zitat:
und nicht zu meinem Window. Zumal mein Window ja auch draggable ist und somit keine feste Position in der Seite hat.
Was ist ein Window in deinem Sprachverständnis. Ein solches HTML-Element gibt es nicht. Ich geh jetzt mal davon aus dass du ein Div meint.

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.04.2013, 00:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #6 (permalink)  
Alt 01.04.2013, 00:50
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 01.04.2013, 00:55
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard Position

Genau das ...
Mit Zitat antworten
  #8 (permalink)  
Alt 01.04.2013, 00:56
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Prima, dann lass mal Code sehen, HTML und CSS für so ein Fenster.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #9 (permalink)  
Alt 01.04.2013, 01:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.03.2007
Beiträge: 17
GELight befindet sich auf einem aufstrebenden Ast
Standard Position

Die Struktur meines Fensters sieht ohne viele Inhalte so aus:
PHP-Code:
<div class="window" style="top: 35px; left: 208px; width: 514px; z-index: 100013;">
    <
div class="window-title">...</div>
    <
div class="window-content" style="height: 302px; position: relative;">
        ...
        ...
        <
div class="bar" style="position: absolute; bottom: 0px; width: 100%; z-index: 1;">
            ...
        </
div>
        ...
        ...
    </
div>
</
div
Die wichtigsten CSS Eigenschaften habe in im Beispiel direkt in den styles abgebildet. Noch eine Idee, wie ich die Bar unten fixiert bekomme?

Gruß Mario
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 01.04.2013, 02:32
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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>
  
In das Feld kannste reinschreiben, wenn es zu viel Text ist kommt der Scrollbalken.
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:54 Uhr.