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

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


i css

[HTML] pobierz, plaintext 
  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;}
[HTML] pobierz, plaintext


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%)
-----

Powiem Ci tak:

margin + padding + width = constant

Innymi słowy, jeżeli chcesz zwiększyć margin, lub padding, ale zachować width stałe to musisz go zmniejszyć o tyle ile zwiększył łącznie te dwa pierwsze.
Go to the top of the page
+Quote Post
Bellum
post
Post #3





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

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

Cytat(melior @ 5.04.2011, 16:59:52 ) *
Powiem Ci tak:

margin + padding + width = constant

Innymi słowy, jeżeli chcesz zwiększyć margin, lub padding, ale zachować width stałe to musisz go zmniejszyć o tyle ile zwiększył łącznie te dwa pierwsze.

Mam to na końcu języka mówiąc potocznie, przeglądam teraz jakiekolwiek darmowe szablony zaglądam w ich arkusze stylu i nic, nikt tego nie stosuję? Najczęściej widzę jakieś wstawione obrazki przed link by miał on odstęp od lewej krawędzi i nadany w padding 9px 0 gdyż z lewym i prawym, już zaczynają się jazdy...

@edit

Już sobie poradziłem, zwiększając padding redukujemy jednocześnie width w ul i ul a:link, ul a:visited. Tak jak pisałeś, myślałem, że jest jakieś inne jeszcze rozwiązanie :/

Ten post edytował Bellum 5.04.2011, 16:41:33
Go to the top of the page
+Quote Post

Posty w temacie
- Bellum   [CSS][HTML]Padding w menu   5.04.2011, 15:50:55
- - melior   Powiem Ci tak: margin + padding + width = constan...   5.04.2011, 15:59:52
|- - Bellum   Cytat(melior @ 5.04.2011, 16:59:52 ) ...   5.04.2011, 16:24:44
- - webfreak   Cytat(melior @ 5.04.2011, 15:59:52 ) ...   5.04.2011, 18:15:39
- - melior   Rozmiar samego div'a się nie zwiększy, ale zwi...   5.04.2011, 19:20:18

« 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: 6.10.2025 - 02:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn