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





Grupa: Zarejestrowani
Postów: 68
Pomógł: 3
Dołączył: 7.12.2009

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


Rozmiar samego div'a się nie zwiększy, ale zwiększy się obszar zajmowany przez div'a. Dla menu ma to ogromne znaczenie, wtedy więc trzeba zrobić dokładnie jak pisałem.
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 9.10.2025 - 09:38