• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Seitenausrichtung bei unterschiedlicher Auflösungen

C

creative235

Neues Mitglied
Hallo Ihr Lieben,

ich wende mich in meiner Verzweiflung an euch. Ich entwickle gerade eine Seite für einen befreundeten Spielemacher. Sieht auch soweit ganz gut aus, da ich aber nicht der Oberpro in Sachen HTML & CSS bin habe ich noch einen Fehler den ich nicht wirklich raus bekomme und auch nicht wirklich weiß woran er liegt, da ich mit Prozentangaben arbeite.

Nun mein Problem: Ich arbeite mit Div-Containern und habe meine Seite in etwa nach folgendem Schema aufgebaut:

>> http://img829.imageshack.us/img829/9752/schemad.jpg

Der farblich makierte Teil in der Mitte der Seite ist nun mein Hauptbereich in der eigentlich der ganze Inhalt steht. Sieht soweit auch ganz gut aus. Wenn nun aber der Text im roten Feld zu lange ist zieht er automatisch den Footer (Geld) mit runter und zum Vorschein kommt dann ganz unten (Der Übestehende Rand) die Hintergrundfarbe (Habe ich zu Testzwecken magenta gemacht. Wie geht denn das, ich arbeite doch mit Prozentangaben und komm im gesamten immer auf 100% :/

So sieht die Seite in etwa bei mir aus:

>> http://img831.imageshack.us/img831/1681/64668509.jpg
(Ganz chick und edel finde ich)

Und so bei einer Freundin von mir:

>> http://img839.imageshack.us/img839/3598/screenbg.png

Ich würde ja sagen ich mache einfach die gesamte Hintergrundfarbe schwarz, jedoch werden dann die Hintergründe der nebenliegenden Container nicht mitgezogen. Und generell sieht das bei ihr alles so gedrückt aus. Viel lieber hätte ich es dass sie scrollen muss aber die Seite so schön aussieht wie bei mir.

Hier ist der Quellcode in HTML: nopaste.info - free nopaste script and service
Und hier der in CSS: nopaste.info - free nopaste script and service

Bin für Hilfe sehr sehr dankbar :)

Lg
 
Ganz simpel ist das nicht.
Als erstes könntest du dir dieses Beispiel ansehen: The Man in Blue > footerStickAlt: A more robust method of positioning a footer
Die Breite könntest du body zuweisen und mit margin: 0 auto zentrieren.
Den linken Schatten würde #nonFooter bekommen.
Für den rechten Schatten könntest du ein leeres div in #content einfügen und absolute positionieren (die einzige Möglichkeit height: 100%; innerhalb eines Elementes mit min-height in % zu nutzen):
Code: 
#right-bg {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 100%;
background: transparent url(bg/schatten-rechts.png) repeat-y;
}
Im IE 6 wächst der rechte Schatten so aber nicht richtig mit.
Er könnte ein alles umspannendes div bekommen:
Code: 
<!--[if lt IE 7]>   <div id="ie6-hack">   <![endif]-->
Code: 
#ie6-hack {
height: 100%;
background: transparent url(bg/schatten-rechts.png)  100% 0 repeat-y;
}
Der übrige IE6-min-height-hack ist in dem verlinkten Beispiel enthalten.
 
Zuletzt bearbeitet:
Das währe der geänderte html-Code von Man in Blue:
Code: 
   <body>
<!--[if lt IE 7]>
   <div id="ie6-hack">
   <![endif]-->
<div id="nonFooter">
<div id="content">
<div id="right-bg"> </div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
<div id="footer">
Fuss
</div>
<!--[if lt IE 8]>
   </div>
   <![endif]-->
</body>

css:
Code: 
html, body { 
margin:0; 
padding:0; 
} 
 
html
{
height: 100%;
}

body
{
height: 100%;
width: 60%;
margin: 0 auto;
background: black;
color: white;
}

#nonFooter
{
position: relative;
min-height: 100%;
background: transparent url(bg/schatten-links.png) repeat-y;
position: relative;
}

* html #nonFooter
{
height: 100%;
}

#content
{
padding: 0 60px 9em 60px;

}

#right-bg {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 100%;
background: transparent url(bg/schatten-rechts.png) repeat-y;

}

#footer
{
position: relative;
margin: -7.5em 60px 0 60px;
height: 7.5em;
}

* html #ie6-hack {
height: 100%;
background: transparent url(bg/schatten-rechts.png)  100% 0 repeat-y;
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben