Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem z szablonem
Forum PHP.pl > Forum > Przedszkole
kamil_lk
27.10.2009, 14:07:41
Witam. Zacząłemrobić szablon, ale niestety rozjeżdża mi się. Proszę o sprawdzenie co tutaj jest źle.



index.hmtl
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5. <head>
  6.   <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  7.   <LINK REL="STYLESHEET" HREF="style/arkusz.css" TYPE="text/css">
  8. </head>
  9. <body>
  10.  
  11. <div id="cialo">
  12.  
  13.      <div><IMG SRC="images/gora1.jpg" WIDTH="944" HEIGHT="3" BORDER="0"></div>
  14.      <div><IMG SRC="images/logo.jpg" WIDTH="944" HEIGHT="126" BORDER="0"></div>
  15.      <div id="nawigacja">
  16.  
  17.           <div id="naw"><IMG SRC="images/naw_01.jpg" WIDTH="287" HEIGHT="72" BORDER="0"></div>
  18.           <div id="naw"><IMG SRC="images/start.jpg" WIDTH="75" HEIGHT="72" BORDER="0"></div>
  19.           <div id="naw"><IMG SRC="images/projekty.jpg" WIDTH="99" HEIGHT="72" BORDER="0"></div>
  20.           <div id="naw"><IMG SRC="images/partnerzy.jpg" WIDTH="107" HEIGHT="72" BORDER="0"></div>
  21.           <div id="naw"><IMG SRC="images/kontakt.jpg" WIDTH="90" HEIGHT="72" BORDER="0"></div>
  22.           <div id="naw"><IMG SRC="images/naw_06.jpg" WIDTH="286" HEIGHT="72" BORDER="0"></div>
  23.  
  24.      </div>
  25.  
  26.  
  27.      <div ><IMG SRC="images/gora.jpg" WIDTH="944" HEIGHT="20" BORDER="0"></div>
  28.      <div style="background-image: url(images/srodek.jpg); height: 350px; padding-left: 30px">
  29.  
  30.           <div id="tresc">
  31.                <div ><IMG SRC="images/tre_top.jpg" WIDTH="401" HEIGHT="4" BORDER="0"></div>
  32.                <div style="background-image: url(images/tre_cent.jpg); height: 300px"></div>
  33.                <div ><IMG SRC="images/tre_bot.jpg" WIDTH="401" HEIGHT="4" BORDER="0"></div>
  34.            </div>
  35.  
  36.            <div id="menu">
  37.                <div ><IMG SRC="images/nawigacja.jpg" WIDTH="244" HEIGHT="34" BORDER="0"></div>
  38.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  39.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  40.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  41.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  42.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  43.                <div style="background-image: url(images/link.jpg); height: 28px;"></div>
  44.                <div ></div>
  45.            </div>
  46.  
  47.            <div id="reklama">
  48.                <div ><IMG SRC="images/reklama.jpg" WIDTH="232" HEIGHT="23" BORDER="0"></div>
  49.                <div style="background-image: url(images/link_reklama.jpg); height: 21px;"></div>
  50.                <div style="background-image: url(images/link_reklama.jpg); height: 21px;"></div>
  51.                <div style="background-image: url(images/link_reklama.jpg); height: 21px;"></div>
  52.                <div ></div>
  53.            </div>
  54.  
  55.      </div>
  56.      <div><IMG SRC="images/dol.jpg" WIDTH="944" HEIGHT="34" BORDER="0"></div>
  57.  
  58. </div>
  59.  
  60. </body>
  61. </html>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1.  body {
  2.         background-color: #1c1c1c;
  3.         margin: 50 0 50 0;
  4.         padding: 0;
  5.         text-align:center;
  6.         font: white;
  7.     }
  8.  
  9. img {
  10. outline: none;
  11. border: none;
  12. }
  13.  
  14. div {
  15.     margin: 0px;
  16.     padding: 0px;
  17.     }
  18.  
  19. #nawigacja {
  20.            width: 944px;
  21.            }
  22. #naw {
  23.      float: left;
  24.      }
  25.  
  26. #tresc {
  27.        width: 401px;
  28.        margin-right: 15px;
  29.        float: left;
  30.    }
  31.  
  32. #menu {
  33.       width: 244px;
  34.       float: left;
  35.       }
  36.  
  37. #reklama {
  38.          width: 232px;
  39.          float: left;
  40.          }
  41.  
  42. #nawigacja {
  43.            width: 942px;
  44.            }
  45.  
  46. #cialo {
  47.        width: 944px;
  48.        margin: auto;
  49.        }
[HTML] pobierz, plaintext
askone
27.10.2009, 14:19:16
Hej

a masz może gdzieś wersję online?? Byłoby łatwiej winksmiley.jpg

Póki co mogę powiedzieć, że problemy z menu możesz rozwiązać poprzez zastosowanie ul i li. W elemencie ul dajesz background image, a poszczególne linki w li. Wtedy wypełnienie nie powinno przeskakiwać Ci do nowej linii winksmiley.jpg

Pozdrawiam
kamil_lk
27.10.2009, 14:20:04
http://www.kninfor.yoyo.pl/

po wrzuceniu na serwer widzę że nie ma już przerw pomiędzy divami smile.gif problem jeszcze leży z nawigacją pod menu.. dlaczego przeskakuje na dół?
askone
27.10.2009, 14:37:54
Problem leży w zbyt dużej wartości width dla diva wypełniającego... Jeśli zmniejszysz tę wartośc to div nie przeskoczy.

Ze swej strony polecam jednak zbudowanie menu w oparciu o elementy ul i li.
  • Dajesz <div id=menu>. W niego ładujesz background image
  • Później dajesz <ul>
  • Dla każdej opcji dajesz <li> z <a> w środku
  • dajesz odpowiedniego css'a i tyle
Wrzuć w google pytanie o menu css i będziesz miał setki wyników

ps. a jak nie chcesz szukać to podejrzyj kod menu na stronie forum, zobaczysz co i jak winksmiley.jpg

Pozdro
kamil_lk
27.10.2009, 14:44:25
Cytat(fly474 @ 27.10.2009, 14:37:54 ) *
Ze swej strony polecam jednak zbudowanie menu w oparciu o elementy ul i li.


mowa tutaj o menu tym niżej? środkowej kolumnie, tak?
askone
27.10.2009, 14:48:55
Pisałem ogólnie o menu.

Każde menu jesteś w stanie zbudować w oparciu o elementy listy. W zależności czy dasz w css display:block, czy też display:inline dostaniesz menu pionowe lub też poziome. Dalsze zabawy z css pozwolą Ci je jeszcze bardziej rozbudować.

Podejrzyj główne menu na forum.php.pl (wortla,forum,phpedia....) w firebugu...

ps. Jeśli nie będziesz wiedział co i jak to pisz na pw - pomogę winksmiley.jpg

Pozdrawiam
kamil_lk
27.10.2009, 15:02:47
coraz bardziej podoba mi sie css winksmiley.jpg

mam jeszcze pytanie odnośnie powtarzania się tła..

dokładnie to chodzi mi o tą linijkę
[HTML] pobierz, plaintext 
  1. <div style="background-image: url(images/srodek.jpg); height: 350px; padding-left: 30px">
[HTML] pobierz, plaintext


jak mam zrobić żeby tło się rozciągało samo? bo gdy wstawiam zamaist height:350px funkcje background-repeat: repeat-y to nic nie daje..
askone
27.10.2009, 18:55:13
powinno działać - a jesli chodzi o css to poczytaj na www.w3schools.com

Pozdrawiam
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.