Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css]Problem z wyśrodkowaniem strony - CSS i div'y
Forum PHP.pl > Forum > Przedszkole
Pablo128
5.04.2008, 22:16:13
Cytat
<div style="background-color: #FFFFFF; background-position: center; position:
absolute; left: 1px; top: 90px; width: 875px; height: 450px ; padding: 3px;
padding-right: 20px;">

Na powyższej zasadzie stworzyłem warstwy strony, która wyświetla się prawidłowo. Nie robiłem nic w CSS'ie. Wszystko w porządku poza tym, iż chciałbym żeby te warstwy były wyświetlane pośrodku ekranu. Analogicznie do nasza-klasa.pl

Z góry dzięki za pomoc
Pozdrawiam
Mlodycompany
5.04.2008, 22:21:07
align:center
grzesiek_g
5.04.2008, 22:22:31 
[HTML] pobierz, plaintext 
  1. <div style="background-color: #FFFFFF;margin:0 auto; width: 875px; height: 450px ; padding: 3px 3px 3px 20px;">
[HTML] pobierz, plaintext

Po co ci background-position było? Jak dajesz kolor to wypełni on cały kontener.

// edit
align=center było dobre ładnych kilka lat temu, więc proszę nie wracajmy do tego.
Mlodycompany
5.04.2008, 22:26:45
bylo nie bylo ale dziala
Pablo128
5.04.2008, 22:28:28
Cytat
align=center
to tylko wyrównuje tekst do lewej strony.
Dzięki Grzesiek, chodziło mi o marginesy, ale nie wiedziałem jak to zrobić. Jeszcze raz wielkie THX.
Mlodycompany
5.04.2008, 22:30:16
nie wyruwnuje do lewej tylko jesli juz to do srodka
Pablo128
7.04.2008, 20:08:31
Tak się składa, że właśnie tak nie jest. Zadziwiające, ale prawdziwe!

Wiesz co jednak nie jest tak jakbym chciał.
Treść nie jest wyświetlana pośrodku ekranu. Poza tym jeszcze pozostaje kwestia tła.

Zobacz proszę co jest w tym nie tak.
Cytat
<div style="background-image:url(grafika/tlo.gif);margin:0 auto; width: 875px; height: 450px ; padding: 3px 3px 3px 20px;">
<div align=center; style="background-image:url(grafika/naglowek.gif); margin:0 auto;
position: absolute; left: 00px; top: 105px; width: 875px; height: 80px; padding: 3px 3px 3px 20px;
padding-right: 20px;">
<div style="background-color: #FFFFFF; position:
absolute; margin:0 auto; left: 1px; top: 90px; width: 875px; height: 450px ; padding: 3px 3px 3px 20px;
padding-right: 20px;">
<div style="background-color: #B4D66C; position:
absolute; margin:0 auto; left: 0px; top: 0px; width: 200px; padding: 3px 3px 3px 20px;
padding-right: 20px;">


Proszę o pomoc każdego kto się na tym zna!
isso
7.04.2008, 20:28:03
to mają być 4 zagnieżdżone div`y ?jestes tego pewien ?
Pablo128
7.04.2008, 20:28:42
eee... NIe. Trzy div'y i tło!
isso
7.04.2008, 20:30:00
to weź pododawaj zamknięcia div`ów tam gdzie mają byc ... ;] i używaj znacznika html do podawania kodu
Pablo128
7.04.2008, 20:33:06
Kod
  <div align=center; style="background-image:url(grafika/naglowek.gif); margin:0 auto;
position: absolute; left: 00px; top: 105px; width: 875px; height: 80px; padding: 3px 3px 3px 20px;
padding-right: 20px;"></div>
<div style="background-color: #FFFFFF; position:
absolute; margin:0 auto; left: 1px; top: 90px; width: 875px; height: 450px;  padding: 3px 3px 3px 20px;
padding-right: 20px;">   TEXT 1 </div>
<div style="background-color: #B4D66C; position:
absolute; margin:0 auto; left: 0px; top: 0px; width: 200px;  padding: 3px 3px 3px 20px;
padding-right: 20px;"> TEXT 2 </div>


Mówisz, że zamknięcia div'owe pomogą?

Jakoś ten przycisk HTML mi nie działa.
isso
7.04.2008, 20:54:22
skorzystaj z tego kodu

[HTML] pobierz, plaintext 
  1. <div style="text-align: center">
  2.  <div style="text-align: center; width: 800px; background-color: #EDEDED">
  3.  tekst
  4.  </div>
  5.  </div>
[HTML] pobierz, plaintext


a zeby dodać htm to wystarczy uzyc -> [ html] [/html]
Pablo128
12.04.2008, 19:28:30
Udało mi się zdziałać coś takiego:

index.html
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  4. </head>
  5. <link rel="stylesheet" href="styl.css" type="text/css">
  6. <body>
  7. <div class=naglowek>
  8. </div>
  9. <div id=tlo>
  10.  
  11.      <div class=nawigacja>
  12.           nawigacja
  13.      </div>
  14.  
  15.      <div class=tresc>
  16.  
  17.        treść
  18.  
  19.      </div>
  20. </div>
  21. <div class=stopka>     Stopka </div>
  22. </body>
  23. </html>
[HTML] pobierz, plaintext


styl.css
[HTML] pobierz, plaintext 
  1. body {
  2. background-image:url(grafika/tlo.gif);
  3. text-align: left;
  4. padding: 0;
  5. margin: 0;
  6. font-family: Tahoma, sans-serif;
  7. color: #3b3b3b;
  8. }
  9.  
  10. .naglowek {
  11. background-image:url(grafika/naglowek.gif); 
  12. margin:0 auto;
  13. position: relative;
  14. left: 0px; 
  15. top: 105px; 
  16. width: 875px; 
  17. height: 80px; 
  18. padding: 3px;
  19. padding-right: 20px;
  20. }
  21.  
  22. #tlo {
  23. background-color: #FFFFFF; 
  24. position: relative;
  25. margin:0 auto; 
  26. left: 0px; 
  27. top: 105px; 
  28. width: 874px; 
  29. height: 250px auto !important;  
  30. padding: 3px;
  31. padding-right: 20px;
  32. }
  33.  
  34.  
  35. .tresc {
  36. background-color: #FFFFFF; 
  37. position: relative;
  38. margin:0 auto; 
  39. left: 110px; 
  40. top: -160px; 
  41. width: 660px; 
  42. height: 450px auto !important;
  43. }
  44.  
  45. .nawigacja {
  46. background-color: #B4D66C; 
  47. position: relative;
  48. margin:0 auto; 
  49. left: -332px; 
  50. top: -19px; 
  51. width: 215px;
  52. height: 200px auto !important; 
  53. }
  54.  
  55. .stopka {
  56. background-image:url(grafika/stopka.gif); 
  57. margin:0 auto;
  58. position: relative;
  59. left: 0px; 
  60. top: 105px; 
  61. width: 875px; 
  62. height: 30px; 
  63. padding: 3px;
  64. padding-right: 20px;
  65. }
[HTML] pobierz, plaintext





Wszystko w porządku w firefoxie, niestety w IE totalna masakra. Proszę o pomoc.

Proszę o przetestowanie kodu i poprawienie. Z góry dzięki!
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.