Strona na kazda rozdzielczosc - kilka divów Opcje

[k4r3r]

Mam problem, posiadam kilka divów ułożonych w podanym miejscu. Po zmianie rozdzielczości, pojawiają się suwaki :/ Proszę o pomoc. Mój plik style.css:

[PHP] pobierz, plaintext 
body {
 
  background-color: #1d2022;
 
  background-repeat: no-repeat;
 
  background-attachment: scroll;
 
  background-position:  center center;
 
  font-style: normal;
 
  font-variant: normal;
 
  font-weight: normal;
 
  line-height: normal;
 
  font-size-adjust: none;
 
  font-stretch: normal;
 
  width: auto;
 
  margin: 0 auto;
 
  color: #9ac708; /// #9ac708 #e25353 #F0F8FF
 
}
 
a {
 
  color: #9ac708; /// #F0F8FF #ffcc00
 
  text-decoration: none;
 
}
 
a:hover {
 
  color: #33cc00; /// #ff6600
 
}
 
.input {
 
  border: 1px dashed #3333ff;
 
  background-color: #33cc00;
 
  width: 110px;
 
}
 
.button {
 
  border-style: dashed;
 
  border-width: 1px;
 
  background-color: #006600;
 
}
 
div#srodek {
 
  overflow: auto;
 
  position: absolute;
 
  top: 190px;
 
  left: 206px;
 
  width: 934px;
 
  height: 415px;
 
  background-color: #686666;
 
  font-size: 25;
 
}
 
div#menu {
 
  background-color: #686666;
 
  position: absolute;
 
  width: 160px;
 
  height: 440px;
 
  top: 165px;
 
  left: 12px;
 
 
 
}
 
div#footer {
 
  background-color: #686666;
 
  position: absolute;
 
  width: 490px;
 
  text-align: center;
 
  height: 46px;
 
  top: 650px;
 
  left: 413px;
 
}
 
div#logo {
 
  position: absolute;
 
  width: 1310px;
 
  height: 157px;
 
  top: 5px;
 
  left: 15px;
 
}
 
div#menu_panel {
 
  color: black;
 
  font-size: 15;
 
  position: absolute;
 
  left: 12px;
 
  width: 160px;
 
  top: 165px;
 
  height: 25px;
 
  background: url('panel.png') repeat-x;
 
  font-family:"Segoe Script";
 
}
 
div#srodek_panel {
 
  color: black;
 
  font-size: 15;
 
  position: absolute;
 
  top: 165px;
 
  left: 206px;
 
  width: 934px;
 
  height: 25px;
 
  background: url('panel.png') repeat-x;
 
  font-family:"Segoe Script";
 
}
 
div#muzyka {
 
  font-size: 20;
 
  position: absolute;
 
  width: 177px;
 
  height: 440px;
 
  top: 165px;
 
  left: 1170px;
 
  background-color: #686666;
 
}
 
div#muzyka_panel {
 
  font-size: 15;
 
  color: black;
 
  position: absolute;
 
  top: 165px;
 
  left: 1170px;
 
  width: 177px;
 
  height: 25px;
 
  font-family:"Segoe Script";
 
  background: url('panel.png') repeat-x;
 
}
 
.rogi {
 
	-moz-border-radius: 12px;
 
	-webkit-border-radius: 12px;
 
	border-radius: 12px;
 
}
 
.rogi2 {
 
    border-top-right-radius: 12px;
 
    -moz-border-radius-topright: 12px;
 
   	-webkit-border-top-right-radius: 12px;
 
	border-top-left-radius: 12px;
 
 	-moz-border-radius-topleft: 12px;
 
    -webkit-border-top-left-radius: 12px;
 
}
 
.rogi3 {
 
    -webkit-border-bottom-right-radius: 12px;
 
    -webkit-border-bottom-left-radius: 12px;
 
    -moz-border-radius-bottomright: 12px;
 
    -moz-border-radius-bottomleft: 12px;
 
    border-bottom-right-radius: 12px;
 
    border-bottom-left-radius: 12px;
 
}
 
.news {
 
	border: 1px solid black;
 
	padding: 5px;
 
	font-size: 13px;
 
	font-family: Tahoma;
 
	width: 510px;
 
}
 
.tytul{
 
	padding: 3px;
 
	font-size: 20px;
 
	font-weight: bold;
 
	background: url('news.png') repeat-x;
 
	color: black;
 
}
[PHP] pobierz, plaintext 

[mortus]

Minusem takiego rozwiązania jest to, że musisz zaprogramować kilka różnych layoutów, dopasowanych do różnych rozdzielczości. Moim zdaniem mija się to z celem i lepiej zaprogramować jeden uniwersalny layout. Natomiast do tego potrzebujesz już nieco szerszej wiedzy. Szukaj w Google pod hasłami: fluid layout, fixed layout, elastic layout. Może i w języku polskim się coś znajdzie.