Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML]Padding w menu, Padding w menu
Bellum
post
Post #1





Grupa: Zarejestrowani
Postów: 28
Pomógł: 0
Dołączył: 2.03.2010
Skąd: ta pewność?

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


Witam, w praktyce stosuję takie oto rozwiązanie, jeżeli chcę nadać odpowiedni odstęp od krawędzi komórki np: tekstowi po 5px z każdej strony, to muszę zastosować zagnieżdżenie diwów w którym jeden z nich ma z góry określony rozmiar. Bez takiego rozwiązania zamiast odstępu tekstu mamy efekt uboczny w stylu powiększenia się również diva... Przykład: 1: <article> 2: <secton> zagnieżdżenie i wszystko działa cacy, tekst ma odpowiedni odstęp a komórka zachowała pierwotny rozmiar. Teraz ciemna strona mocy kodowania... chciałem nadać paddnig w menu, cóż kombinuję już od godziny co by tu zrobić aby ul a:link, ul a:visited po nadaniu padding rozmieścił odnośniki w zakresie z góry założonemu rozmiarowi komórki, jak na przykładzie artykułu. Może mam sklerozę albo nie pamiętam co źle robię.

  1. <!DOCTYPE html><html>
  2. <meta charset="UTF-8">
  3. <title>H5</title>
  4. <link rel="stylesheet" href="firefox.css" />
  5. </head>
  6. <header>
  7. Header
  8. </header>
  9. <nav>
  10. <section class="s2">
  11. <ul>
  12. <li><a href="http://">link</a></li>
  13. <li><a href="http://">link</a></li>
  14. <li><a href="http://">link</a></li>
  15. <li><a href="http://">link</a></li>
  16. <li><a href="http://">link</a></li>
  17. </ul>
  18. </section>
  19. </nav>
  20. <article>
  21. <section class="s3">
  22. ART W SECTION
  23. </section>
  24. </article>
  25. <footer>FOOTER</footer>
  26. </body>
  27. </html>


i css

  1. html, body
  2. {background: #FFFFFF; margin: 0 auto; width: 960px;}
  3.  
  4. article, footer, header, nav, aside
  5. {display: block;}
  6.  
  7. nav
  8. {float: left; width: 200px; background: #ccc; margin-right: 10px;}
  9.  
  10. .s2 ul, ul li {
  11. display: block;
  12. list-style: none;
  13. margin: 0;
  14. padding: 0;}
  15.  
  16. .s2 ul {
  17. width: 200px;}
  18.  
  19. .s2 ul a:link, ul a:visited {
  20. display: block;
  21. width: 200px;
  22. text-decoration: none;
  23. background-color: #ccceee;
  24. color: #000;
  25. padding: 5px;}
  26.  
  27. article
  28. {float: left; width: 750px; background: #ccc;}
  29. .s3
  30. {padding: 5px;}
  31.  
  32. footer
  33. {clear: both;}


Ten post edytował Bellum 5.04.2011, 16:00:08


--------------------
C++ mie pokonało ale z PHP walczę jak mogę!
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 20.08.2025 - 20:36