Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: sterowanie taelą za pomocą css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
koneser69
27.09.2010, 20:16:50
Witam

1.Jak uzyskać taki efekt za pomocą tabelki i CSS?? Chodzi mi o to aby komórki (td) posiadały border ale nie pełny tylko taki jak na obrazku questionmark.gif


Uploaded with ImageShack.us


2. Zrobiłem nagłówek strony oparty na tabelce. Poniżej kod HTML i CSS. Problem w tym że Firefox wyświetla nagłówek strony (logo) wyśrodkowane na stronie a IE i Opera przesunięte do lewej strony strony www i obrazek się powiela.

[HTML] pobierz, plaintext 
  1. <table border="0" width="100%" cellspacing="0" cellpadding="0" class="header">
  2.   <tr class="header">
  3.     <td class="headerNazwa">link</td>
  4.     <td class="headerPanel">
  5.     <a href="#" class="headerNavi"><</a>
  6.     <a href="#" class="headerNavi"><</a>
  7.      </td>
  8.   </tr>
  9. </table>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. table.header
  2. {
  3. 	width: 900px;
  4. 	margin: 0 auto;
  5. 	border: 0px solid;
  6. }
  7.  
  8. TR.header {
  9.   background: url('images/layout/header.gif') center no-repeat ;
  10.   height: 217px;
  11. }
[HTML] pobierz, plaintext


Jak poprawić wygląd w IE oraz w Operze??

3. czy istnieje możliwość sterowania takimi właściwościami tabeli za pomocą CSS questionmark.gif
[HTML] pobierz, plaintext 
  1. cellspacing="0" cellpadding="0"
[HTML] pobierz, plaintext
kamil4u
27.09.2010, 22:32:56
1. Nie wprost. Musiałbyś kombinować wstawiając odpowiednie elementy i dopiero je ostylowywać - ale z tym pewnie byłoby dużo zabawy.
3. http://www.cssmania.pl/csswiki/index.php?title=Cellspacing
koneser69
28.09.2010, 10:53:50
z punktem drugim już sobie poradziłem wystarczyło w body dodać styl text-align center. Ma ktoś jakiś pomysł jak się uporać z punktem 1 questionmark.gif
kamil4u
28.09.2010, 13:12:40
Tak jak Ci napisałem, nie da się wprost. Mógłbyś np. w każdej komórce tabeli wstawiać np. 4 div-a, które odpowiednio ostylujesz(pozycjonowanie i border), ktróe by imitowały takie obramowanie - możesz skorzystałbyś też z JS, coś ala(to jest źle, ale działa smile.gif ):
Kod
<style>
td{ position: relative; width: 75px; height: 75px; }
td div{ background-color: black; position: relative; }
</style>
<table>
<tbody><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody></table>

<script>
tds = document.getElementsByTagName('td');
for(i=0; td=tds[i++];){
  div = document.createElement('div');
  div.style.top = "-45px";
  div.style.left = "10%";
  div.style.height = "1px";
  div.style.width = "80%";
  td.appendChild(div);

  div = document.createElement('div');
  div.style.top = "26px";
  div.style.left = "10%";
  div.style.height = "1px";
  div.style.width = "80%";
  td.appendChild(div);
}
</script>
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.