| Autor | Zpráva | ||
|---|---|---|---|
| Tlapka Profil |
#1 · Zasláno: 9. 8. 2011, 11:39:55
Zdravím všechny, potřebovala bych pomoc s webem. Přepisuji design a narazila jsem na jeden zvláštní problém.
Jedná se o logo stránky, obalila jsem ho odkazem, jenže odkaz se vytvořil větší, než logo a přesahuje ho. Názorně to ukazuje obrázek: 
Obarvila jsem prvkům pozadí pro lepší přehlednost: červeně je obrázek loga, oranžově je odkaz, kterým je obalen (zde je vidět jen přesahující část, o tu ale jde), modře je motto pod logem. Problém je právě v té přesahující části odkazu: obrázek je vysoký 80px, odkaz ho ale přibližně o 5px přesahuje, což zvětšuje mezeru mezi logem a mottem (kterou chci co nejmenší). Tuto část se mi nepodařilo odstranit ani nulovými hodnotami margin, padding, border, line-height u odkazu, a dokonce ani záporným paddingem. Je to sice jen kosmetický problém, který provozu webu nevadí, stejně by mě ale zajímalo, proč tomu tak je, a jak to napravit. Chybuje to ve Firefoxu i Chromu. Zde je HTML kód toho záhlaví: <td colspan="3" class="logo"> <a href="index.php"><img src="template/oldpergamen/images/logo.png" alt="Svět hrdinů"></a> <br> <span class="motto"> <? include "inc/pozdrav.inc.php" ?> </span> </td> Zde je CSS kód vztahující se k záhlaví: .logo {
background-image: url('images/grungepaper6.jpg');
background-color: white;
background-repeat: repeat;
width: 700px;
height: 100px;
text-align: center;
vertical-align: top;
}
.logo a {
line-height: 0px;
margin: 0px;
padding: 0px;
border: 0px;
text-decoration: none;
background-color: orange;
}
.logo img {
background-color: red;
margin: 0px;
padding: 0px;
border: 0px;
}
.motto {
font-family: Monotype Corsiva;
color: black;
font-size: large;
font-weight: bold;
background-color: blue;
}
.motto a {color: black; text-decoration: underline;}
Poradí někdo prosím, co s tím? Předem děkuji. |
||
| Zechy Profil |
#2 · Zasláno: 9. 8. 2011, 12:37:07 · Upravil/a: Zechy
Obrázek je vysoký 80px, ale třída pro logo má výšku 100px.
EDIT: Moje chyba, nevšim jsem si, že motto je v tom samym TD. Když si to zkusim u sebe, tak mám motto hned pod logem, ale odkaz mám posunutej o těch 5px níž. |
||
| jenikkozak Profil |
#3 · Zasláno: 9. 8. 2011, 13:07:55
Tlapka:
Živá ukázka by byla lepší, mohl bych se podívat, jak je to s těmi rozměry. Zřejmě by tomu odkazu prospělo, kdyby měl hodnotu display:block. |
||
| Tlapka Profil |
#4 · Zasláno: 9. 8. 2011, 16:36:05 · Upravil/a: Tlapka
Zechy:
„Obrázek je vysoký 80px, ale třída pro logo má výšku 100px.“ Ono to možná trochu mate, možná by se to místo .logo mělo jmenovat třeba .zahlavi, protože je to pro celý ten vnitřek, i s tím mottem... Chápu že jsi si toho hned nevšim ;-) jenikkozak: „Živá ukázka by byla lepší, mohl bych se podívat, jak je to s těmi rozměry.“ Dobře, nahrála jsem to na www.svethrdinu.xf.cz/betatest, ale není plně funkční... Ale ten odkaz by měl zobrazit... „Zřejmě by tomu odkazu prospělo, kdyby měl hodnotu display:block.“ Tak jsem tomu nastavila display: block a smazala to <br> mezi odkazem a mottem, a je to lepší, viz. www.svethrdinu.xf.cz/betatest2. Možná že to tak nechám, vypadá to lépe. :-) EDIT: Tak jsem koukala, že v tom betatestu se mi ten odkaz ukazuje naprosto správně... Přitom na test serveru se mi ukazuje tak, jak je vyfocený na obrázku. Přitom jsou to naprosto stejné kódy... Tak teď už vůbec nevím co se s tím děje... :-? :-o :-D |
||
|
Časová prodleva: 13 let
|
|||
0