vertikale und horizontale ausrichtung von div ebenen

Jack9027 · Beitrag von **Jack9027** » 25.02.2005 16:29

hi,
wie kann ich eine div ebene ausrichten also nicht den text darin wie mit text-align oder vertical-align?

schonmal viele danke für eure hilfe

SkullCrusher · Beitrag von **SkullCrusher** » 25.02.2005 18:07

meinst du zentral ausrichten oder einfach nur vertikal/ horizontal!?

ich denk mal du meinst vertikal/ horizontal:

Code: Alles auswählen

top: 30%;
left: 30%;
....

oder so in der art!

Jack9027 · Beitrag von **Jack9027** » 25.02.2005 18:14

aso und wie schaff ich es dann das die div ebene vertikal und horizontal in der mitte ist

shwepsi · Beitrag von **shwepsi** » 25.02.2005 21:32

Jack9027 hat geschrieben:aso und wie schaff ich es dann das die div ebene vertikal und horizontal in der mitte ist

wenn dein div 20% breit ist, dann bleiben 80% übrig, die rechts und links verteilt sind 40%
left: 40%

bei der Höhe halt das gleiche

Jack9027 · Beitrag von **Jack9027** » 25.02.2005 22:45

die div ebene ist aber 800 px breit. was soll ich jetzt machen weil des is ja immer anders je nach der auflösung

Unsinn · Beitrag von **Unsinn** » 25.02.2005 22:52

CSS

Code: Alles auswählen

div.element 
{width:800px;
height:500px;
position:absolute;
left:50%;
margin-left:-400px; //zentrieren
top:50%;
margin-top:-250px; //zentrieren }

Jack9027 · Beitrag von **Jack9027** » 27.02.2005 15:51

ok danke ich hab aber noch eine frage nämlich:
ich hab 4 div ebenen:

Code: Alles auswählen

<body>
        <div id="pageFrame">
            <div id="header"><h1>Die Kulturtaschen</h1></div>
            <div id="menu">test<br />blup<br /></div>
            <div id="main">na<br />da<br />da<br />da<br />da</div>
        </div>
</body>

und dazu:

Code: Alles auswählen

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

#pageFrame
{
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
    width: 760px;
    margin:10px auto;
}

#header, #main, #menu {
    border: dashed 0px #000;
}

#header {
    border-bottom-width: 1px;
    text-align:center;	
}

#menu { 
    width: 100px;
    float: left;
    padding: 10px;
    text-align:center;
}

#main {
    border-left-width: 1px;
    width: 619px;
    padding: 10px;  
}

problem ist jetzt, dass egal was ich in #menu reinschreib die höhe von #menu ändert sich nicht also steht die schrifft dann im rahmen oder darunter, weil #menu einfach nicht größer wird. dazu kommt auch noch das der rand von #main einfach ganz nach links geschoben wird also ob in #menu nichts drinsteht. ich würd jetzt einfach mal vermuten das es an dem float liegt