zentrieren funzt nicht in FF & Opera

papillona · 26 März 2008

Hello again,
habe zwar schon einige Freds hierzu gefunden, aber mit deren Lösungsvorschlägen hat es wohl immer im FF & Opera funktioniert. Bei mir funktionierts ominöserweise nur im IE7. So, hat jemand einen Tipp, wo mein Fehler steckt?

Hier die HTML-Datei:

Code:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>$WikiTitle | $Title</title>
  <link rel='stylesheet' href='$SkinDirUrl/uos.css' type='text/css' />
  <!--HeaderText-->
</head>
<body>
<!--PageHeaderFmt-->
<!--/PageHeaderFmt-->
<div class="content">
<div class="header">
   <div class="unilogo">
        <img src='$SkinDirUrl/logo.gif' alt="UniLogo" />
   </div>

   <div class="unibild">
        <img src='$SkinDirUrl/bild.jpg' alt="UniBild" />
   </div>

</div>

      <!--PageLeftFmt-->
      <div class="wikileft">
        <!--wiki:$Group.SideBar VISE.SideBar  -->
        <!--/PageLeftFmt-->
     </div>
      
      <div class="wikibody">
<!--PageTitleFmt-->
<!--PageText-->
      </div>
    
<!--PageFooterFmt-->
  <div id='wikifoot'>
    <div class='footnav'>
    $[Page last modified on $LastModified]
    - <a accesskey='c' href='$PageUrl?action=edit'>$[Edit Page]</a>
    - <a href='$PageUrl?action=diff'>Änderungen</a>
    </div>
  </div>
<!--/PageFooterFmt-->
</div>
</body>
</html>

Und hier der CSS-Code:

Code:

/*******************
 standard elements
******************/

* {
   margin:0;
    padding:0;
}

body { 
    
    font-family:"Verdana", "Lucida Sans", sans-serif ;
}



@media screen { 
    body { 
        position:absolute;
    } 
}

.pagetitle { 
    font-size:200%; 
    font-weight:bold; 
}

#wikilogo { 
    border-bottom:2px solid #cccccc; }


/****************
   head
****************/

.header {
    background:#FFFF99;
   -moz-border-radius:5px;
    border:1px solid #a0a0a0;
    margin:5px 5px 0px 5px;
}

.unilogo {
   background-image:url(logo.gif);
   background-repeat:no-repeat;
    float:left;
}

.unibild {
    background-image:url(bild.jpg);
   background-repeat:no-repeat;
    
}

/*#wikihead { 
  position:absolute; top:0px; right:0px; 
  font-size:smaller; text-align:right;
}
#wikihead input { font-size:smaller; }
#wikihead form { margin:10px; }*/

/**************
    sidebar
**************/

.wikileft { 
  width:200px; 
  padding:0px 10px 15px 10px;
  font-size:smaller; 
  background-color: #EEEEEE;
  float:left;
  -moz-border-radius:5px;
  border: 1px solid #909090;
  margin:5px;
}

/*************
 Oberkapitel
*************/

.wikileft h1 { 
  margin:15px 0px -6px 0px; 
  background-color:#FFFF99; 
  border: 1px solid #FFCC00;
  -moz-border-radius:5px;
  -khtml-border-radius:5px;
  font-size:12px; 
  text-align:left;
  padding:4px 10px 4px 10px;
}

.wikileft hr { color:#cccc3c; }

/*************
 Unterkapitel
*************/

.wikileft ul { 
    margin:5px 0px 0px 0px;
    padding:0px 5px 0px 8px;
    list-style-type:none;
    -moz-border-radius:5px;
    border: 1px solid #FFCC00;
}

.wikileft li { 
    margin:5px 0px 5px 0px;
}

.wikileft li .selflink {
    font-weight:bold;
   list-style-type:circle;
    color:#000080;
}

.wikileft a {
    text-decoration:none; 
    color:#000000; 
}

.wikileft a:hover {
    color:#FFCC00;
}

.wikileft p {
    margin:5px;
}

/****************
  Body allgemein
****************/

.content {
    width:880px;
    margin:0px auto;
     -moz-border-radius:5px;
     border:2px solid #a0a0a0;
 }

.wikibody { 
    position:relative;
    padding-bottom:1em; 
    padding-top:0.5em;
   margin-left:200px;    
   padding-left:10px;
}


#wikititle { padding-left:10px; vertical-align:top; }

/***************
     wikitext
**************/

#wikitext { 
    padding-left:30px;
   padding-right:10px;    
    margin-top:0.5em; 
    color:#000000; 
    font-size:90%;
}

#wikitext a:visited {
    color:#000080;
}

#wikitext a:hover {
    color:#FFCC00;
}

#wikitext h1 { 
    font-size:160%; 
    color:#000080;
    padding-bottom:10px;
}

#wikitext h1 a {
    text-decoration:none;
}

#wikitext h2 { 
    font-size:140%; 
    color:#000080;
}

#wikitext h3 { 
    font-size:120%; 
    color:#000080;
}
#wikitext h4 { 
    font-size:100%; 
    font-weight: bold; 
    color:#000080;
}

#wikitext ul {
    padding-left:15px;
}

#wikitext p {
    padding-right:10px;
}

#wikitext form textarea{
    -moz-border-radius:5px;
    margin-bottom:5px;
}

#wikitext form {
    margin-top:10px;
}

Ich habe es mit text-align:center probiert, aber da wird ja nur der Text zentriert dargestellt. Mit margin-left:auto und margin-right:auto ergibt das selbe wie mit margin:0px auto. Wird die margin-Anweisung irgendwie "überschrieben" durch Sub-Divs, die ihre "eigene" margin-Anweisung bekommen?? Ich hatte die Anweisungen auch erst für body gemacht, aber das hat auch nicht geholfen. Nun habe ich ein extra div erstellt namens "content", das alle anderen divs beinhaltet, und das nun die margin-Anweisung erhält. Aber das hilft alles nicht... *verzweifel*
Ziel des ganzen soll eine horizontale automatische Zentrierung der Website sein.

Ich danke schon mal für Tipps.

LG Papillona

koslowski · 26 März 2008

Hi,

wenn <body> position:absolute hat kann sich .content nicht mehr daran orientieren um sich zu zentrieren.
Absolute Elemente werden von den anderen nicht mehr wahrgenommen.

Schmeiss doch einfach mal das absolute für body raus.

koslowski

papillona · 26 März 2008

Nun was soll ich sagen????

;Jump;Jump;Jump

Das hat funktioniert. Ich wusste nicht, was dieses

Code:

@media screen {
   body {
   }
}

soll. Und habe es immer ignoriert. Hehe, na ist ja toll, dass es jetzt geht. Herzlichen Dank, lieber koslowski.

LG Papillona

zentrieren funzt nicht in FF & Opera

papillona

Neues Mitglied

koslowski

Neues Mitglied

papillona

Neues Mitglied

Neueste Beiträge