Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Obramowanie złożone z tabelki (jak można inaczej?)
ignas1987
post 18.05.2009, 19:46:01
Post #1





Grupa: Zarejestrowani
Postów: 78
Pomógł: 3
Dołączył: 10.11.2008
Skąd: Radom

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

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

Ten post edytował ignas1987 18.05.2009, 19:48:37


--------------------
Kod
Kiedyś Windows
Teraz Linux
A kiedyś, przed kiedyś Workbench
Go to the top of the page
+Quote Post
taktu
post 18.05.2009, 20:06:51
Post #2





Grupa: Zarejestrowani
Postów: 89
Pomógł: 7
Dołączył: 19.05.2008

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

proponuje w pierwszej kolejności przepisać stronę na divy, tu masz przykład

http://www.456bereastreet.com/lab/developi...l/finished.html


--------------------
http://forum.php.pl/index.php?showtopic=459&st=0 :)
Go to the top of the page
+Quote Post
ignas1987
post 18.05.2009, 20:12:33
Post #3





Grupa: Zarejestrowani
Postów: 78
Pomógł: 3
Dołączył: 10.11.2008
Skąd: Radom

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

@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


--------------------
Kod
Kiedyś Windows
Teraz Linux
A kiedyś, przed kiedyś Workbench
Go to the top of the page
+Quote Post
bartek6949
post 18.05.2009, 20:17:03
Post #4





Grupa: Zarejestrowani
Postów: 89
Pomógł: 1
Dołączył: 18.05.2009

Ostrzeżenie: (10%)
X----

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.
Go to the top of the page
+Quote Post
ignas1987
post 18.05.2009, 20:21:05
Post #5





Grupa: Zarejestrowani
Postów: 78
Pomógł: 3
Dołączył: 10.11.2008
Skąd: Radom

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

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.


--------------------
Kod
Kiedyś Windows
Teraz Linux
A kiedyś, przed kiedyś Workbench
Go to the top of the page
+Quote Post
bartek6949
post 18.05.2009, 20:33:34
Post #6





Grupa: Zarejestrowani
Postów: 89
Pomógł: 1
Dołączył: 18.05.2009

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
ignas1987
post 18.05.2009, 20:38:04
Post #7





Grupa: Zarejestrowani
Postów: 78
Pomógł: 3
Dołączył: 10.11.2008
Skąd: Radom

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

uuuu... Zablokowana zawartość... rysunków nie podejrze, ale już wiem chyba o co chodzi winksmiley.jpg Dzięki


--------------------
Kod
Kiedyś Windows
Teraz Linux
A kiedyś, przed kiedyś Workbench
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 15.07.2025 - 08:16
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn