Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS Positionierung / Center“

Lilith681

Noch nicht viel geschrieben

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:
Code:
.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

Mod | Web

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
 
Zuletzt bearbeitet:
F

foto62

Guest

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/
 
Zuletzt bearbeitet von einem Moderator:

Lilith681

Noch nicht viel geschrieben

AW: CSS Positionierung / Center

Hallo zusammen,

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



vielleicht hilft das weiter...

LG Lilith
 
P

pedro2206

Guest

AW: CSS Positionierung / Center

Hallo,

probiere mal diesen Code, ich hoffe wird dir weiterhelfen:

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

Lilith681

Noch nicht viel geschrieben

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

undefined

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.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben