XHTMLforum - bei kleinerer auflösung wird div container nicht ganz angezeigt

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - bei kleinerer auflösung wird div container nicht ganz angezeigt (http://xhtmlforum.de/showthread.php?t=61775)

bei kleinerer auflösung wird div container nicht ganz angezeigt

habe ein kleines Problem, ich hoffe es kann mir jemand helfen oder auf ein Thema verweisen im forum, wo dieses geklärt wird....

habe ein layout mit css gebaut. meine div container sind 900px breit. sieht auch alles super aus, es sei denn ich verkleinere mein Browserfenster oder jemand hat eine auflösung von unter 900px.......netbooks oder internethandys. dann wird nur noch die hälfte angezeigt. sollte ja eigentlich kein problem sein,
ist es aber, denn ich kann nicht ganz nach links scrollen. nach rechts gehts nur nach links hört es dann irgendwann auf, obwohl die hälfte der seite noch gar nicht angezeigt wird.... :helpsmil:

hier mal mein CSS

html, body {
background-color:#CCCCCC;
width:100%;
height:100%;
}

@font-face
{
font-family: "droid";
src: local("droid"),
url("droid.ttf")
format("TrueType")
}

a {
text-decoration: none;
}

a:link {
color: #000000;
}

a:visited {
color: #000000;
}

a:active {
color: #000000;
}

a:hover {
color: #A0A419;
text-decoration: none;
}

.hintergrund {
position: absolute;
top:10px; left:50%;
margin-left: -465px;
z-index:0;
width:930; height:640px;
background-color: #FFFFFF;
background-repeat: no-repeat;
font-family: Tahoma, sans-serif;
font-size: 10px;
}

.kopfzeile {
position: absolute;
top:10px; left:50%;
margin-left: -450;
z-index:1;
width:900; height:50px;
background-color: #FFFFFF;
background-repeat: no-repeat;
font-family: droid;
font-size: 33px;
text-align: right;
margin-top: 10px;
}

.hauptfeld {
position: absolute;
top:60px; left:50%;
margin-left: -450;
z-index:1;
width:900; height:540px;
background-image: url(hintergrund.jpg);
background-repeat: no-repeat;
font-family: Tahoma, sans-serif;
font-size: 10px;
padding:0em;

}

.menue {
position: absolute;
top:600px; left:50%;
margin-left: -450;
z-index:1;
width:900; height:40px;
background-color: #FFFFFF;
background-repeat: no-repeat;
font-family: droid;
font-size: 32px;
text-align: left;
margin-top: 8px;

}

.inhalt {
position: absolute;
top:180px; left:50%;
margin-left: -400;
z-index:5;
width:800; height:380px;
background-repeat: no-repeat;
font-family: Tahoma, sans-serif;
font-size: 10px;
border: medium;
border-color:#CC0033;
style: filter:alpha(opacity=60);KHTMLOpacity:0.60;MozOpac ity:0.60;opacity:0.60;

}

.fusszeile {
position: absolute;
top:640px; left:50%;
margin-left: -450;
z-index:1;
width:900; height:25px;
background-repeat: no-repeat;
font-family: Tahoma;
font-size: 11px;
color: #000000;
text-align: right;
margin-top: 10px;
}

ich hoffe es hat jemand eine schnelle lösung.....tausend dank

Was soll dieser Ganze postiton: absolute; krams?

Alles raus und die seite OHNE position bauen, so einfach :P

was würdest du vorschlagen, wie ich die bauen soll...8)
wollte aber mal ne seite bauen ohne tabellen.

aber mein problem löst das trotzdem nicht..:idea:

per margin: 0 auto; wird eine Seite im Browser zentriert. Alles in einen großen wrapper rein, den wrapper zentrieren und du solltest glücklich sein.

aso......mhhh.

kannste mir dann mal bitte nen beispiel posten, wie das aussehen würde mit "margin: auto", so das ich 3 container habe. weiß nicht genau was du mit großen wrapper meinst.
aber muss ich nicht "position: absolut" nehmen wenn ich div container übereinander haben will.

danke für deine antworten. wäre echt super wenn du mir mal nen kleines beispiel zeigen könntest.

danke sebastian

HTML-Code:

<div class="wrapper">

        <div id="header"></div>

        <div id="content"></div>

        <div id="footer"></div>

</div>

so würde das Ganze ausschauen. :P
jetzt der Klasse wrapper eine breite und ein margin: 0 auto geben und schon ist der bereich mittig platziert.

ja...dat geht....:lol:

wie würde die .css aussehen wenn ich die übereinander packen will, ist das dann auch mit "z-index"

danke dir

Generell soltest du kein z-index oder position absoöute brauchen, aber zeig doch einfach mal was du überhaupt vorhast ;)

bin gerade dabei ein layout zu bauen.ich hatte vor.
1. eine kopfzeile
2. ein hauptfeld, mit hintergrundbild
3. eine fusszeile, in der das menü ist

4. und ein inhaltsfeld was ein wenig kleiner ist als das hauptfeld (2.) und sich per z-index über dem hauptfeld befindet. dieses wollte ich dann transparent machen, dass man noch ein wenig das hintergrundbild vom hauptfeld (2.) sieht.

hört sich doch gut an oder ? :mrgreen:

willst also im grunde das folgende umsetzten:

HTML-Code:

<div class="wrapper">

        <div id="kopfzeile"></div>

        <div id="hauptfeld">

                <div id="kleineBox"></div>

                <div id="inhalt"></div>

        </div>

        <div id="fusszeile"></div>

</div>

sollte so sein ;)