Hover efekt určité šířky – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Hover efekt určité šířky – CSS – Fórum – Programujte.comHover efekt určité šířky – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
JMM
~ Redaktor
0
Grafoman
19. 5. 2008   #1
-
0
-

Ahoj, nějak nemohu přijít na to jak udělat hover efekt u seznamu s display:inline s požadovanou šířkou, hover je jen pod textem

XHTML

  <div id="menu">

<ul>
<li><a href="#">Nabídka</a></li>
<li><a href="#">Katalog</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

CSS
#menu{width:700px;height:30px;background:#ab6000 url('grafika/menu.jpg') no-repeat;font-size:18px;font-weight:bold;}

#menu a{text-decoration:none;color:#ab6000;}
#menu a:hover{text-decoration:none;color:#000000;background-color:#e8bd86;}
#menu ul{list-style-type:none;padding:2px 0 0 0;}
#menu li{display:inline;padding:0 50px 0 50px;}


Nahlásit jako SPAM
IP: 85.71.16.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Reklama
Reklama
Fugess0
Návštěvník
19. 5. 2008   #2
-
0
-

skus tohle, pokud jsem to dobre pochopil tak jsi potreboval jen roztahnout hover efekt .. tim padem se musi na seznam trochu jinak


#menu {

font-size:18px;
color:#ab6000;
font-weight:bold;
}

#menu li {
width: 200px;
float: left;
list-style: none;
text-align: center;
}

#menu a {
display: block;
text-decoration:none;
color:#ab6000;
}

#menu a:hover {
text-decoration:none;
color:#000000;
background-color:#e8bd86;
}

Nahlásit jako SPAM
IP: 80.78.146.–
Fugess
JMM
~ Redaktor
0
Grafoman
19. 5. 2008   #3
-
0
-

To Fugess : díky to je přesně ono :smile2:

Nahlásit jako SPAM
IP: 85.71.16.–
Jan Malý | web: www.malyphoto.cz, @malyphoto
Fugess0
Návštěvník
19. 5. 2008   #4
-
0
-

nemas zac:smile1:, jeste jsem ti to udelal s tou druhou verzi .. po uprave #menu na div

#menu {

width:600px;
height:30px
font-size:18px;
color:#ab6000;
font-weight:bold;
overflow: hidden;
}

#menu ul {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}

#menu ul li {
float: left;
}

#menu ul li a {
display: block;
width: 200px;
text-decoration:none;
color:#ab6000;
}

#menu ul li a:hover {
text-decoration:none;
color:#000000;
background-color:#e8bd86;
}


edit: zapomel jsem na overflow kvuli pretekani pri nastaveni vetsi velikosti na seznam..
doplneno: overflow: hidden; u #menu

Nahlásit jako SPAM
IP: 80.78.146.–
Fugess
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 9 hostů

Podobná vlákna

Hover efekt — založil Paja2

Plakátový efekt — založil Ondra

Slideshow efekt — založil tanned88

Efekt rastu... — založil jozo0025

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý