tinchern06
Mitglied
Hallo, ich habe folgendes Problem:
meine Seite soll sich immer dynamisch an die Bildschirmgröße anpassen. Das tut sie auch bis zu einer gewissen Bildschirmgröße und dann treten Fehler auf.
Seitenaufbau:
#header (soll 100% width sein, feste Höhe)
#leftbox (flexible Breite, 100% hoch, beinhaltet ein Bild welches am unteren Rand ausgerichtet ist und sich flexibel der Box anpasst)
#boxright (2 Spalten ->content1 (menue)->content2(inhalt)auch flexible Breite)
Wie gesagt funktioniert soweit bis die Bildschirmgröße verkleinert wird und boxright gescrollt werden muß, dann passt sich die boxleft nicht mehr 100% in der Länge an (hört auf ab Scrollbereich) Das sieht natürlich blöd aus weil das bild dann nicht mehr unten ausgerichtet ist sondern mitten drin hängt. Der Kopfbereich schafft keine 100% Weite bei kleiner Bildschirmgröße. Ich hoffe ich habe das einigermaßen anschaulich beschrieben :-(
Hier mal der Code css
Code Html
Ich hoffe jemand hier kann mir helfen
Danke im Voraus
Gruß tinchern06
meine Seite soll sich immer dynamisch an die Bildschirmgröße anpassen. Das tut sie auch bis zu einer gewissen Bildschirmgröße und dann treten Fehler auf.
Seitenaufbau:
#header (soll 100% width sein, feste Höhe)
#leftbox (flexible Breite, 100% hoch, beinhaltet ein Bild welches am unteren Rand ausgerichtet ist und sich flexibel der Box anpasst)
#boxright (2 Spalten ->content1 (menue)->content2(inhalt)auch flexible Breite)
Wie gesagt funktioniert soweit bis die Bildschirmgröße verkleinert wird und boxright gescrollt werden muß, dann passt sich die boxleft nicht mehr 100% in der Länge an (hört auf ab Scrollbereich) Das sieht natürlich blöd aus weil das bild dann nicht mehr unten ausgerichtet ist sondern mitten drin hängt. Der Kopfbereich schafft keine 100% Weite bei kleiner Bildschirmgröße. Ich hoffe ich habe das einigermaßen anschaulich beschrieben :-(
Hier mal der Code css
HTML:
html, body {
height:100%;
width:100%; min-width:100%;
}
body {
font-family: Verdana,Arial,Helvetica;
background: rgb(161,13,89);
font-size: 0.76em;
color:rgb(248,243,233);
margin: 0 0 0 0;
padding:0;
}
#head{
position: absolute;
width:auto;
min-width:100%;
height:170px;
background-color:rgb(216,228,255);
left: 0px;
top: 0px;
margin:0px;
text-align: left;
white-space: nowrap;
vertical-align: top;
overflow:visible;
z-index: 14;
}
#boxleft {
position: absolute;
left: 0px;
width: 18%;
min-width:180px;
min-height:100%;
height:100%;
margin: 0 0 0 0;
top: 0px;
bottom:0;
background-color:rgb(216,228,255);
z-index:2;
}
#boxright{
position: absolute;
right: 0px;
top: 200px;
width:82%;
margin:0;
padding:0 0 0 0;
z-index: 2;
}
#content1{
position:absolute;
width: 200px;
text-align:left;
line-height: 1.9em;
font-weight:300;
font-size: medium;
white-space: nowrap;
padding:4em;
z-index: 3;
}
#content2, .content2{
position: absolute;
left:300px;
padding-left:5em;
padding-right:5em;
line-height: 1.9em;
font-weight:300;
font-size: medium;
text-align:justify;
overflow: auto;
height: 500px;
padding-right: 2em;
z-index: 3;
}
Code Html
HTML:
<div id="head"><img src="images/logo.gif" alt="" border="0"></div>
<div id="boxleft" ><div class="bg_img"><img src="images/foto.jpg" alt="Foto" border="1"></div> </div>
<div id="boxright">
<div id="content1">...
</div>
<div class="content2">... </div>
</div>
Ich hoffe jemand hier kann mir helfen
Danke im Voraus
Gruß tinchern06