Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Obramowanie złożone z tabelki (jak można inaczej?)
Forum PHP.pl > Forum > Przedszkole
ignas1987
18.05.2009, 19:46:01
Witam,
Mam pytanie tego rodzaju: mianowicie... Czy istnieje taki sposób (napewno istnieje ale ja go nie znam ;P) żeby obramowanie np. menu tak jak na mojej stronie nie układać z tabelki...questionmark.gif To jest straszne jak się patrzy w źródło strony (aż mnie wzdryga)... A tak poza tym, to chce przerobić moją stronę żeby wszystkie tabelki zamienić na div... układ już mniej więcej mam zrobiony... ale nie umiem wszystkiego umieścić na środku strony (Wszystko przykleja się do lewej strony). [edit] zapomniałem dodać że obramowanie składa się z poszczególnych obrazków [/edit] zresztą możecie wejśc na stronę i sprawdzić ;P
Dzięki za pomoc winksmiley.jpg
taktu
18.05.2009, 20:06:51
proponuje w pierwszej kolejności przepisać stronę na divy, tu masz przykład

http://www.456bereastreet.com/lab/developi...l/finished.html
ignas1987
18.05.2009, 20:12:33
@taktu - ogólnie już się zagłębiałem w ten temat... ale qrczaki... nie mogę wyśrodkować całości... wszystko przykleja mi sie do lewej strony... nawet tabelkę (bleeee) wstawiłem żeby wyśrodkować wszystkie divy ale to nic nie daje... Co robie źle? ;> sad.gif dobrze że na codzień nie tworze stron... to ciężka praca ... no ale ja wole sieci komputerowy a strony... może sie kiedyś naucze je pisać ;P
bartek6949
18.05.2009, 20:17:03
Robienie strony za pomoca div jest bardzo proste jesli masz jakom kolwiek wiedze na temat css powinienes se poradzic
ale nawszelki wypadek wrzuce troszke kodu
Przykladowy uklad strony podobny do ukladu twojej strony.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <html>
  4. <head>
  5. <meta name="generator" content="WebSite PRO 4.3" />
  6. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
  7. <meta name="author" content="Autor_dokumentu">
  8. <meta name="description" content="Opis">
  9. <title>Bez Tytułu</title>
  10. <!-- Ladujemy style z zewnetrznego pliku css -->
  11.   <link rel="stylesheet" type="text/css" href="style.css">
  12. </head>
  13. <body>
  14. <!-- Glowny blok strony -->
  15. <div class="glowny">
  16. <!-- Twoje logo -->
  17. <div><img src="img/logo.jpg" alt=""></div>
  18. <!-- lewe menu -->
  19. <div class="lewa">
  20. <!-- gorny obrazek menu -->
  21. <div><img src="img/menub1.gif" alt=""></div>
  22. <!-- tlo menu -->
  23. <div class="mtlo">
  24. <!-- wlasciwosci menu -->
  25. <ul class="menu">
  26. <li><a href="#">Tutaj wpisz link</a></li>
  27. <li><a href="#">Tutaj wpisz link</a></li>
  28. <li><a href="#">Tutaj wpisz link</a></li>
  29. <li><a href="#">Tutaj wpisz link</a></li>
  30. <li><a href="#">Tutaj wpisz link</a></li>
  31. <li><a href="#">Tutaj wpisz link</a></li>
  32. <li><a href="#">Tutaj wpisz link</a></li>
  33. </ul>
  34. </div>
  35. <!-- koniec menu -->
  36. <div><img src="img/menub2.gif" alt=""></div>
  37. </div>
  38. <!-- srodek strony -->
  39. <div class="srodek">
  40. <!-- goeny obrazek srodka strony -->
  41. <div><img src="img/menus1.gif" alt=""></div>
  42. <!-- wlasciwosci srodka strony  -->
  43. <div class="mtlo2">twoj tekst twoj tekst twoj tekst twoj
  44. tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst
  45. twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj
  46. tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst
  47. twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj
  48. tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst
  49. twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj
  50. tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst twoj tekst
  51. twoj tekst twoj tekst <br>
  52. </div>
  53. <!-- dolny obrazek strony -->
  54. <div><img src="img/menus2.gif" alt=""></div>
  55. <br>
  56. </div>
  57. <!-- stopka strony -->
  58. <div><img src="img/stopka.jpg" alt=""></div>
  59. </div>
  60. </body>
  61. </html>
[HTML] pobierz, plaintext

a tu plik style.css
[HTML] pobierz, plaintext 
  1. body{
  2.        background:#c6daff;
  3.        padding:0px;
  4.        margin:0px;
  5.        }
  6. div,td{
  7.        font-family:Verdana, Arial, Helvetica, sans-serif;
  8.        font-size:12px;
  9.        }
  10. .glowny{background:url(img/tlo.gif);
  11.     width: 794px;
  12.     margin:auto;}
  13.  
  14. .lewa{
  15.        padding:10px;
  16.        float: left;
  17.        width: 156px;
  18. }
  19.  
  20. .mtlo{
  21.        background:url(img/mtlo.gif);
  22.        padding: 2px 3px 1px 3px;
  23.        margin:0px;
  24.        }
  25.  
  26. .srodek{
  27.        background:url(img/menus.gif);
  28.        padding:11px 4px 10px 4px;
  29.        text-align:center;
  30.        color:black;
  31.        font-weight:bold;
  32.        }
  33. .mtlo2{
  34.        background:url(img/mtlo2.gif);
  35.        padding: 0px 4px 0px 4px;
  36.        margin:0px;
  37.        }
  38. .menu{
  39.        list-style: none;
  40.        margin:0px;
  41.        margin-left:1px;
  42.        padding:0px;
  43. }
  44. .menu li a{
  45.        display:block;
  46.        width:144px;
  47.        padding:3px 0px 3px 3px;
  48.        background-color:#6199ff;
  49.        border-bottom:1px solid black;
  50.        color:black;
  51.        font-size:10px;
  52.  
  53.        text-decoration:none;
  54. }
  55.  
  56.  
  57. .menu li a:hover{
  58.        background-color:#96bbff;
  59.        border-bottom:1px solid black;
  60.        color:white;
  61.        text-decoration:none;
  62.        font-size:10px;
  63.  
  64. }
[HTML] pobierz, plaintext

Mam nadzieje ze sobie poradzisz.
ignas1987
18.05.2009, 20:21:05
hehehe winksmiley.jpg i powiem Ci, że tym postem dodaje Ci punkt! biggrin.gif:D:D O to mniej więcej mi chodziło... Jednak to 95% tego co chciałem się dowiedzieć. Co z tym obramowaniem za pomocą obrazków? Oglądaliście moją stronę od środka? jak zamienić te 8 komórek na co innego, żeby to nie było takie rozlazłe... (bleee) jednym słowem.
bartek6949
18.05.2009, 20:33:34
Z tymi obrazkami to trudno mi wytlumaczyc ale sprubuje powinienes miec jeden cienki obrazek jako tlo tak jak na mojej stronie moja strona a tu link do tla obrazek
najlepiej aby tlo mialo 1 px u mnie takie szerokie bo jest wzor gorne czes menu powino byc jednym obrakiem gorna czesc
i dolna tez
Dolna czesc
I to podkladasz do tego szblonu co ci podalem w czesniej
ignas1987
18.05.2009, 20:38:04
uuuu... Zablokowana zawartość... rysunków nie podejrze, ale już wiem chyba o co chodzi winksmiley.jpg Dzięki
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.