Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [html][css]Problem z wyśrodkowaniem strony - CSS i div'y, Potrzebuję indywidualnej pomocy, z góry dzięki!
Pablo128
post
Post #1





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

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
Powód edycji: dodałem tagi (cysiaczek)
Go to the top of the page
+Quote Post
Mlodycompany
post
Post #2





Grupa: Zarejestrowani
Postów: 910
Pomógł: 44
Dołączył: 20.02.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

align:center
Go to the top of the page
+Quote Post
grzesiek_g
post
Post #3





Grupa: Zarejestrowani
Postów: 249
Pomógł: 30
Dołączył: 18.07.2007

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

[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.

Ten post edytował grzesiek_g 5.04.2008, 22:25:10
Go to the top of the page
+Quote Post
Mlodycompany
post
Post #4





Grupa: Zarejestrowani
Postów: 910
Pomógł: 44
Dołączył: 20.02.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

bylo nie bylo ale dziala
Go to the top of the page
+Quote Post
Pablo128
post
Post #5





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

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.
Go to the top of the page
+Quote Post
Mlodycompany
post
Post #6





Grupa: Zarejestrowani
Postów: 910
Pomógł: 44
Dołączył: 20.02.2008
Skąd: Łódź

Ostrzeżenie: (20%)
X----

nie wyruwnuje do lewej tylko jesli juz to do srodka
Go to the top of the page
+Quote Post
Pablo128
post
Post #7





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

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!
Go to the top of the page
+Quote Post
isso
post
Post #8





Grupa: Zarejestrowani
Postów: 296
Pomógł: 32
Dołączył: 3.01.2005

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

to mają być 4 zagnieżdżone div`y ?jestes tego pewien ?
Go to the top of the page
+Quote Post
Pablo128
post
Post #9





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

eee... NIe. Trzy div'y i tło!
Go to the top of the page
+Quote Post
isso
post
Post #10





Grupa: Zarejestrowani
Postów: 296
Pomógł: 32
Dołączył: 3.01.2005

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

to weź pododawaj zamknięcia div`ów tam gdzie mają byc ... ;] i używaj znacznika html do podawania kodu
Go to the top of the page
+Quote Post
Pablo128
post
Post #11





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

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.
Go to the top of the page
+Quote Post
isso
post
Post #12





Grupa: Zarejestrowani
Postów: 296
Pomógł: 32
Dołączył: 3.01.2005

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

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]

Ten post edytował isso 7.04.2008, 20:54:47
Go to the top of the page
+Quote Post
Pablo128
post
Post #13





Grupa: Zarejestrowani
Postów: 59
Pomógł: 2
Dołączył: 3.03.2008

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

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!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: 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 Aktualny czas: 20.12.2025 - 15:09
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn