Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [htm]colspan
Forum PHP.pl > Forum > Przedszkole
Sorius
13.05.2008, 16:43:13
http://lotfclan.ovh.org/w/index.php

Pomiedzy przyciskami "home", "zapowiedzi" oraz "o stronie" i "kontakt" mam jakas przerwe. Zmieniam liczbe przy colspanach ale jest tylko gorzej. Jak powinno to wygladac ?

Kod

     <tr>
         <td colspan="3">
             <a href="index.html"
                 onmouseover="window.status='home page'; changeImages('home_page', 'images/home-page-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('home_page', 'images/home-page.jpg'); return true;"
                 onmousedown="changeImages('home_page', 'images/home-page-over.jpg'); return true;"
                 onmouseup="changeImages('home_page', 'images/home-page-over.jpg'); return true;">
                 <img name="home_page" src="images/home-page.jpg" width="87" height="40" border="0" alt="home page"></a></td>
         <td colspan="2">
             <a href="news.html"
                 onmouseover="window.status='news'; changeImages('news', 'images/news-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('news', 'images/news.jpg'); return true;"
                 onmousedown="changeImages('news', 'images/news-over.jpg'); return true;"
                 onmouseup="changeImages('news', 'images/news-over.jpg'); return true;">
                 <img name="news" src="images/news.jpg" width="130" height="40" border="0" alt="news"></a></td>
         <td colspan="5">
             <a href="features.html"
                 onmouseover="window.status='features'; changeImages('features', 'images/features-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('features', 'images/features.jpg'); return true;"
                 onmousedown="changeImages('features', 'images/features-over.jpg'); return true;"
                 onmouseup="changeImages('features', 'images/features-over.jpg'); return true;">
                 <img name="features" src="images/features.jpg" width="116" height="40" border="0" alt="features"></a></td>
         <td>
             <a href="games.html"
                 onmouseover="window.status='games'; changeImages('games', 'images/games-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('games', 'images/games.jpg'); return true;"
                 onmousedown="changeImages('games', 'images/games-over.jpg'); return true;"
                 onmouseup="changeImages('games', 'images/games-over.jpg'); return true;">
                 <img name="games" src="images/games.jpg" width="120" height="40" border="0" alt="games"></a></td>
         <td colspan="2">
             <a href="downloads.html"
                 onmouseover="window.status='downloads'; changeImages('downloads', 'images/downloads-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('downloads', 'images/downloads.jpg'); return true;"
                 onmousedown="changeImages('downloads', 'images/downloads-over.jpg'); return true;"
                 onmouseup="changeImages('downloads', 'images/downloads-over.jpg'); return true;">
                 <img name="downloads" src="images/downloads.jpg" width="116" height="40" border="0" alt="downloads"></a></td>
         <td colspan="3">
             <a href="contacts.html"
                 onmouseover="window.status='contacts'; changeImages('contacts', 'images/contacts-over.jpg'); return true;"
                 onmouseout="window.status=''; changeImages('contacts', 'images/contacts.jpg'); return true;"
                 onmousedown="changeImages('contacts', 'images/contacts-over.jpg'); return true;"
                 onmouseup="changeImages('contacts', 'images/contacts-over.jpg'); return true;">
                 <img name="contacts" src="images/contacts.jpg" width="109" height="40" border="0" alt="contacts"></a></td>
         <td>
             <img src="images/spacer.gif" width="1" height="40" alt=""></td>
     </tr>
b_chmura
13.05.2008, 16:52:12
poczytaj trochę o divach, css.

Twój kod jest...
Sorius
13.05.2008, 17:42:04
Cytat(b_chmura @ 13.05.2008, 17:52:12 ) *
poczytaj trochę o divach, css.

Twój kod jest...

Ta dzieki bardzo.... Moze ktos pomoc ?
b_chmura
13.05.2008, 17:50:31
uwierz mi, pomagam Ci. Przede wszystkim nie używaj do tego JS (ewentualnie do preloadu najechanego tła).

Poczytaj o div, css - float; a; a:hover
JaHolden
14.05.2008, 12:19:17
b_chmura ma rację

Robiąc taką stronę na tabelach, namęczysz się i stracisz masę czasu min. na takie problemy. Divy to świetne rozwiązanie, bo dzięki nim możesz rozmieszczać wsztstkie elementy strony tam gdzie chcesz, niezależnie od pozostałych a dodatkowo, elementy mogą na siebie zachodzić czego w tabelach nie możesz uzyskać. Dodatkowo wspomniane css pozwoli Ci na bardzo łatwe i szybkie zmiany choćby koloru czcionki - jedno kliknięcie i cały serwis odmieniony. W skrócie robi się to tak:

W <head> wpisz sobie: 

[HTML] pobierz, plaintext 
  1. <link href="style.css" rel="stylesheet" type="text/css" />
[HTML] pobierz, plaintext


W <body tworzysz jakiegos div'a> Jego zawartością moze to byc tekst, moze to byc obrazek, tabela itp.:

[HTML] pobierz, plaintext 
  1. <div id="jakis_tam">
  2.  <p class="text">Jakiś tam tekst.</p>
  3. </div>
[HTML] pobierz, plaintext


Jak widzisz, tekst nie jest tu w żaden sposób formatowany - wszystkim zajmie się css.

Teraz utwórz plik style.css i w nim zarządzaj wyglądem strony, dla przykładu:

[HTML] pobierz, plaintext 
  1. body { //body zawsze określa ogólne rzeczy, takie jak tło (kolor lub obrazek), rozmiar czcionki, jej kolor, rodzaj, 
  2. background: #4aa619; 
  3. font-size: 10px; 
  4. color: #000000; 
  5. font-family: Verdana, Arial, Helvetica, sans-serif; 
  6. }
  7.  
  8. div#jakis_tam //tutaj określasz diva stworzonego w body. Określasz jego położenie, rozmiar, tło, pozycję nad lub pod pozostałymi itp.
  9. {position: absolute; 
  10. top: 186px; 
  11. left: 255px; 
  12. z-index: 1; 
  13. width: 651px; 
  14. height: 700px; 
  15. background-color: #c8daa3; 
  16. }
  17.  
  18. p.text { // a tutaj formatujesz tekst. Pokazałem tylko trzy możliwości ale jest ich duuużo więcej
  19. font-size: 12px; 
  20. color: #555555; 
  21. line-height: 170%
  22. }
[HTML] pobierz, plaintext


Naprawdę warto to stosować, bo przyśpiesza i ułatwia pracę. Pokazałem Ci tylko kilka z kilkuset możliwości. Na początek poczytaj sobie tutaj: http://www.kurshtml.boo.pl/ Jeśli Cię to wciągnie, napisz na privie, to wyślę Ci zbiór najpotrzebniejszych komend w css.
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.