Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] divy a rozdzielczosc
pmallek
post
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?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
TroYan
post
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 (IMG:http://forum.php.pl/style_emoticons/default/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
Go to the top of the page
+Quote Post
pmallek
post
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:)
Go to the top of the page
+Quote Post
Tomplus
post
Post #4





Grupa: Zarejestrowani
Postów: 1 879
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
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

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

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

RSS Aktualny czas: 22.08.2025 - 12:49
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn