Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [html][css] - skalowane tlo komorki
no_face
post 30.07.2006, 14:57:57
Post #1





Grupa: Zarejestrowani
Postów: 346
Pomógł: 23
Dołączył: 28.11.2004

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


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:

  1. </head>
  2. <body>
  3.  
  4. <table border="1">
  5.  <tr>
  6.    <td width="150px" align="center">procent</td>
  7.  </tr>
  8.  <tr>
  9.    <td><div style="width:20%;background:red"><center>20%</center></div></td>
  10.  </tr>
  11. </table>
  12.  
  13. </body>
  14. </html>

Niestety efektem jest cos takiego:

Nie wiem jak to zrobic prosze o rade.
Go to the top of the page
+Quote Post
kossa
post 30.07.2006, 15:11:01
Post #2





Grupa: Zarejestrowani
Postów: 1 165
Pomógł: 9
Dołączył: 9.04.2002
Skąd: Toruń

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


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

Cytat
<td><div style="width:20%;background:red"><center>20%</center></div></td>


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

Ten post edytował kossa 30.07.2006, 15:13:35


--------------------
Go to the top of the page
+Quote Post
no_face
post 30.07.2006, 15:31:31
Post #3





Grupa: Zarejestrowani
Postów: 346
Pomógł: 23
Dołączył: 28.11.2004

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


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


Kod
<td><div style="width:20%;background:red">&nbsp;</div><div><center>20%</center></div></td>


Ten post edytował no_face 30.07.2006, 15:32:12
Go to the top of the page
+Quote Post
kossa
post 31.07.2006, 09:19:57
Post #4





Grupa: Zarejestrowani
Postów: 1 165
Pomógł: 9
Dołączył: 9.04.2002
Skąd: Toruń

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


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


--------------------
Go to the top of the page
+Quote Post
no_face
post 2.08.2006, 21:42:00
Post #5





Grupa: Zarejestrowani
Postów: 346
Pomógł: 23
Dołączył: 28.11.2004

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


  1. </head>
  2. <body>
  3.  
  4. <table border="1">
  5.  <tr>
  6.    <td width="150px" align="center">procent</td>
  7.  </tr>
  8.  <tr>
  9.    <td><p style="height:25;width:20%;background:red; position: relative; z-index: 1">&nbsp;</p></td>
  10.  </tr>
  11. </table>
  12. <p style="position: relative; z-index: 2;left: 65px; top: -42px;">20%</p>
  13.  
  14. </body>
  15. </html>

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.

Ten post edytował no_face 2.08.2006, 21:42:30
Go to the top of the page
+Quote Post
-Gość-
post 3.08.2006, 12:59:07
Post #6





Goście







A moze position: absolute?
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 10.07.2025 - 05:34