Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Strona na kazda rozdzielczosc - kilka divów
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
k4r3r
11.07.2011, 10:04:13
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 
  1. body {
  2.  
  3.   background-color: #1d2022;
  4.  
  5.   background-repeat: no-repeat;
  6.  
  7.   background-attachment: scroll;
  8.  
  9.   background-position:  center center;
  10.  
  11.   font-style: normal;
  12.  
  13.   font-variant: normal;
  14.  
  15.   font-weight: normal;
  16.  
  17.   line-height: normal;
  18.  
  19.   font-size-adjust: none;
  20.  
  21.   font-stretch: normal;
  22.  
  23.   width: auto;
  24.  
  25.   margin: 0 auto;
  26.  
  27.   color: #9ac708; /// #9ac708 #e25353 #F0F8FF
  28.  
  29. }
  30.  
  31. a {
  32.  
  33.   color: #9ac708; /// #F0F8FF #ffcc00
  34.  
  35.   text-decoration: none;
  36.  
  37. }
  38.  
  39. a:hover {
  40.  
  41.   color: #33cc00; /// #ff6600
  42.  
  43. }
  44.  
  45. .input {
  46.  
  47.   border: 1px dashed #3333ff;
  48.  
  49.   background-color: #33cc00;
  50.  
  51.   width: 110px;
  52.  
  53. }
  54.  
  55. .button {
  56.  
  57.   border-style: dashed;
  58.  
  59.   border-width: 1px;
  60.  
  61.   background-color: #006600;
  62.  
  63. }
  64.  
  65. div#srodek {
  66.  
  67.   overflow: auto;
  68.  
  69.   position: absolute;
  70.  
  71.   top: 190px;
  72.  
  73.   left: 206px;
  74.  
  75.   width: 934px;
  76.  
  77.   height: 415px;
  78.  
  79.   background-color: #686666;
  80.  
  81.   font-size: 25;
  82.  
  83. }
  84.  
  85. div#menu {
  86.  
  87.   background-color: #686666;
  88.  
  89.   position: absolute;
  90.  
  91.   width: 160px;
  92.  
  93.   height: 440px;
  94.  
  95.   top: 165px;
  96.  
  97.   left: 12px;
  98.  
  99.  
  100.  
  101. }
  102.  
  103. div#footer {
  104.  
  105.   background-color: #686666;
  106.  
  107.   position: absolute;
  108.  
  109.   width: 490px;
  110.  
  111.   text-align: center;
  112.  
  113.   height: 46px;
  114.  
  115.   top: 650px;
  116.  
  117.   left: 413px;
  118.  
  119. }
  120.  
  121. div#logo {
  122.  
  123.   position: absolute;
  124.  
  125.   width: 1310px;
  126.  
  127.   height: 157px;
  128.  
  129.   top: 5px;
  130.  
  131.   left: 15px;
  132.  
  133. }
  134.  
  135. div#menu_panel {
  136.  
  137.   color: black;
  138.  
  139.   font-size: 15;
  140.  
  141.   position: absolute;
  142.  
  143.   left: 12px;
  144.  
  145.   width: 160px;
  146.  
  147.   top: 165px;
  148.  
  149.   height: 25px;
  150.  
  151.   background: url('panel.png') repeat-x;
  152.  
  153.   font-family:"Segoe Script";
  154.  
  155. }
  156.  
  157. div#srodek_panel {
  158.  
  159.   color: black;
  160.  
  161.   font-size: 15;
  162.  
  163.   position: absolute;
  164.  
  165.   top: 165px;
  166.  
  167.   left: 206px;
  168.  
  169.   width: 934px;
  170.  
  171.   height: 25px;
  172.  
  173.   background: url('panel.png') repeat-x;
  174.  
  175.   font-family:"Segoe Script";
  176.  
  177. }
  178.  
  179. div#muzyka {
  180.  
  181.   font-size: 20;
  182.  
  183.   position: absolute;
  184.  
  185.   width: 177px;
  186.  
  187.   height: 440px;
  188.  
  189.   top: 165px;
  190.  
  191.   left: 1170px;
  192.  
  193.   background-color: #686666;
  194.  
  195. }
  196.  
  197. div#muzyka_panel {
  198.  
  199.   font-size: 15;
  200.  
  201.   color: black;
  202.  
  203.   position: absolute;
  204.  
  205.   top: 165px;
  206.  
  207.   left: 1170px;
  208.  
  209.   width: 177px;
  210.  
  211.   height: 25px;
  212.  
  213.   font-family:"Segoe Script";
  214.  
  215.   background: url('panel.png') repeat-x;
  216.  
  217. }
  218.  
  219. .rogi {
  220.  
  221. 	-moz-border-radius: 12px;
  222.  
  223. 	-webkit-border-radius: 12px;
  224.  
  225. 	border-radius: 12px;
  226.  
  227. }
  228.  
  229. .rogi2 {
  230.  
  231.     border-top-right-radius: 12px;
  232.  
  233.     -moz-border-radius-topright: 12px;
  234.  
  235.    	-webkit-border-top-right-radius: 12px;
  236.  
  237. 	border-top-left-radius: 12px;
  238.  
  239.  	-moz-border-radius-topleft: 12px;
  240.  
  241.     -webkit-border-top-left-radius: 12px;
  242.  
  243. }
  244.  
  245. .rogi3 {
  246.  
  247.     -webkit-border-bottom-right-radius: 12px;
  248.  
  249.     -webkit-border-bottom-left-radius: 12px;
  250.  
  251.     -moz-border-radius-bottomright: 12px;
  252.  
  253.     -moz-border-radius-bottomleft: 12px;
  254.  
  255.     border-bottom-right-radius: 12px;
  256.  
  257.     border-bottom-left-radius: 12px;
  258.  
  259. }
  260.  
  261. .news {
  262.  
  263. 	border: 1px solid black;
  264.  
  265. 	padding: 5px;
  266.  
  267. 	font-size: 13px;
  268.  
  269. 	font-family: Tahoma;
  270.  
  271. 	width: 510px;
  272.  
  273. }
  274.  
  275. .tytul{
  276.  
  277. 	padding: 3px;
  278.  
  279. 	font-size: 20px;
  280.  
  281. 	font-weight: bold;
  282.  
  283. 	background: url('news.png') repeat-x;
  284.  
  285. 	color: black;
  286.  
  287. }
[PHP] pobierz, plaintext
mortus
11.07.2011, 10:14:33
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
11.07.2011, 10:18:58
Dopiero zaczynam css, czy możesz mi troszkę pomóc? smile.gif

whitedark.karer.xaa.pl
zobacz sobie
mortus
11.07.2011, 10:25:30
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 
  1. div {
  2.   width: 200px;
  3.   height: 400px;
  4.   position: absolute;
  5.   left: 500px;
  6.   top: 200px;
  7. }
[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
11.07.2011, 10:30:14
loool :/

Znalazłem coś takiego:
[PHP] pobierz, plaintext 
  1. <script language="javascript" type="text/javascript"><!--
  2. // Autor: Volkov
  3.  
  4. var Wide = screen.width;
  5.      if (Wide <=  640) window.location = "index640.html";
  6. else if (Wide <=  800) window.location = "index800.html";
  7. else if (Wide <= 1024) window.location = "index1024.html";
  8. else                   window.location = "index1152.html";
  9. //--></script> 
[PHP] pobierz, plaintext


i

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


Może zrobić tak?
mortus
11.07.2011, 10:43:59
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
11.07.2011, 10:45:07
A ten 2 kodzik?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.