Hippie
Hallo,
ich hoffe ich finde hier eine(n) CSS Fachfrau/-Man.
Ich möchte einen Div-Container immer an der Fensterunterkante anzeigen lassen. Egal "wie lang" der Content der Seite ist.
Ich habe verschiedene Tips versucht, Z-index/position:absolute usw..
Das bringt mich aber leider nicht weiter.
Ausschnitt aus meiner css
Code angehängt. Klicke hier zum Ein-/Ausblenden
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
|
#login{
z-index:2;
width:970px;
height: 52px;
margin-left: 15px;
background-image:url(images/template/login_bg.jpg);
background-repeat:repeat-x;
position:absolute;
bottom:-2px;
} |
|
Wenn mir Jemand helfen könnt' fänd ich's großartig.
Grüße aus'm wilden Süden
PS: Ein Beispiel wie es fertig aussehen soll ist das neue Battlelog von BF3 - dort wo das Commcenter usw sind.
Kelli
Hast du einen Link auf die fertige Seite?
Hippie
Fertig bin ich noch net, aber Mal den Link damit Man besser verstehen kann was ich meine.
Link
Danke schon Mal
Kelli
Soll das login wirklich an der
Browser Fenster Unterkante sein?
Dann schieb es im html Baum
nach das wrapper div.
Dann zum testen:
#login{
width:100%;
height:50px;
background-color:#ff0000;
}
Hippie
Danke für die Antwort, aber das ist nicht das was ich wollte.
Der Loginbereich sollte stets sichtbar sein, d.h. immer an der Fensterunterkante - egal ob gescrollt wird oder nicht.
Ich dachte da an Battlelog - da ist das Commcenter auch immer an der unteren Kante.
Das sollte doch mit Hilfe von z-index realisierbar sein, den Content (eigentlich den ganzen "Wrapper") unter den Login zu legen. Also alles, was im "wrapper" ist = z-index: 1 und den Login = Z-index: 2 ?!?
Da werde ich mich Nochmal mit selfhtml schlau machen müssen...
Kelli
Code angehängt. Klicke hier zum Ein-/Ausblenden
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
|
<div id="wrapper">
<div id="header"></div>
<div id="header_2nd"></div>
<div id="content_main">
<div id="content_top">
<p>Willkommen auf www.gamers-retirement.com. Wir suchen noch Member (21+) für unseren Fun-Clan. </p>
<p>Fragen an: <a href="mailto:admin@gamers-retirement.com">admin@gamers-retirement.com</a> oder added mich im <a href="http://battlelog.battlefield.com/bf3/de/gate/?returnUrl=%7Cbf3%7Cde%7C" title="Battlefield 3 Battlelog" target="_new">Battlelog</a>, <a href="http://battlelog.battlefield.com/bf3/de/user/Hippiekill4/" title="Hippiekill4" target="_new">Hippiekill4</a>. </p>
</div>
<div id="content_l">Diese Seite befindet sich noch im Aufbau - schaut doch einfach später Nochmal rein ;)</div>
<p> </p>
<p> </p>
<div id="content_r"></div>
<div id="footer"></div>
</div>
<div id="login_fixed" style="background-color:#ff0000; width:100%; height:50px; position: fixed; left:10px; bottom:0px; vertical-align: middle;">Hallo Welt</div>
</div>
|
|
Das funktioniert aber nicht in IE (wie immer ... ) es gibt wohl wieder
einen Hack aber du willst es vielleicht doch in JS+CSS erledigen.
http://www.seabreezecomputers.com/tips/fixed-div.htm
Hippie
Ok, danke für den Denkanstoss....
IE9, FF 7.0.1, Google Chrome 15.0.874.106, Silverlight funtzen
Ich glaube, mit diesen Browsern habe ich 99% der zu erwartenden User bedient, Nochmal danke Kellerkind.
Mein css
Code angehängt. Klicke hier zum Ein-/Ausblenden
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
|
#login{
z-index:2; width:1000px;
height: 52px;
background-image:url(images/template/login_bg.png);
background-repeat:no-repeat;
position:fixed;
bottom:-12px;
padding-top: 10px;
margin-left:15px;
color:#ffffff;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
line-height:16px;
text-align:center;
vertical-align: middle;}
|
|
