Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS] Problem z szablonem
kamil_lk
post
Post #1





Grupa: Zarejestrowani
Postów: 325
Pomógł: 33
Dołączył: 31.05.2008

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

Witam. Zacząłemrobić szablon, ale niestety rozjeżdża mi się. Proszę o sprawdzenie co tutaj jest źle.

(IMG:http://img137.imageshack.us/img137/9070/szablonw.jpg)

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
askone
post
Post #2





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

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 (IMG:style_emoticons/default/winksmiley.jpg)

Pozdro
Go to the top of the page
+Quote Post

Posty w temacie
- kamil_lk   [HTML][CSS] Problem z szablonem   27.10.2009, 14:07:41
- - fly474   Hej a masz może gdzieś wersję online?? Byłoby łat...   27.10.2009, 14:19:16
- - kamil_lk   http://www.kninfor.yoyo.pl/ po wrzuceniu na serwe...   27.10.2009, 14:20:04
- - fly474   Problem leży w zbyt dużej wartości width dla diva ...   27.10.2009, 14:37:54
- - kamil_lk   Cytat(fly474 @ 27.10.2009, 14:37:54 )...   27.10.2009, 14:44:25
- - fly474   Pisałem ogólnie o menu. Każde menu jesteś w stani...   27.10.2009, 14:48:55
- - kamil_lk   coraz bardziej podoba mi sie css mam jeszcze py...   27.10.2009, 15:02:47
- - fly474   powinno działać - a jesli chodzi o css to poczytaj...   27.10.2009, 18:55:13

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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