| Autor | Zpráva | ||
|---|---|---|---|
| Michalowic Profil * |
#1 · Zasláno: 9. 9. 2012, 11:09:41
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 |
#2 · Zasláno: 9. 9. 2012, 11:40:34
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 * |
#3 · Zasláno: 9. 9. 2012, 11:58:23
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 |
#4 · Zasláno: 9. 9. 2012, 12:03:08
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;
} |
||
|
Časová prodleva: 12 let
|
|||
0