[CSS][HTML] Strona się rozjezdza przy zmienianiu szerokosci okna przegladarki Opcje

[Lethys]

Jak zrobić aby strona nie dostosowywala sie pod wielkosc okna przegladarki? tylko po prostu czesc ktora jest za zasiegiem przegladarki nie byla widoczna.

Jezeli zmieniam wielkosc okna przegladarki to strona sie rozjezdza (przesuwa sie cale menu, buttony na siebie wchodza, prawa czesc strony znika pod lewa czescia strony itp).

cale okno:


zmniejszony:



Kod css:

[PHP] pobierz, plaintext 
*{
padding: 0px;
margin: 0px;
}
 
 
body{
background: white;
margin:0;
padding:0;
height:100%;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
}
 
#container {
   min-height:100%;
   position:relative;
}
 
#header{
width: 100%;
height: 200px;
background: eae20f;
background-image:url('../img/logo_bg.png'); 
}
 
#background{
/* background-image:url('../img/logo_wallpaper.png'); */
width: 100%;
height: 200px;
position: absolute;
}
 
#background2{
background-image:url('../img/logo_bg.png');
width: 100%;
height: 200px;
position: absolute;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
}
 
#logo{
color: black;
font-size: 28px;
margin-left: 5%;
margin-top: 20px;
position: absolute;
}
 
#logo h2{
font-size: 18px;
}
 
.final{
text-align: center;
}
 
#main{
color: #4d4e4f;
margin-left: 5%;
margin-right: 5%;
margin-top: 20px;
padding-bottom:80px; /* Height of the footer */
position:relative;
}
 
#main_left{
width: 70%;
float: left;
}
 
#main_right{
margin-left: 50px;
width: 250px;
padding: 10px;
border:1px solid;
border-radius:2px;
box-shadow: 5px 5px 5px #888888;
float: left;
}
 
.clear{
clear: both;
}
 
#main h2{
text-transform: uppercase;
}
#main hr{
color: #4f0853; 
width: 300px;
}
 
#main p{
margin-top: 20px;
}
 
.textwrap{
float: left;
margin: 10px;
}
 
nav {float:left; position: absolute; z-index: 100; margin-left: 5%; margin-top: 155px; text-transform: uppercase; color: black;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline; }
nav ul li:hover {background-color: black; color: #4f0853; cursor: pointer;}
nav ul li a {display:block;padding:15px 25px; color: white; text-decoration:none;} /* kolor czcionki menu głównego */
nav ul li ul {position:absolute;width:200px;background:#FFF;}
nav ul li ul li {width:200px; background: #eae20f;} /* kolor tła rozwijanego */
nav ul li ul li a {display:block;padding:15px 10px; color: black;} /* kolor czcionki z menu rozwijanego */
nav ul li ul li:hover a {background:black; color: white;} /* kolor najechanego z menu rozwijanego */
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}
 
label{
width: 4em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
font-size: 21px;
margin-top: 5px;
}
 
input{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style:solid;
border-width:1px;
border-color: #4d4e4f;
padding: 4px;
font-size: 21px;
}
 
textarea{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-style:solid;
border-width:1px;
border-color: #4d4e4f;
padding: 4px;
font-size: 21px;
}
 
#contact_button{
width: 200px;
font-size: 28px;
margin-left: 95px;
}
 
#footer{
position: absolute;
bottom:0;
width:100%;
height:40px;   /* Height of the footer */
background: #eae20f;
}
 
#footer p{
margin-left: 5%;
margin-top: 10px;
color: black;
}
 
[PHP] pobierz, plaintext 

Ten post edytował Lethys 11.10.2013, 17:58:09

[kropamk]

Jeżeli nie chcesz aby strona się skalowała to pożegnaj się z wartościami procentowymi dla szerokości elementów. Korzystaj z px po prostu.