Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] divy a rozdzielczosc
pmallek
post 26.07.2008, 19:58:52
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 1
Dołączył: 20.03.2006
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Poraz pierwszy robie szablon strony za pomoca css'a (div'ami) i mam drobny problem zwiazany z roznymi rozdzielczosciami.. jezeli zrobie 'kod' dla 1024/768:
[HTML] pobierz, plaintext 
  1. #top {
  2. 	width: 780px;
  3. 	background-color: #000000;
  4. 	color: #fff;
  5. }
  6.  
  7. #MENU {
  8. 	width: 200px;
  9. 	float: left;
  10. 	overflow: hidden;
  11. 	background-color: #000000;
  12. }
  13.  
  14. #INFORMACJE {
  15. 	width: 50px;
  16. 	float: right;
  17. 	overflow: hidden;
  18. 	background-color: #000000;
  19. }
  20.  
  21. #TRESC1 {
  22. 	width: 250px;
  23. 	float: left;
  24. 	overflow: hidden;
  25. 	background-color: #969696;
  26. }
  27.  
  28. #TRESC2 {
  29. 	width: 250px;
  30. 	float: left;
  31. 	overflow: hidden;
  32. 	background-color: #969696;
  33. }
  34.  
  35. #STOPKA {
  36. 	clear: both;
  37. 	width: 100%;
  38. 	background-color: #000000;
  39. }
[HTML] pobierz, plaintext



a układ:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="Stylesheet" type="text/css" href="style.css" />
  4. </head>
  5. </html>
  6. <div id="TOP">TOP</div>
  7. <div id="MENU">MENU</div>
  8. <div id="TRESC1">TRESC 1</div>
  9. <div id="TRESC2">TRESC 2</div>
  10. <div id="INFORMACJE">INFORMACJE</div>
  11. <div id="STOPKA">STOPKA</div>
  12. </html>
[HTML] pobierz, plaintext


to jest wmiare ale dla tej podanej rozdzielczosci... natomiast gdy bierzemy inna - z wieksza szerokoscia... robia sie dziury, teoretyczne rozwiazanie problemu to zrobienie zeby wszystko 'trzymalo sie qpy' i zostalo w jakis sposob wyposrodkowane, tylko jak to zrobic?


--------------------
Filmy -> Twoja strefa filmu
Go to the top of the page
+Quote Post
TroYan
post 27.07.2008, 01:34:57
Post #2





Grupa: Zarejestrowani
Postów: 56
Pomógł: 1
Dołączył: 19.04.2004
Skąd: Bytom Odrz.

Ostrzeżenie: (0%)
-----

stary, nie mozesz sobie wszystkiego dać sztywno a stopki 100% bo to lipa wygląda, albo decydujesz się wszystko na procenty (katorga żeby wszystko dopasować jak dla mnie, ale może masz talent tongue.gif) albo piksele.

nie wiem po co dałeś divowi informacje float right, jeśli powyliczyasz wszystkie divy żeby miały razem width:7 80px (tyle co cały układ), daj informacją float left, width: 80px; (tyle tam brakowało). co do wypośrodkowania obejmujesz wszystko jednym divem (przykładowo div body) i dajesz mu width: 780px; i margin: 0 auto;

kody:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="Stylesheet" type="text/css" href="style.css" />
  4. </head>
  5. </html>
  6. <div id="body">
  7.        <div id="TOP">TOP</div>
  8.        <div id="MENU">MENU</div>
  9.        <div id="TRESC1">TRESC 1</div>
  10.        <div id="TRESC2">TRESC 2</div>
  11.        <div id="INFORMACJE">INFORMACJE</div>
  12.        <div id="STOPKA">STOPKA</div>
  13. </div>  //koniec diva body
  14.  
  15. </html>
[HTML] pobierz, plaintext



css (doklej body, zmien informacje):

Kod
#body {

width: 780px;
margin: 0 auto;

}

#INFORMACJE {
width: 80px;
float: left;
overflow: hidden;
background-color: #000000;
}


Ten post edytował TroYan 27.07.2008, 01:35:28


--------------------
zmoderowano - waga i rozmiar
Go to the top of the page
+Quote Post
pmallek
post 27.07.2008, 14:54:14
Post #3





Grupa: Zarejestrowani
Postów: 23
Pomógł: 1
Dołączył: 20.03.2006
Skąd: Toruń

Ostrzeżenie: (0%)
-----

Ok, troche przemyslalem i zrobilem to faktycznie wszystko %, czasem trzeba zrobic mala przerwe a potem wszystko staje sie oczywiste:)


--------------------
Filmy -> Twoja strefa filmu
Go to the top of the page
+Quote Post
Tomplus
post 27.07.2008, 16:09:50
Post #4





Grupa: Zarejestrowani
Postów: 1 875
Pomógł: 230
Dołączył: 20.03.2005
Skąd: Będzin

Ostrzeżenie: (0%)
-----

Ciekawe rzeczy o centrowaniu dowiesz się tutaj i o innych rzeczach z użyciem CSS.

http://perfectionorvanity.com/2006/04/19/w...trowaniu-w-css/
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 08:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn