Forum PHP.pl > [CSS] Problem z wyśrodkowaniem

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Problem z wyśrodkowaniem

grzehotnik

16.02.2009, 23:01:44

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 
<html>
<head>
<title>Przyklad tabel w css</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style2.css" />
</head>
<body>
 
<div class="tabela">
 
<span class="liniatop">
KATEGORIE
</span>
 
<SPAN class="tlo">
TREŚĆ STRONY
</SPAN>
 
</div>
 
</body>
</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

likemandrake

16.02.2009, 23:21:35

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.

jezoo

24.02.2009, 11:35:50

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

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.