CSS Positionierung / Center

[Lilith681]

Hallo Leute,

ich habe ein Problem bei meiner CSS und ich hoffe ihr könnt mir dabei helfen.

Folgendes, ich habe das Design zuerst in Photophop erstellt, geslict und dann im DW die CSS erstellt so wie ich die Bilder vom PS habe. War zwar ein bißchen langwierig, aber ging.
Nun kam folgendes noch dazu das ich die Seite mittig ausrichten will. Da es ja auch Leute mit kleinen und großen Bildschirmen gibt.

Und da liegt mein Problem, da ich ja in der CSS den einzelnen Teilen eine absolute Position gegeben habe.... sonst fliegt mir mein Layout auseinander. Ich kann zwar ein bißchen CSS aber nicht so gut das ich das jetzt hinkriege.

Hier ist mal der Code der CSS:

.text {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-style: normal;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 25px;
}
.text1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-align: center;
}
#links {
    height: 868px;
    width: 30px;
    top: 0px;
    background-image: url(images/lineli1.jpg);
    left: 212px;
    position: absolute;
}
.disclaimer {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 9px;
    font-style: normal;
    padding-top: 15px;
    padding-right: 15px;
    padding-left: 25px;
}
#banner {
    position: absolute;
    height: 251px;
    width: 839px;
    left: 242px;
    top: -1px;
    background-image: url(images/banner-copperblade.jpg);
}
#unten-g {
    position: absolute;
    height: 9px;
    width: 841px;
    left: 242px;
    top: 859px;
    background-color: #FFF;
}
#rechts {
    position: absolute;
    height: 869px;
    width: 30px;
    left: 1082px;
    top: 0px;
    background-image: url(images/linere1.jpg);
}
#navi {
    position: absolute;
    height: 150px;
    width: 841px;
    left: 241px;
    top: 250px;
}
#unten-w {
    position: absolute;
    height: 29px;
    width: 725px;
    left: 243px;
    top: 829px;
}
#navi2 {
    position: absolute;
    height: 26px;
    width: 116px;
    left: 970px;
    top: 830px;
    background-image: url(images/impressum.jpg);
}
#content {
    position: absolute;
    height: 425px;
    width: 841px;
    left: 242px;
    top: 402px;
    background-image: url(images/content_bg.jpg);
}

Kann mir bitte jemand auf die Sprünge helfen? Ich sitze schon seit Tagen an diesem Problem fest....

LG Lilith

 

[sokie]

AW: CSS Positionierung / Center

mit dr css allein ist nicht viel anzufangen, da daraus ja nicht hervorgeht welche Struktur die Seite hat (die ja im html festgelegt ist).
Was man schon so sagen kann ist, dass es in 99,9% der Fälle nicht notwendig ist alle Elemente, und in 99% der Fälle nicht notwendig ist viele Elemente absolut zu positionieren. Ausserdem kann man schon sagen, dass mit deinem Ansatz gerade wegen der absoluten Positionierung es nicht möglich ist, das Layout auflösungsunabhängig zentriert darzustellen.
Am einfachsten wäre es für konkrete aussagen die Seite so wie sie ist einfach upzuloaden und einen Link zur seite zu posten

 

[HansHansa]

AW: CSS Positionierung / Center

body {
	text-align:center;
        height: 100%;
}

 

[sokie]

AW: CSS Positionierung / Center

body {
    text-align:center;

}

Diese Lösung hat mit dem Problem gar nichts zu tun.
Die Elemente sind absolut positioniert, deshalb nicht zentriert.
mit text-align lassen sich keine Block Elemente zentrieren.

 

[foto62]

AW: CSS Positionierung / Center

CSS: Den umhüllenden DIV mit einer numerischen WITH ausstatten, nicht in %!
zB. :

with:800px

Positionieren auf

left:50%;

Linker Abstand auf minus halbe Breite setzen

margin-left:-400px;


Das ganze funktioniert auch sinngemäß mit der Höhe. Du mußt nur sicher sein, daß Höhe und Breite des Containers nicht durch die Inhalte verschoben werden.

http://de.selfhtml.org/css/

 

[Lilith681]

AW: CSS Positionierung / Center

Hallo zusammen,

ich habe gerade die Index mal online gestellt......



vielleicht hilft das weiter...

LG Lilith

 

[pedro2206]

AW: CSS Positionierung / Center

Hallo,

probiere mal diesen Code, ich hoffe wird dir weiterhelfen:

#body {
margin: auto;
padding: auto;
}

 

[Lilith681]

AW: CSS Positionierung / Center

Danke für die zahlreichen Antworten

also ich habe immer das Gefühl, das ich das Pferd von hinten aufzäume.
Ich weiß nicht wie man normalerweise bei der Erstellung einer CSS vorgeht. Gelernt habe ich, das ich mir erstmal einen Plan mache (Skizze) und dann im PS ein Template erstelle.

Vor geraumer Zeit habe ich mir das dann ins FW gezogen und dort die CSS schreiben lassen (dort besteht nämlich gleich die Möglichkeit, mir das zentriert ausrichten zu lassen).

Irgendwann kam ich davon wieder weg und habs altmodisch von Hand gesetzt. Und da tauchten dann auch die Probleme auf.
Denn da hab ich dann so angefangen: Banner, Navi, Seitenteile und Content ev. noch Footer. Da die ja alle ihre Größen hatten, habe ich denen feste Werte mitgegeben, sonst fliegt mir ja das Layout auseinander.
Kann mir noch jemand folgen?
Tja um nun die Seiten mittig zu setzten müßte ich ja irgendwie eine Haupt div haben und dort rein dann alles andre plazieren oder sehe ich das falsch?
Kann mir irgendjemand die Vorgehensweise erklären? Wie macht ihr das so?

Danke schön


Lilith

 

[cebito]

AW: CSS Positionierung / Center

Hallo,

probiere mal diesen Code, ich hoffe wird dir weiterhelfen:

#body {
margin: auto;
padding: auto;
}

Genau so Hilfreich wie das "center" von Hansaplast :hmpf:

@Lilith681 - mach um den kompletten Seiteninhalt einen umschließenden div, der bekommt position:relative; margin:0 auto; und die breite, das alles reinpasst. bei den anderen (absolut positionierten) musst du jetzt die 212px bei denen deine Seite jetzt von links anfängt von der left-position subtrahieren ->> statt left:212px; left:0; statt left:242px; left:30px; usw.