Zum Inhalt springen

Komplette Seite zentrieren

Erstellt am 23. Juli 2005 · 3 Antworten · letzte Antwort am 15. Mai 2006

Tags: HTML & CSS, Frage

jjakob ·

Ich werde bald wahnsinnig! Ich möchte lediglich meinen kpl. Inhalt zentriert dargestellt haben. Hierzu habe ich einen eigenen <div> Container um meine Elemente gelegt und diesem den Wert VHalign: t,c; zugewiesen. Habe alles mögliche ausprobiert. Hier der Link:
http://p212.typo3workshop.net/index.php?id=10&L=0
Hier das HTML File:

<!-- ###DOCUMENT_HEADER### -->


<!-- ###DOCUMENT_HEADER### -->


<!-- ###DOCUMENT_BODY### -->

<div id="inhalt">inhalt
          <div id="content">Platzhalter für den Contentbereich</div>
                   <div id="box-top-header">
        <div id="tmenu-horizontal">menu oben</div>
</div>
         <div id="language">Sprachmenü</div>
                     <div id="links">
            <div id="box-menu-left">
         <div id="tmenu-vertical">Vertikales Menue</div>
                     </div>
          </div>
</div>




<!-- ###DOCUMENT_BODY### -->

Hier die CSS:body,html {
   color: #000000;   
   background: #0E1E3A;
   height: 100%;
   width: 100%;
   margin:  0 ;
   text-align: left;
   font: 1em arial, helvetica, sans-serif;
}

#inhalt { 
    VHalign: t,c;
    text-align: left;
    height: 100%;
    width: 1200px;

}

#content {
    position: absolute;
    top: 150px;
    left: 100px;  
    width: 864px;
}

#box-menu-left {
  font: bold 16px verdana;   
  margin: 180px 0 0 0;   
}

#box-top-header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 150px;
    background: url(../img/oben.jpg) no-repeat;
    z-index: 10;

}

#language {
   position: absolute;
   top: 145px;
   left: 800px;
}

#links {
   position:absolute;
   top: 0px;
   left: 0px;
   width: 180px;
   height: 100%;
   padding: 0px 10px 0 10px;
   background: url(../img/links.jpg) no-repeat;
   z-index: 5;
}


#tmenu-horizontal {
   position: absolute;
   top: 100px;
   left: 600px;
   color: #fff;
   font: bold 12px verdana;

}

.horizontal-menu-0-NO a:link,
.horizontal-menu-0-NO a:visited,
.horizontal-menu-0-CUR a:visited,
.horizontal-menu-0-ACT a:link,
.horizontal-menu-0-ACT a:visited,
.horizontal-menu-0-ACT a:active {
   text-decoration: none;
   padding: 0px 20px 0px 0;
   color: #fff;
}






.horizontal-menu-0-CUR a:link,
.horizontal-menu-0-CUR a:visited,
.horizontal-menu-0-CUR a:hover,
.horizontal-menu-0-CUR a:active,
.horizontal-menu-0-NO a:hover,
.horizontal-menu-0-ACT a:link,
.horizontal-menu-0-ACT a:visited,
.horizontal-menu-0-ACT a:hover{
   text-decoration: underline;
   padding: 0px 20px 0px 0;
   color: #66FFCC; 

}
#adminpanel {
    position: absolute;
    bottom: 50px;
    z-index: 10;
}

Vielen Dank für die Hilfe schon im Voraus!

toyde ·

Hallo.
Falsches Forum ;P
Schau mal unter http://de.selfhtml.org und in CSS HowTo's nach. Dein Problem hat schliesslich nichts mit Typo3 zu tun, sondern mit Formatierung und HTML-Code.

Ein Blick in dein Frontend-Quellcode verrät übrigens auch, dass Contents gegebenenfalls mit <p>-Tags oder ähnlichem versehen werden, die dir evtl. einen Strich durch die Rechnung machen.

edit:
übrigens, sowas seh ich zum ersten mal:

VHalign: t,c;

versuch mal den div-Tags direkt "align" zuzuweisen.

beginner ·

Hallo,
versuch es doch mal mit folgendem "Trick" im style-sheet:

#inhalt
{
position:absolute;
top:50%;
margin-top:- halbe Höhe;
left:50%;
margin-left:- halbe Breite;
width:Breite;
height:Höhe;
padding:0;
}

Viel Erfolg!

miwolfram ·
toyde schrieb

übrigens, sowas seh ich zum ersten mal:

VHalign: t,c;

Ist das nicht eine Anweisung für ein GMENU - kommt mir auf jeden Fall bekannt vor?

Aber auf gar keinen Fall ist das eine CSS Anweisung.

Zur Sache: Der Tipp von beginner funktioniert - probieres damit.
Nur wirst du Probleme mit deinen Menus bekommen - soweit ich das sehe sind die ja absolut positioniert und liegen in unterschiedlichen z-indexes.