✔ DIV per CSS zentrieren

Status
Nicht offen für weitere Antworten.
T

Tix

Erfahrenes Mitglied
Ich weiß es gibt dazu schon verschiedene Themen, aber keins konnte mir wirklich helfen.
Wie kann ich eine Seite die wie folgende aussieht

http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm

auf 1000 px Breite reduzieren, und das ganze dann noch zentrieren, hoffe es ist verständlich was ich damit meine.

normalerweise hätte ich mit Tabellen das ganze einfach eine Tabelle drumherum gesetzt, aber bei div geht das irgendwie nicht, oder hab ich da was falsch verstanden.

Danke schonmal für die Hilfe.

Tix
 
Du setzt noch ein weiteres div (mit fester Breite) um die anderen Elemente und zentrierst dieses.

Code: 
margin: 0 auto;
 
Zuletzt bearbeitet:
Hi,

pack das dreispaltige Layout in ein weiteres DIV mit der folgenden CSS-Regel:

Code: 
div#wrapper {
width: 1000px;
margin: 0 auto;
}
Code: 
<div id="wrapper">
    <!-- Hier folgt der Dreispalter -->
</div>
 
geile Sache, endlich funktioniert es.

Vielen vielen Dank, mal wieder ein guter Grund dieses Forum hier echt weiterzuempfehlen :D

Gruß, Tix
 
Ich schließe meine Frage mal hier gleich an.
Ich habe absolut positionierte Divs und möchte diese zentrieren. Geht dies? Und wie geht dies? Ich sehe Probleme wegen der Positionierungsart aber vielleicht könnt ihr mir sie ja nehmen :)
 
Hi,

bette die absolut positionierten DIVs in einem übergeordneten DIV wrapper ein und wende folgende Regel an, um es in der Fensterhorizontalen zentriert zu positionieren:

Code: 
div#wrapper {
position: relative;
left: 50%;
margin-left: -350px; /* negative Hälfte von width:700px */
width: 700px;
margin-top: 0;
}
 
Zwei Sachen habe ich nochmal:

1. So, jetzt hab ich nochmal eine Frage. Im FF/IE7 ist links ein kleiner Fehler auf meine Seite zu sehen.

Siehe anbeiliegende "fehler.jpg"

Die gesamte Seite kann mir hier sehen. http://www.bloemker.info

Hier der HTML Code

HTML: 
<body>
<div id="frame">
<div style="height:100%; width:29px; position:absolute; top:0px; background-image:url(images/background/last_links.gif); background-repeat:repeat-y;">&nbsp;</div>
<div style="height:100%; width:29px; position:absolute; top:0px; left:901px; background-image:url(images/background/last_rechts.gif); background-repeat:repeat-y;">&nbsp;</div>
<div style="height:42px; width:925px; position:absolute; bottom:0; background-image:url(images/background/footer.gif);">&nbsp;</div><div id="header"><a href=http://www.bullseye.to/><img src="http://www.tutorials.de/forum/images/background/header.gif" border="0" alt="Header" /></a><a href="funny.html"><img src="http://www.tutorials.de/forum/images/background/funny_checked.gif" border="0" alt="Funny" /></a><a href="shocker.html"><img src="http://www.tutorials.de/forum/images/background/shocker.gif" border="0" alt="Shocker" /></a><a href="sexy.html"><img src="http://www.tutorials.de/forum/images/background/sexy.gif" border="0" alt="Sexy" /></a><a href="other.html"><img src="http://www.tutorials.de/forum/images/background/other.gif" border="0" alt="Other" /></a></div><div id="bottomheader">&nbsp;</div><div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>*mist*<br><br><br><br><br><br></div></div>
</body>


und CSS natürlich auch

Code: 
/* CSS Document */

body    {
        background-color:#E9EEF4; margin:0px;
        }


div#frame {
        width:925px; margin:0 auto; position:relative;
        }


div#left {
        float: left; width: 160px; position:relative; top:86px;
        }


div#right {
        float: right; width: 140px; position:relative; top:86px;
        }


div#content {
        margin-left: 165px; margin-right: 140px; position:relative; top:86px;
        }


div#header {
        width:925px; position:absolute; top:0px; 
        }

div#bottomheader {
        position:relative; top:86px; width:925px; height:28px; background-image:url(images/background/header_bottom.gif);
        }

2. Im IE6 werden die unteren Ebenen gar nicht erst angezeigt. Woran liegt das?

Danke schonmal
 

Anhänge

  • fehler.jpg
    fehler.jpg
    50,4 KB · Aufrufe: 37
Zuletzt bearbeitet:
Hi,

durch die absoluten Positionierungen benötigt der IE6 für die beiden äußeren DIVs (Rahmen) eine fixe Höhenangabe anstelle von height:100%, um die Elemente nach unten auszudehnen und die Hintergrundgrafiken anzuzeigen.

Von daher empfehle ich dir, auf die absoluten Positionierungen der einzelnen DIVs zu verzichten und stattdessen nebeneinander liegende Elemente mit Hilfe der float-Eigenschaft horizontal auszurichten, sowie die "Rahmengrafiken" last_links.gif und last_rechts.gif in einer Hintergrundgrafik zu vereinen, um diese in einem übergeordneten Element senkrecht zu wiederholen.
 
Kannst du mir das ein bisschen näher erläutern, habe schon versucht es zu verstehen. Aber so ganz steige ich bei CSS noch nicht durch (zugegeben bei deinem Beitrag leider auch nicht) ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück