Forum PHP.pl > [html][css] - skalowane tlo komorki

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html][css] - skalowane tlo komorki

no_face

30.07.2006, 14:57:57

Witajcie,

Prubuje uzyskac taki efekt:

Czyli tlo komorki bylo by rozciagane wg podanego procenta, przy czym napis bylby wysrodkowany w pionie i poziomie.

Probowalem troche z div'ami, napisalem taki kod:

[XML] pobierz, plaintext 
</head>
<body>
 
<table border="1">
  <tr>
    <td width="150px" align="center">procent</td>
  </tr>
  <tr>
    <td><div style="width:20%;background:red"><center>20%</center></div></td>
  </tr>
</table>
 
</body>
</html>
[XML] pobierz, plaintext

Niestety efektem jest cos takiego:

Nie wiem jak to zrobic prosze o rade.

kossa

30.07.2006, 15:11:01

Twoje <div> ma szerokość 20% szerokości komórki <td>

Cytat

dlatego tekst 20% jest tak umieszczony (w obrębie Twojego znacznika <div>)

Pokombinuj z warstwami, jedna na drugiej, najpierw warstwa z paskiem a następnie warstwa z tekstem ile procent.

Kossa

no_face

30.07.2006, 15:31:31

Probowalem zrobic warstwa na warstwie, lecz albo jedna przykrywa druga (chyba), albo jedna ogranicza druga, czy tez dostaje cos takiego:

Kod

kossa

31.07.2006, 09:19:57

To co napisałeś to są dwa znaczniki <div>, znacznik ten łamie linię, czyli nowy <div> jest w nowej lini i dlatego masz w tej chwili jedno pod drugim.

Użyć możesz właściwości warstwy w CSS i ustawić przezroczystość, choć nie jestem pewny czy wszystkie przeglądarki obsługują ten efekt oraz kolejność warstw ustalasz za pomocą parametru CSS z-index (jeśli pamięć mnie nie myli).

Łukasz

no_face

2.08.2006, 21:42:00

[XML] pobierz, plaintext 
</head>
<body>
 
<table border="1">
  <tr>
    <td width="150px" align="center">procent</td>
  </tr>
  <tr>
    <td><p style="height:25;width:20%;background:red; position: relative; z-index: 1">&nbsp;</p></td>
  </tr>
</table>
<p style="position: relative; z-index: 2;left: 65px; top: -42px;">20%</p>
 
</body>
</html>
[XML] pobierz, plaintext

Koszystajac z Twoich rad zrobilem cos takiego, teraz wyglada okej, ale powstaje problem, gdy chce tworzyc tabelke dynamicznie, takie rozwiazanie jest wielce niewygodne, dodatkowo duzo liczenia i przymierzania by dobrze to wygladalo. Dobrze byloby znalezc rozwiazanie, ktore byloby prostrze.

Edit:

Kombinowalem juz sporo i nie potrafie znalezc prostszego rozwiazania, a te ktore jest wyzej, bedzie bardzo klopotliwe. Najlepiej jakby odbywalo sie to w komorce, lub jak kolwiek latwiej, gdyz chcac zrobic nasie takich komorek, bede musial robic kosmiczne kombinacje by przyrownac napis nad tlo komorki.

Gość

3.08.2006, 12:59:07

A moze position: absolute?

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.