mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Di 23.04.2024 13:38 Benutzername: Passwort: Auto-Login

Thema: CSS und zentrierung von z-index vom 02.02.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS und zentrierung von z-index
Autor Nachricht
peter_lang
Threadersteller

Dabei seit: 07.12.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.02.2007 00:21
Titel

CSS und zentrierung von z-index

 Antworten mit Zitat Zum Seitenanfang
Hallo,

irgendwie will es nicht so ganz klappen .. ich habe einen container und um den container soll ein Schatten lauslaufen, der al grafik geladen wird. Problem ist, das alles imm linksbündig ist .. obwohl mittig deklarierert.


Code:

body {
   background-color: #F4F4E7;
   margin: auto;
   min-height: 100%;
   height: 100%;
   width: 100%;
}

#shadow {
   position:absolute;
   z-index:1;
   width:888px;
   height:664px;
   background-image: url("images/bg_schatten.png");
   background-repeat: no-repeat;
   margin: 0px auto;
      
   }   

#container {
   position:absolute;
   z-index:2;   
   margin-left: auto;
   margin-right: auto;
   width: 827px;
   height: 600px;
   background-color: #ff9900;

   margin: 0px auto;
   
   }



und der html code

Code:

<div id="shadow"> </div>
<div id="container">

  zhj ghjghj
 
</div>



... vielleicht sieht einer was ich nicht sehen .. danke im voraus
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Fr 02.02.2007 09:42
Titel

Re: CSS und zentrierung von z-index

 Antworten mit Zitat Zum Seitenanfang
Code:

* {
   margin: 0;
   padding: 0;
   text-align: left;
   }
html {
   height: 100%;
   }
body {
   background-color: #F4F4E7;
   margin: auto auto;
   text-align: center; /* zentrieren für IE */
   }
#shadow {
   width:888px;
   height:664px;
   background-image: url("images/bg_schatten.png");
   background-repeat: no-repeat;
   }   
#container {
   margin: 30px 0 0 32px;
   width: 827px;
   height: 600px;
   background-color: #ff9900;
   }


Code:

<div id="shadow">
   <div id="container">
    
   </div>
</div>


Zuletzt bearbeitet von sahnemuh am Fr 02.02.2007 09:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
peter_lang
Threadersteller

Dabei seit: 07.12.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.02.2007 11:04
Titel

Antworten mit Zitat Zum Seitenanfang
Danke erstmal für die Antwort aber er legt mir den container unter den Hintergrund. Mein Fehler, hatte mich nicht klar ausgedrückt, es sind 2 Ebenen und die eine soll unter die andere gelegt werden ... und das ganze eben zentriert. Denn wenn ich z-index einsetze und position:absolute einbaue, dann ist alles linksbündig am Rand .. kriege das nicht mittig
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Fr 02.02.2007 12:02
Titel

Antworten mit Zitat Zum Seitenanfang
ich verstehe dein problem nicht..
eigentlich sollte der container mit meiner lösung über dem schatten liegen.
poste doch bitte mal eine beispielseite irgendwo, wo ich mir das ganze "live" ansehen kann.

wenn du es unbedingt mit absoluter positionierung und z-index lösen willst, machs so:

Code:

#shadow {
      position:absolute;
      z-index:1;
      width:888px;
      height:664px;
     background-image: url("images/bg_schatten.png");
      background-repeat: no-repeat;
      left: 50%;
      top: 50%;
      margin-left: -444x;
      margin-top: -332px;   
   }   

#container {
     position:absolute;
    z-index:2;   
     width: 827px;
     height: 600px;
      background-color: #ff9900;
      left: 50%;
      top: 50%;
      margin-left: -413px;
      margin-top: -300px;   
   }


allerdings schiebt es dir die seite dann bei zu kleinen auflösungen nach links oben aus dem viewport.

Zuletzt bearbeitet von sahnemuh am Fr 02.02.2007 12:04, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
peter_lang
Threadersteller

Dabei seit: 07.12.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.02.2007 12:10
Titel

Antworten mit Zitat Zum Seitenanfang
hi, also so recht will er net .. schau mal hier

http://www.xeovision.de/111/index.html
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Fr 02.02.2007 17:00
Titel

Antworten mit Zitat Zum Seitenanfang
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
   <head>
      <title>Familienservice</title>
   
    
      
      <style type="text/css">
      * {
         margin: 0;
         padding: 0;
         text-align: left;
         }
      html {
         height: 100%;
         }
      body {
         background-color: #F4F4E7;
         text-align: center; /* zentrieren für IE */
         }
      #shadow {
         margin: auto auto;
         width:888px;
         height:664px;
         background: url(images/bg_schatten.png) no-repeat;
         }   
      #container {
         position: relative;
         top: 30px;
         left: 32px;
         width: 827px;
         height: 600px;
         background-color: #ff9900;
         }
      
      </style>
   </head>
   <body> 

      <div id="shadow">
         <div id="container">
         
           zhj ghjghj
          
         </div>
      </div>
   </body>
</html>
  View user's profile Private Nachricht senden
peter_lang
Threadersteller

Dabei seit: 07.12.2005
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 02.02.2007 21:49
Titel

Antworten mit Zitat Zum Seitenanfang
argh .. ich oberdepp .. ich seh, das ich den schatten div vor dem container schloss .. aber nun funzt es .. vielen Dank.
  View user's profile Private Nachricht senden
 
Ähnliche Themen DIV Sichtbarkeit / Zentrierung
(BARRIEREFREIHEIT) SWF zentrierung in HTML
(CSS) Zentrierung eines Klappmenus
XHTML und CSS, Zentrierung und Positionierung?
zentrierung per CSS: inhalt verschwindet links
Problem: css, zentrierung kompletter Webseite
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB