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]

Za pomocą pozycjonowania absolutnego niczego nie osiągniesz chyba, że cały layout będziesz ustawiał za pomocą JavaScript już po wczytaniu strony. Poczytaj troszkę o różnych typach layoutu.
W Internecie znajdziesz mnóstwo materiałów na ten temat.

[k4r3r]

Dopiero zaczynam css, czy możesz mi troszkę pomóc?

whitedark.karer.xaa.pl
zobacz sobie

[mortus]

Wiem o co chodzi i mówię, że pozycjonowanie absolutne się tutaj nie sprawdzi. Weźmy np. div-a z takim stylem CSS:

[CSS] pobierz, plaintext 
div {
  width: 200px;
  height: 400px;
  position: absolute;
  left: 500px;
  top: 200px;
}
[CSS] pobierz, plaintext 

Taki div niezależnie od rozdzielczości przeglądarki zawsze będzie ustawiony 500px od lewej krawędzi przeglądarki i 200px od krawędzi górnej. Dlatego przy mniejszych rozdzielczościach pojawią się suwaki.

Musisz cały layout przeprogramować.

[k4r3r]

loool :/

Znalazłem coś takiego:

[PHP] pobierz, plaintext 
<script language="javascript" type="text/javascript"><!--
// Autor: Volkov
 
var Wide = screen.width;
     if (Wide <=  640) window.location = "index640.html";
else if (Wide <=  800) window.location = "index800.html";
else if (Wide <= 1024) window.location = "index1024.html";
else                   window.location = "index1152.html";
//--></script> 
[PHP] pobierz, plaintext 

i

[PHP] pobierz, plaintext 
<a href="java script:void(window.resizeTo(800,600))">
[PHP] pobierz, plaintext 

Może zrobić tak?

Ten post edytował k4r3r 11.07.2011, 10:32:19

[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.

[k4r3r]

A ten 2 kodzik?