Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podstawy DIV
Forum PHP.pl > Forum > Przedszkole
h92
1.01.2007, 22:55:58
Witam mam stronę opartą na tabelkach lecz chcę ją przemianować na DIV'y ale mam z tym małe problemy a mianowicie:
Chciał bym aby 2 w sumie 4 bloki DIV były koło siebie a dokładnie chciał bym aby strona wyglądała tak



Szkic nie wyszedł tongue.gif A MENU to tylko napis menu a linki m to odnośniki z menu.

Chodzi o to że nie wiem jak połączyć obok siebie te bloki.
Oto mój kod:

HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  5.   <meta name="Description" content="Oficjalna strona H92">
  6.   <meta name="Keywords" content="h92, programowanie, komputer, php, html, tutoriale">
  7.   <meta http-equiv="Content-Language" content="pl">
  8.   <meta name="Author" content="h92 - Oskar Wójcicki">
  9.   <meta http-equiv="Reply-To" content="hacker92pl@gmail.com">
  10.   <meta http-equiv="Creation-Date" content="Tue, 28 Nov 2006 23:00:00 GMT">
  11.   <meta name="Generator" content="Photoshop + Notatnik tongue.gif">
  12.   <meta name="Authoring_tool" content="Photoshop + Notatnik tongue.gif">
  13.   <meta name="Robots" content="all">
  14.   <meta http-equiv="Expires" content="0">
  15.   <meta http-EQUIV="Cache-Control" content="no-store, no-cache, must-revalidate">
  16.   <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0">
  17.   <meta http-equiv="Pragma" content="no-cache">
  18.   <meta http-equiv="Imagetoolbar" content="no" />
  19.   <title>H92 - HomePage</title>
  20.   <link rel="Stylesheet" type="text/css" href="style.css">
  21.   <link rel="Stylesheet" type="text/css" href="tree.css" />
  22.   <script type="text/javascript" src="tree.js"></script>
  23.   <script type="text/javascript" src="block.js"></script>
  24. </head>
  25. <body oncontextmenu="return false" oncopy="return false" ondragstart="return false" ondrag="return false" >
  26.  
  27. <div id="body">
  28.  
  29. <div id=pasek_g>pasek</div>
  30. <div id=logo></div>
  31.  
  32. <div id=menu_g>menu</div>
  33. <div id=logo_2></div>
  34. <div id=pasek_s></div>
  35.  
  36. </div>
  37. </body>
  38. </html>
[HTML] pobierz, plaintext

A to:
[HTML] pobierz, plaintext 
  1. <div id="body">
[HTML] pobierz, plaintext

To po prostu zabezpieczenie przed screenami to nie ma nic wspólnego z moim kodem.

CSS:
[HTML] pobierz, plaintext 
  1. BODY {
  2.  background-color: 555555;
  3.  font-family : verdana, tahoma, arial, helvetica, sans-serif;
  4.  font-size : 11px;
  5.  margin : 0px;
  6. }
  7. #logo {
  8.  background: url(logo.gif) center;
  9.  margin : 0px;
  10.  width : 648px;
  11.  height : 214px;
  12. }
  13. #logo_2 {
  14.  background: url(logo_2.gif) center;
  15.  margin : 0px;
  16.  width : 476px;
  17.  height : 11px;
  18. }
  19. #pasek_g {
  20.  background: url(pasek_g.gif) center;
  21.  margin : 0px;
  22.  width : 648px;
  23.  height : 12px;
  24. }
  25. #pasek_s {
  26.  background: url(pasek_s.gif) center;
  27.  margin : 0px;
  28.  width : 476px;
  29.  height : 14px;
  30. }
  31. #menu_g {
  32.  background: url(menu_g.gif) center;
  33.  margin : 0px;
  34.  width : 172px;
  35.  height : 25px;
  36. }
  37. p {
  38.  font-size : 10px;
  39.  color : ffffff;
  40.  margin : 0px;
  41. }
  42. h5 {
  43.  font-size : 14px;
  44.  color : ffffff;
  45.  margin : 0px;
  46.  font-weight : normal;
  47. }
[HTML] pobierz, plaintext


Proszę o pomoc. Z góry dziękuję i pozdrawiam.
Dandelion
2.01.2007, 00:05:04
http://kurs.browsehappy.pl/CSS/Float
h92
2.01.2007, 11:26:09
Przydało się ale teraz stopka złazi mi na sam dół

Jak już mówiłem teraz stopka spada na sam dół oto mój kod:
HTML:
[HTML] pobierz, plaintext 
  1. <div id="body">
  2. <div id=pasek_g>pasek</div>
  3. <div id=logo></div>
  4. <div id=menu_g>menu</div>
  5. <div id=logo_2></div>
  6. <div id=pasek_s>lol</div>
  7. <div id=menu_s>lol</div>
  8. <div id=tresc>lol</div>
  9. <div id=stopka>lol</div>
  10. </div>
[HTML] pobierz, plaintext

CSS:
[HTML] pobierz, plaintext 
  1. BODY {
  2.  background-color: 555555;
  3.  font-family : verdana, tahoma, arial, helvetica, sans-serif;
  4.  font-size : 11px;
  5.  margin : 0px;
  6.  width : 648px;
  7. }
  8. #logo {
  9.  background: url(logo.gif) center;
  10.  margin : 0px;
  11.  width : 648px;
  12.  height : 214px;
  13. }
  14. #logo_2 {
  15.  background: url(logo_2.gif) center;
  16.  margin : 0px;
  17.  width : 476px;
  18.  height : 11px;
  19.  float : right;
  20. }
  21. #pasek_g {
  22.  background: url(pasek_g.gif) center;
  23.  margin : 0px;
  24.  width : 648px;
  25.  height : 12px;
  26. }
  27. #pasek_s {
  28.  background: url(pasek_s.gif) center;
  29.  margin : 0px;
  30.  width : 476px;
  31.  height : 14px;
  32.  float : right;
  33. }
  34. #menu_g {
  35.  background: url(menu_g.gif) center;
  36.  margin : 0px;
  37.  width : 172px;
  38.  height : 25px;
  39.  float : left;
  40. }
  41. #menu_s {
  42.  background: url(menu_s.gif) center;
  43.  margin : 0px;
  44.  width : 172px;
  45.  height : 400px;
  46.  float : left;
  47. }
  48. #tresc {
  49.  background: url(tresc.gif) center;
  50.  margin : 0px;
  51.  width : 476px;
  52.  height : 384px;
  53.  float : right;
  54. }
  55. #stopka {
  56.  background: url(stopka.gif) center;
  57.  margin : 0px;
  58.  width : 477px;
  59.  height : 16px;
  60.  float : right;
  61. }
  62. #bok_l_s {
  63.  background: url(bok_l_s.gif) center;
  64.  margin : 0px;
  65.  width : 28px;
  66.  height : 650px;
  67.  float : left;
  68. }
  69. #bok_p_s {
  70.  background: url(bok_p_s.gif) center;
  71.  margin : 0px;
  72.  width : 28px;
  73.  height : 650px;
  74.  clear : right;
  75.  float : right;
  76. }
  77. p {
  78.  font-size : 10px;
  79.  color : ffffff;
  80.  margin : 0px;
  81. }
  82. h5 {
  83.  font-size : 14px;
  84.  color : ffffff;
  85.  margin : 0px;
  86.  font-weight : normal;
  87. }
[HTML] pobierz, plaintext


I przy tym stopka spada na sam dół tzn jest po prawej stronie tak jak powinna ale nie chce się wkomponować w treść i menu po prostu z chodzi na sam dół. A jeszcze coś jak mogę wycentrować stronę w css?
Dandelion
2.01.2007, 13:45:21
http://kurs.browsehappy.pl/Krok/Centrowanie

odpowiedz na wczesniejsze pytanie masz na

kurs.browsehappy.pl powodzenia smile.gif
h92
2.01.2007, 14:48:41
nie pomaga
dr_NO
2.01.2007, 16:24:46
body, html {margin: 0px, auto; text-align: center;}
I niema siły, działać musi ...
h92
5.01.2007, 23:30:06
niee sam tekst się centruje

...moze ktos pomoze?
lopik
6.01.2007, 01:44:36
Żeby w IE było center dajesz dla body text-align: center;.
I potem dla wszystkich, albo jak tam chcesz dajesz dla div'a text-align: left; żeby tekst był do lewej.

Specyfikacja CSS1 #text-align
h92
6.01.2007, 23:19:50
ok ale jak w ff daje text-align: center;to centruje sie sam tekst a nie strona
cadavre
6.01.2007, 23:40:54
margin: 0 auto; bez przecinka i bez jednostki oraz nie dla <body> bo body jest zawsze 100%. Musisz utworzyć dużego diva, do którego wsadzisz wszystko inne:
[HTML] pobierz, plaintext 
  1. <body><div id="main">...</div></body>
[HTML] pobierz, plaintext
i jego CSS:
[HTML] pobierz, plaintext 
  1. #main{
  2. width: auto;
  3. margin: 0 auto;
  4. }
[HTML] pobierz, plaintext
dr_NO
7.01.2007, 01:08:49
ah, przecinek wkrasł się przypadkowo ;/
A co do body, to mam mieszane uczucia, bo czasami "się pluje" jak nie dam marginów właśnie do body ...
lopik
7.01.2007, 12:57:53
http://riddle.jogger.pl/2006/04/19/wszystk...trowaniu-w-css/
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.