• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIV Container über ganze Seite, über dem Text!

F

Flo2oo8

Neues Mitglied
Hi!
Ich brauche mal einen Tip von euch, wie ich es schaffe, ein Div Container über die komplette Seite zu legen, ohne dass der Content sich verschiebt.

Bisher schaut es so bei mir aus:

HTML: 
<html>
  <head>
    <title></title>
    <script src="script.js" type="text/javascript"></script>
    
    <style type="text/css">

    body
    {margin:0px;
    padding:0px;}
    
   #warnung
    {
    border-bottom:1px solid #716F64;
    visibility:hidden;
    position:absolute;
    }
    
   #info
   {display:block;
   background:#FFFFE1;
   color:#000;
    text-decoration:none;
    padding:99px;
    font-family:verdana;
    font-size:12px; 
    border-bottom:1px solid #ACA899;}
    

</style>
    
    
  </head>
  <body>

  
<div Id="warnung">
<a href="" onclick="schliessen()" id="info">box</a>
</div>

<p>eigentlicher content</p>

  </body>
</html>
Es soll ein Splash Screen werden, der den Besucher bittet, sich zu registrieren.
Die DIV Box wird per JS bei einem Klick geschlossen und ein Cookie gesetzt, sodass diese Meldung erst in einer Woche wieder erscheint.

Funktionieren tut es auch. Nur habe ich das Problem, dass sich der Div Container nicht über den Content legt, sonder der Content erst unter der Div Box anfängt.

Auch schaffe ich es nicht, dass der Div Container über den kompletten Schirm ist.

Freu mich auf Tip´s und Anregungen.

Und btw.. war lange nicht mehr hier, und das neue Desing ist ja mal der Oberhammer = )
 
Versuche es mal damit:
Code: 
div#warnung{

position: fixed; /* Positionierung an Viewport */
width: 100%; /* Volle Breite */
height: 100%; /* Volle Hoehe */
z-index: 100; /* Ueber andere Elementen legen */

}
 
Hi =)
Bevor du geantwortest hast, hab ich es schon hinbekommen.
Hab es so gelöst:

Code: 
#warnung
    {
    visibility:hidden;
    position:absolute;
    z-index: 9999;
    }
    
   #info
   {display:block;

   color:#000;
    text-decoration:none;
    padding:100%;
    font-family:verdana;
    font-size:12px; 
    position:fixed;
    z-index: 9999;}
Also bei

#warnung
z-index: 9999; hinzugefügt
und bei

#info
padding:100%; geändert

position:fixed; hinzugefügt
z-index: 9999;} hinzugefügt

So funktioniert es jetzt bei FF und IE.

Allerdings steh ich jez vor nem neuen Problem.

Bei Firefox ist der DIV Container überall drüber, der Hyperlink (div close) des gesamten Containers funktioniert,
allerdings funktioniert das im IE nur an freien Stellen, gehe ich mit der Maus auf ein Link im Content, wird dieser genommen, und nicht der des Containers, der eigentlich komplett drüber sein sollte.

Hoffe mir kann da jemand helfen..

Beste Grüße!
 
Indem du #warnung eine absolute Positionierung gibst und dem darin enthaltenden Link eine fixe, ist der Link eigentlich nicht mehr vom DIV umschlossen, sondern vom Viewport.
Versuche mal das position: fixed; bei #info wegzulassen und gib dafür #warnung ein position:fixed;.
 
position:fixed; hinzugefügt z-index: 9999;} hinzugefügtSo funktioniert es jetzt bei FF und IE.Allerdings steh ich jez vor nem neuen Problem.Bei Firefox ist der DIV Container überall drüber, der Hyperlink (div close) des gesamten Containers funktioniert,allerdings funktioniert das im IE nur an freien Stellen, gehe ich mit der Maus auf ein Link im Content, wird dieser genommen, und nicht der des Containers, der eigentlich komplett drüber sein sollte.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben