Autor Zpráva
Michalowic
Profil *
Zdravím,

při tvorbě jednoho webu jsem narazil na problém, který se mi ani po celodenním bádání nepodařilo vyřešit.
Na stránce http://mmcredit.cz/zari jsou vpravo kategorie. Pro odsazení textových popisků jsem použil padding-top:10px;, bohužel to ale kromě odsazení popisků patrně také o 10px zvětšilo div dole, takže je mezi jednotlivými kategoriemi mezera. V IE je zase pro změnu div nižší, než by měl být. Už jsem z toho fakt na prášky, nemá někdo nápad, co s tím? Zkrátka potřebuji jen odsadit textový popisek od horní hrany divu, ale tak, aby to nemělo vliv na velikost samotného divu.

CSS je zde:
#kategorie_container {
font: normal 10pt 'Calibry', Tahoma , sans-serif;
color: #444444;
position: relative;
top: 60px;
width: 230px;
height: 340px;
text-align: left; 
}


.kategorie {
background-image: url(pozadi_kategorie.png);
background-repeat: no-repeat;
width: 230px;
height: 44px;
display: block;
text-decoration: none;
padding-left: 40px;
padding-top: 10px;
}

.kategorie:hover {
background-image: url(sipka_kategorie.png);
background-repeat: no-repeat;
width: 230px;
height: 44px;
display: block;
color: white;
}

Předem moc díky za každou radu!
Keeehi
Profil
Ano, padding se započítává do celkové výšky prvku. Budeš muset všechny ty výšky přepočítat a obrázky předělat. Ovšem v budoucnu, až budeš potřebovat třeba do menu přidat další položku, budeš mít problém a budeš to muset celé předělávat. Proto ti doporučuji to předělat tak, aby se výška počítala automaticky tzn. u obsah_right_kategorie a kategorie_container nezadávat výšku a pozadí udělat tak, aby se dalo opakovat s využitím background-repeat: repeat-y;. Jinak v tom css máš mnoho zbytečných definic.
Michalowic
Profil *
Keeehi:
O zbytečných definicích vím, musím to pak celé projet a promazat zbytečné věci, vznikaly trochu chaoticky.
Zkusím tedy patřičně upravit obrázky pozadí, snad to zabere.

Zatím díky
joe
Profil
1. "Kategorie" vpravo na tvém webu je seznam kategorií, měl bys proto použít správný tag <ul> určený pro seznam.
2. Nelíbí se mi, jak používáš jen označení odkazů třídou a tu následně samotnou používáš v CSS, zesložiťuješ si tak případné další použití třídy .kategorie kdekoli jinde na webu, protože kdybys chtěl jiné zobrazeí elementů s touto třídou, musel bys dané hodnoty zase resetovat (nastavovat na výchozí hodnoty v případě, že bys třeba nechtěl mít u nich pozadí).
3. Pokud nastavíš rozměr elementu, u hoveru už ho znovu nedefinuj, je tam k ničemu, pokud hodnoty zůstávají stejné.
4. Vnitřní okraj (padding) ve výchozím stavu nynějších prohlížečů rozšiřuje element, který má zadané rozměry. Pokud chceš nastavit rozměry pevně, použij box-sizing
5. Správnější použití tvého problému bych spíš viděl takto

HTML:

<ul id="kategorie_kontainer">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

CSS:

ul#kategorie_container {
font: normal 10pt 'Calibry', Tahoma , sans-serif;
position: relative;
top: 60px;
width: 230px;
height: 340px; /* výška by se nastavovat neměla, nevíš jak bude element vysoký - každý uživatel může mít jinak velké písmo pokud ho nastavuješ správně v relativních jednotkách */
text-align: left; 
}

ul#kategorie_container a {
color: #444444;
background: url(pozadi_kategorie.png) no-repeat;
display: block;
/*width: 230px; blokový element bude mít šířku podle jeho rodiče, pokud ji nastavovat nebudeš, nebudeš mít problém s padding-left/right  */
height: 44px;
line-height: 44px; /* vertikálně zarovná text, použij pokud nebude text více řádkový */
text-decoration: none;
padding-left: 40px;
padding-top: 10px;
}

ul#kategorie_container a:hover {
background-image: url(sipka_kategorie.png);
/*background-repeat: no-repeat; není třeba nastavovat, v pravidlu před již je no-repeat */
color: white;
}

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: