Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Problem z wyśrodkowaniem
grzehotnik
post 16.02.2009, 23:01:44
Post #1





Grupa: Zarejestrowani
Postów: 76
Pomógł: 0
Dołączył: 8.01.2009

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

Witam
Chcę stworzyć stronę, która składa się z 3 obrazków.
Na samym środku jest obrazek główny(jpg), nie zajmuje on całej powierzchnii tylko
oktrślony obszar w centrum ekranu.
Powyżej jest linia(gif) (pomiędzy nią i obrazkiem jest pusta przestrzeń), ale linia zaczyna się dokładnie w tym
samym miejscu co rysunek i kończy też tam gdzie rusunek. I analogicznie jest na dole.
Kończy się rysunek jest wolna przestrzeń i linia dolna.
Chcę pomiędzy linią górną i rysunkiem wstawić elementy menu, a pomiędzy linią dolną i rysunkiem
inne elementy (np kategorie).
Treść strony chcę natomiast umieścić na rysunku.
Oto style:
Kod
DIV.tabela {
  overflow: hidden; /* clearance */
  width: 780px;
  display: table;}
.tlo {
  background-image: url(image/glownezdjecie.jpg);
  position: absolute;
  width: 780px;
  height: 500px;
  top: 50%;
  left: 50%;
  margin-left: -390px;
  margin-top: -280px;
  display: table-cell;
  vertical-align: center;}
.liniatop {
  background-image: url(image/linia_top.gif);
  position: absolute;
  top: 10%;
  margin-left: auto;
  width: 780px;
  height: 3px;
  left: 0%;
  display: table-cell;}

I ich implementacja:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Przyklad tabel w css</title>
  4. <LINK REL="stylesheet" TYPE="text/css" HREF="style2.css" />
  5. </head>
  6. <body>
  7.  
  8. <div class="tabela">
  9.  
  10. <span class="liniatop">
  11. KATEGORIE
  12. </span>
  13.  
  14. <SPAN class="tlo">
  15. TREŚĆ STRONY
  16. </SPAN>
  17.  
  18. </div>
  19.  
  20. </body>
  21. </html>
[HTML] pobierz, plaintext

Jest to tylko pierwsza linia i tło. Linia pojawia się nad obrazkiem i tekst mogę wpisywać pomiędzy nimi.
Jeśli ustawiam ręcznie jmarginesy liny to jest u mnie ok, ale u kumpla, który ma inną rozdzielczość ekranu nie jest już to na środku.
Czy jest to prościej zrobić na tablicach, czy tak jak ja to robie?

Proszę o pomoc

OK zrobiłem sam z użyciem display: table i display: table-row.
Temat do zamknięcia

Ten post edytował grzehotnik 16.02.2009, 18:12:08
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
likemandrake
post 16.02.2009, 23:21:35
Post #2





Grupa: Zarejestrowani
Postów: 175
Pomógł: 17
Dołączył: 23.06.2006

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

Jeżeli robisz stronę dla sieci, to rozwiązanie z display: table-* jest złe, ponieważ IE6 tego nie obsługuje, nie wiem czy również IE7.


--------------------
serwiswww.pl
Go to the top of the page
+Quote Post
jezoo
post 24.02.2009, 11:35:50
Post #3





Grupa: Zarejestrowani
Postów: 92
Pomógł: 3
Dołączył: 4.04.2006

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

hmm, mnie sie wydaje, ze to nie ten dzial, to tak na marginesie, natomiast jezeli chodzi o problem to zastosuj zagniezdzone div'y, ja tak robie i wszystko dziala jak talala
Go to the top of the page
+Quote Post
« Następny starszy · PHP · 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: 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 Wersja Lo-Fi Aktualny czas: 14.08.2025 - 09:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn