Menu Item posunutí – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Menu Item posunutí – CSS – Fórum – Programujte.comMenu Item posunutí – CSS – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené.
Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
LUK4S3K0
Newbie
22. 1. 2014   #1
-
0
-

Zdravím


Dělám menu na jedny stránky a nastal takový problém, který už 2 hodiny nemohu rozluštit.

Když najedu na 1. položku menu (jen a:hover), tak se celé menu i s pozadím názvu menu posune o pár pixelů doprava. Když na to kliknu všechno zůstane stejné jako když jsem najel akorát pozadí se změní jak to mám nastavené když jsem na aktuální stránce. Když jsem na té stráce pořád a najedu znovu na položku 1 v menu, tak se mi to zase posune o pár pixelů doprava ale tohle jen když najedu na to menu. Podobný problém mám u všech položek menu akorát u jednoho se mi to posune doleva a u dalšího doprava.

Menu Archiv nefunguje zatím...nemám tam daný odkaz na stránku.

web je nahozený na: http://apk-market.tk

 Zde CSS menu:

#games
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 50px;
	font-family:"myriad pro semibold";
	font-size: 16px;	
	display: inline;
}
#games a
{
	text-decoration: none;
	color: black;
	background-color: transparent;
	border-radius: 2px;
}
#games a:hover
{
	border-radius: 2px;
	background-color: #e4e4e4;
	padding: 5px 5px;
}
#menu #games.active
{
	color: white;
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
}
#menu #games.active a
{
	color: white;
}
#menu #games.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#apps
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#apps a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#apps a:hover
{
	border-radius: 2px;
	background-color: #e4e4e4;
}
#menu #apps.active
{
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	border-radius: 2px;
	color: white;
}
#menu #apps.active a
{
	color: white;
}
#menu #apps.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#live_wallpapers
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#live_wallpapers a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#live_wallpapers a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #live_wallpapers.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	color: white;
}
#menu #live_wallpapers.active a
{
	color: white;
}
#menu #live_wallpapers.active a:hover
{
	border-radius: 2px;
	background-color: transparent;
}
#themes
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 35px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#themes a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#themes a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #themes.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
	color: white;
}
#menu #themes.active a
{
	color: white;
}
#menu #themes.active a:hover
{
	background-color: transparent;
	border-radius: 2px;
}
#archive
{
	color: black;
	float: left;
	margin-top: 60px;
	margin-left: 25px;
	font-family:"myriad pro semibold";
	font-size: 16px;
	display: inline;
}
#archive a
{
	text-decoration: none;
	color: black;
	padding: 5px 5px;
	background-color: transparent;
	border-radius: 2px;
}
#archive a:hover
{
	background-color: #e4e4e4;
	border-radius: 2px;
}
#menu #archive.active
{
	border-radius: 2px;
	margin-top: 55px;
	background-color: #a4c639;
	padding: 5px 5px;
}
#menu #archive.active a
{
	color: white;
}
#menu #archive.active a:hover
{
	background-color: transparent;
}

Nějaké nápady co to může způsobovat? 

Děkuji 

Nahlásit jako SPAM
IP: 109.80.64.–
Reklama
Reklama
JoDiK
~ Anonymní uživatel
981 příspěvků
22. 1. 2014   #2
-
0
-

Jestli to fakt nevidíš, tak při :hover tam přidáváš

    padding: 5px 5px;

kterej tam normálně není...

proto se ti to rozšíří...

Nahlásit jako SPAM
IP: 88.103.233.–
LUK4S3K0
Newbie
22. 1. 2014   #3
-
0
-

To vím, ale když odstraním padding tak je to "šedívé pozadí" jen těsně okolo textu toho games a já to potřebuju mít o těch 5px rozšířené do stran, nahoru i dolu. A když tam padding je, tak to dělá ten paskvil.

Nahlásit jako SPAM
IP: 109.80.64.–
peter
~ Anonymní uživatel
2551 příspěvků
23. 1. 2014   #4
-
0
-

JoDiK ti chtel naznacit, ze tam to padding mas dat i bez hoveru. Hoverem se tam pak zmeni uz jen to pozadi.

Nahlásit jako SPAM
IP: 2001:718:2601:400:0:5efe:...–
peter
~ Anonymní uživatel
2551 příspěvků
23. 1. 2014   #5
-
0
-

Mimochodem, pri tom hoveru tam neni dostatecny kontrast pozadi text, neda se to precist.
Jako pomucku muzes pouzit treba tady tohle.
http://mlich.zam.slu.cz/js-color4.htm
Kdyz tam zadas do toho prvniho policka nahore e4e4e4, tak hned pod tim vykresli sedy obdelnicek s cernou barvou. Coz znamena, ze pro to pozadi musis pouzit tmavou barvu pisma. Ten program neni 100%, ale zatim mi to celkem vyhovuje. Pokud najdu problem, tak ho pozmenim.
 

Nahlásit jako SPAM
IP: 2001:718:2601:400:0:5efe:...–
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, 11 hostů

Podobná vlákna

C# item to list — založil Ritchie

ListView(Box) a jeho Item (Template) — založil VladislavK

 

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