Forum PHP.pl > [CSS][HTML]Padding w menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Bellum

5.04.2011, 15:50:55

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 
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>H5</title>
<link rel="stylesheet" href="firefox.css" />
</head>
<body>
	<header>
Header
	</header>
<nav>
	<section class="s2">
		<ul>
			<li><a href="http://">link</a></li>
			<li><a href="http://">link</a></li>
			<li><a href="http://">link</a></li>
			<li><a href="http://">link</a></li>
			<li><a href="http://">link</a></li>
		</ul>
	</section>
</nav>
	<article>
		<section class="s3">
		ART W SECTION
		</section>
	</article>
		<footer>FOOTER</footer>
</body>
</html>
[HTML] pobierz, plaintext

i css

[HTML] pobierz, plaintext 
html, body
	{background: #FFFFFF; margin: 0 auto; width: 960px;}
 
article, footer, header, nav, aside
	{display: block;}
 
nav
	{float: left; width: 200px; background: #ccc; margin-right: 10px;}
 
	.s2 ul, ul li {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;}
 
	.s2 ul {
	width: 200px;}
 
	.s2  ul a:link, ul a:visited {
	display: block;
	width: 200px;
	text-decoration: none;
	background-color: #ccceee;
	color: #000;
	padding: 5px;}	
 
article
	{float: left; width: 750px; background: #ccc;}
	.s3
		{padding: 5px;}
 
footer
	{clear: both;}
[HTML] pobierz, plaintext

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.

Bellum

5.04.2011, 16:24:44

Cytat(melior @ 5.04.2011, 16:59:52 )

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 :/

webfreak

5.04.2011, 18:15:39

Cytat(melior @ 5.04.2011, 15:59:52 )

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

melior

5.04.2011, 19:20:18

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.