CSS zentriertes Layout und trotzdem Scrollbalken

Karol · 06.10.2011

Hallo Leute,
Ich habe ein einfaches Layout das zentriert ist. Es skaliert mit hilfe eines Wrappers, allerdings bekomme ich Vertikale Skrollbalken. und bei einer niedrigeren Auflösung auch horizontale obwohl das Layout eigentlich passen sollte. Da ich zum ersten mal mit einem Wrapper arbeite und mir die positionierung etwas schwer fällt bitte ich euch um hilfe.
Da muss irgendwas im Css falsch sein.

Hier die Daten:

MyBad · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Hi!

Am Besten du lädst die Seite mal auf einem Server, dass man sie sich direkt anschauen kann. Glaube die meißten hier haben keine Lust sich die Datei herunterzuladen (mir geht es zumindest so

)

Dann bekommst du sicher schneller ein Hilfestellung.

Karol · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Leider hab ich keinen Server der dafür bereitsteht. Außerdem würde man dann die Css nicht auslesen können. Die 36KB sind schneller als schnell heruntergeladen. Einen Server schaffe ich mir noch an. Es wäre nett wenn ihr trotzdem mal drauf schauen könntet.
LG

fexx · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Gibt doch gefühlte 1 Mio. Free-Spaces... ;-)

hubspe · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Karol schrieb:
Leider hab ich keinen Server der dafür bereitsteht. Außerdem würde man dann die Css nicht auslesen können. Die 36KB sind schneller als schnell heruntergeladen. Einen Server schaffe ich mir noch an. Es wäre nett wenn ihr trotzdem mal drauf schauen könntet.
LG

es geht dabei nicht um die Größe der Datei, sondern das man sich ungern zip-Dateien runterläd.
Das CSS kann man problemlos mit Firebug oder dem Webdeveloper auslesen, wenn du uns einen Link zum Problem gibst.
Freehoster ohne Werbung gibt es auch genug. Tante Google weiß Rat.

Myhar · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Karol schrieb:
Außerdem würde man dann die Css nicht auslesen können.

Wie schon angemerkt, das CSS kann man ohne Probleme herauslesen. Hast du deine Seite schon einmal selbst mit Firebug für Firefox angesehen? Vielleicht hilft dir das ja schneller, als es jemand anderer könnte.
Der Vollständigkeit halber: In Chrome/Opera/IE gibt es auch Webdeveloper Tools.

LG

Karol · 06.10.2011

OK, Leute hab mir ein Free Space angelegt !

hier der Link:

... in Firebug erkenne ich die Lösung für das Problem auch nicht. Das Layout sollte ohne Scrollbalken auskommen, es scrollt ja ins nichts ?!?!

Myhar · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Eine sehr komische Umsetzung von so einem simplen Design. Für einfärbige Flächen nimmt man kein Hintergrundbild, sondern definiert das im CSS: background-colour:#EFEFEF;
Benötigt man keine einfärbige Fläche, definiert man das ebenfalls im CSS (sofern es sich nicht um ein für den Inhalt relevantes Bild handelt, immer im CSS definieren.
Löscht man dein feld.gif raus, dann verschwindet auch der horizontale Scrollbalken.
Den Scrollbalken kann ich auch nur im Opera nachvollziehen, FF und Chrome zeigen keinen an.
Und gewöhne dir nicht an, mit negaiven top left, etc. Werten zu arbeiten. Manchmal mag man diese benötigen, für dein Design braucht man sie auf alle Fälle nicht. Du brauchst.
Auch ist ein reduzieren der Validierungsfehler nie verkehrt und kostet bei der geringen Anzahl an Fehlern deiner Seite kaum Arbeit.

L. G.

MyBad · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Zu einen erkennt man im Firebug schon mal, dass du dem Wrapper (#wrapper) zu seiner jetzigen Höhe von 550px noch einmal 300px an Margin dazuspendierst.

Dann sehe ich unterhalb des Wrappers noch irgendwelche Links. Warum auch immer die dort auftauchen.

Dann richtest du einige Elemente mit position:relative aus. Dies kann auch dazu führen, dass es zu dieser Fehldarstellung kommt. Wenn du etwas innerhalb des wrappers ausrichten willst, solltest du dem Wrapper Position: relative zuweisen und die darin auszurichtenden Elemente absolut positionieren.

Versuch das mal. Konnte die Seite leider aus Zeitmangel nur überfliegen!

Auf den ersten Blick keine gute Umsetzung für dieses simple Design.

Gegenstrom · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

war ja gar nich so einfach, aber die lösung lag zum teil auf der hand, du gibst nem bild die id="feld" du hast also nen bild in den wrapper reingelegt und damit die ordnung zerstört, wenn du alles wegnimmst, jegliche verschiebungen deiner elemente, siehst du, dass dein content und co diese riesenlücke erschaffen

nimm das bild raus

HTML:

<div id="wrapper">
        <a href="smz_impressum.html" title="Impressum" id="impressum" alt"Impressum Button">Impressum</a>

gib dem wrapper einfach den grauton in der css

HTML:

#wrapper { 
    position:relative;
    margin:120px auto;
    width:976px; 
    height:550px;
    background-color:#grautonfarbwert;
}

wenn du das ganze vertikal und horizontal zentrieren willst, dann nutzt dir das 120px margin absolut nichts

da es sowohl oben als auch unten 120px außenrand erzeugt...
ansonsten schließ ich mich myhar an;
mybad - "Wenn du etwas innerhalb des wrappers ausrichten willst, solltest du dem Wrapper Position: relative zuweisen und die darin auszurichtenden Elemente absolut positionieren." das ist absoluter schwachsinn, in nem relative positionierten container, kann man sehr wohl relative positionieren ohne jede schwierigkeit, da brauch man keine absolute positionierung, besonders nicht wenn das ganze grad ma aus navi und content besteht... :hmpf:
das icon gehört in den head-bereich

Karol · 06.10.2011

Danke für die Super Tipps: ich bin noch Anfänger und schlag mich noch so durch die Programmierung.
Die 300px an Margin im #wrapper brauche ich damit das Layout nicht oben anbackt. @Myhar das mit dem grauen feld tatsächlich unnötig und die Scrollbalken sind sofort weg. Ich mach mich mal sofort an die Umsetzung und melde mich gleich nochmal

Vielen Dank

So jetzt müsste alles richtig sein.
Wunderbar keine - Werte mehr. (bis auf eine kleine Ausnahme #impressum )
Keine Scrollbalken. @Gegenstrom: Da kommt ja noch mehr Inhalt rein ich wollte das Grundgerüst erstmal fehlerfrei fertig haben. Also ist jetzt jetzt OK ??? Danke für eure Anmerkungen ihr habt mir sehr geholfen

Hier nochmal der LINK:

Myhar · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Es ist schon viel besser als vorher

Ein paar kleine Anmerkungen habe ich trotzdem noch:
Jedoch solltest du auch nicht so viele absolute Positionierungen in deinem CSS verwenden. position:absolute ist ähnlich wie negatives margin, man muss es manchmal verwenden, jedoch kann es auch viele Probleme hervorrufen. (Layout passt nicht, wenn neue Elemente hinzugefügt werden oder ähnliches)
ZB: Deinen #content kann man auch relativ positionieren und hat trotzdem den selben Effekt, den du jetzt hast. Auch die Höhe für den #content erscheint mir als sinnlos, da sich die Höhe sowieso nach dem darin vorgegeben Inhalt richtet.
Und schön, dass du die Hintergrundgrafik ausgetauscht hast. Das kannst du auch für den balken-rechts.gif erledigen.

L. G.

Karol · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Alles klar

Dann hab ich ja heute so einiges dazu gelernt. Danke nochmal LG Karol

SineTempore · 06.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

bei mir ist übrigens schon noch ein scrollbalken.
der erledigt sich aber wenn du, wie gesagt, die höhe für #content entfernst, sowie dem #wrapper statt "150px auto" ein margin von "150px auto 0" gibst.

VG

Karol · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

also bei 150px auto 0; verändet sich bei mir nichts: bei einer Auflösung ab 1344x840 sollten keine scrollbalken erscheinen. Ich würde sie gerne auch bei kleineren Auflösungen ohne Scrollbalken laufen lassen, dazu müsste sich das Layout beim verkleinern nicht nur nach links, sondern nach links oben verschieben. Wenn ich das #wrapper margin z.b. auf 100px verkleinere sind sie weg aber bei hohen Auflösungen sitzt es mir dann zu weit oben. Gibt es da noch andere Lösungsvorschläge ?

hubspe · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Karol schrieb:
Gibt es da noch andere Lösungsvorschläge ?

eine komplette Website browserübergreifend (sogar hinunter bis zum IE5!) sicher horizontal und vertikal zu zentrieren kann man sich hier anschauen.

Karol · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

Genau was ich brauche

die entscheidenden teile sind der #container bei mir wäre das der #wrapper und die #distance. Hab ich irgendwas vergessen oder warum will es bei mir nicht funktionieren ???

Gegenstrom · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

HTML:

#distance {
     width:1px;
     height:50%;
     margin-bottom:-275px; /* half of container's height */
     float:left;
} 
#wrapper {
     position:relative;
     margin:0 auto;
     width:976px;
     height:550px;
     clear:both; 
}

sollte hinhauen
und setz endlich dein favicon in den head-bereich

Karol · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

@Gegenstrom, Klasse Vielen Dank. Es funktioniert

Ein hoch auf den FC St. Pauli

Gegenstrom · 07.10.2011

AW: CSS zentriertes Layout und trotzdem Scrollbalken

kein ding, solange es geholfen hat, musst auch schonmal vertikal und horizontal zentrieren

st.pauli hat allerdings nichts mit dem code zu tun

mal als tipp, versuch ohne javascript auszukommen, und das funzt bei deiner webseite zu 100%
tipp wäre da, css-sprites, beim menü mein ich

ansonsten noch was zu dem 1999
das ganze kannste mit 1999 machen und dann setz in der css

HTML:

.blue {
color:#004896;
font-size:größe angeben; 
}

dann brauchst immer nur benutzen

und setz endlich dein favicon in den head-bereich, als nächstes solltest du mal deine seite validieren lassen