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


--------------------
C++ mie pokonało ale z PHP walczę jak mogę!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
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


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





Grupa: Zarejestrowani
Postów: 77
Pomógł: 8
Dołączył: 29.03.2011
Skąd: Londyn

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

Cytat(melior @ 5.04.2011, 15: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.



jeslu uzywasz margin to rozmiar się nie zwiększa więc nie musisz go pomniejszać o wartość margin natomiast wartosc padding odejmujesz od wartosci width


--------------------
http://szkolahtml.pl
Go to the top of the page
+Quote Post
melior
post
Post #5





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
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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