CSS a horizontální obrázkové menu

Máte problém, hľadáte niečo? Opýtajte sa a poradíme...

Moderátor: Moderators

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 12:49 pm

Zdravím
mám drobný problém

zkouším horizontální obrázkové menu
něco jako:

Kód: Vybrať všetko

#menu
{	position: relative;
	left: 0px;
	top: 0px;
  	width: 639px;
  	height: 31px;
	float: left;
}

#home-nav
{	width:95px;
	height:31px;
	margin:0 auto;
	background:#acacac url(images/menu-home-dis.jpg) no-repeat;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;			
}

#sluzby-nav
{	width:100px;
	height:31px;
	margin:0 auto;
	background:#acacac url(images/menu-sluzby-dis.jpg) no-repeat;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;						
}

#prace-nav
{	width:171px;
	height:31px;
	margin:0 auto;
	background:#acacac url(images/menu-prace-dis.jpg) no-repeat;
	float: left;
	position: relative;
	top: 0px;
	left: 0px;	 					
}

#home-nav ul, #sluzby-nav ul, #prace-nav ul
{	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
	position: relative;
	top: 0px;
	left: 0px;
}

#home-nav ul li, #sluzby-nav ul li, #prace-nav ul li
{	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
}

#home-nav ul li a span, #sluzby-nav ul li a span, #prace-nav ul li a span
{	display: none;
}

#home-nav ul li a
{	width:95px;
	height:31px;
	margin:0px;
	padding:0px;
	display: block;		
}

#sluzby-nav ul li a
{	width:100px;
	height:31px;
	margin:0px;
	padding:0px;
	display: block;		
}

#prace-nav ul li a
{	width:171px;
	height:31px;
	margin:0px;
	padding:0px;
	display: block;		
}

/* -- Hovers -- */

#home-nav ul li a.home:hover
{	background: url(images/menu-home-ena.gif);
}

#sluzby-nav ul li a.sluzby:hover
{	background: url(images/menu-sluzby-ena.gif);
}
	
#prace-nav ul li a.prace:hover
{	background: url(images/menu-prace-ena.gif);
}

/* -- Active -- */

#home-nav ul li a.home:active
{	background: url(images/menu-home-ena.gif);
}

#sluzby-nav ul li a.sluzby:active
{	background: url(images/menu-sluzby-ena.gif);
}
	
#prace-nav ul li a.prace:active
{	background: url(images/menu-prace-ena.gif);
}
v php užívám tento kód:

Kód: Vybrať všetko

<div id="menu"> 

<div id="home-nav">
 <ul>
<li><a href="homepage" class="home"><span>home</span></a></li>
 </ul>
</div>

<div id="sluzby-nav">
 <ul>
<li><a href="sluzby" class="sluzby"><span>sluzby</span></a></li>
 </ul>
</div>

<div id="prace-nav">
 <ul>
<li><a href="prace" class="prace"><span>prace</span></a></li>
 </ul>
</div>

</div> <!-- end menu --> 
div menu je vnořený do dalších divů (page, main, content)
a potřeboval bych, aby po kliknutí na vybranou stránky zústal obrázek "aktivná" a měl tedy tmavé pozadí po celou domu, kdy návštěvník bude na této stránce
nyní mi ta tmavá barva pozadí zmizí jamile z ní zmizí ukazovátko myši

??

lámu si s tím hlavu a nějak se nedaří

nemáte někdo nějaký nápad jak toto řešit ?

celá šablona stránky má tuto podobu:

Kód: Vybrať všetko

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

[!MetaTagsExtra!]

<link rel="stylesheet" type="text/css" href="./templates/aimon/main.css" />
<link rel="shortcut icon" href="./favicon.ico" />
{{highslidegal}}
  </head>

  <body>

<div id="page">


<div id="picture_left"> 
</div> <!-- end picture_left -->

<div id="picture_oddel"> 
</div> <!-- end picture_oddel -->

<div id="main_left"> 

<div id="header"> 

<div id="picture_header"> 
</div> <!-- end picture_header-->

<div id="search_header"> 

</div> <!-- end search_header-->

</div> <!-- end header --> 

<div id="main"> 

<div id="menu"> 


<div id="aimon-nav">
 <ul>
<li><a href="aimon-homepage" class="aimon"><span>aimon</span></a></li>
 </ul>
</div>

<div id="sluzby-nav">
 <ul>
<li><a href="sluzby" class="sluzby"><span>sluzby</span></a></li>
 </ul>
</div>

<div id="jak_prac-nav">
 <ul>
<li><a href="jak-pracujeme" class="jak_prac"><span>jak_prac</span></a></li>
 </ul>
</div>

 <div id="nase_prace-nav">
 <ul>
<li><a href="nase-prace" class="nase_prace"><span>nase_prace</span></a></li>
 </ul>
</div>

<div id="kontakty-nav">
 <ul>
<li><a href="kontakty" class="kontakty"><span>kontakty</span></a></li>
 </ul>
</div>

</div> <!-- end menu --> 

<div id="content"> 

    [*content*]

</div> <!-- end content --> 


</div> <!-- end main --> 

<div id="footer"> 


</div> <!-- end footer -->


</div> <!-- end main_left --> 


 

</div> <!-- end page -->

  </body>
</html>
Prílohy
menu_select_css.rar
přikládám zabalený html soubor (css obsahuje) a obrázky do menu
(9.44 KiB) 172 stiahnutí
----------------------------
http://puschpull.org
:-)

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 12:51 pm

jinak, jako samotná html s těmi obrázky funkce "a.active" funguje, ale v etomite ne
----------------------------
http://puschpull.org
:-)

Užívateľov profilový obrázok
_rasel^
ETOMITE Admin
ETOMITE Admin
Príspevky: 1122
Dátum registrácie: Ut Sep 20, 2005 1:03 am
Bydlisko: Košice (SR)
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa _rasel^ » St Apr 15, 2009 7:58 pm

Pozri si snippet ListMenu. To čo potrebuješ je, aby sa ti pre každý web vygenerovalo menu, ktoré sa bude líšiť v CSS štýle pre položku menu, kde sa momentálne nachádzaš (v prípade ListMenu to bude id="lm_youarehere"), aby si vedel nadefinovať CSS štýl.

Tu druhú poznámku, že to samostatne funguje a v Etomite nie, nechápem, pretože vlastnosť menu ovplyvňujú správne nadefinované CSS štýly: buď sa medzi sebou bijú, alebo treba pridať z-index (posunúť o úroveň vyššie).

K samotnému menu: Zabaliť každú položku menu do samostatného divu do ktorého je vnorený zoznam o jednej položke s odkazom a spanom je zverstvo prvé zverstvo. Namiesto classu v odkaze by som radšej použil id (je to jedinečná položka), čiže menu by mohlo vyzerať takto:

Kód: Vybrať všetko

<div id="home-nav"> 
  <ul>
    <li><a href="#" id="home"><span>home</span></a></li> 
    <li><a href="#" id="sluzby"><span>sluzby</span></a></li> 
    <li><a href="#" id="prace"><span>prace</span></a></li> 
  </ul>
</div> 
Pokiaľ ide o výmenu obrázka po prejdení myškou, tak niektoré prehliadače môžu pracovať pomalšie... správnejšie by bolo, aby bol jeden obrázok (pre jednu položku), ktorý sa na pozadí posúva raz hore a raz dole (aby používateľ videl to čo má vidieť). Menu inšpirácia: http://www.dynamicdrive.com/style/cssli ... tegory/C1/
..:: Etomite CMS → Rulezzz !.!.!. ::..

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 8:04 pm

_rasel^: dík za inspiraci
něco si pročtu a snad se zadaří
----------------------------
http://puschpull.org
:-)

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 8:25 pm

_rasel^: a dá se ten tvůj postup menu vytvořit i pro obrázkové menu, kde jsou odkazy nikoliv slova, ale text s nějakým divokým fotem, takže se to řeší obrázkem a tedy pro každou položku menu jsou dva obrázky ?
----------------------------
http://puschpull.org
:-)

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 8:26 pm

_rasel^: a dá se ten tvůj postup menu vytvořit i pro obrázkové menu, kde jsou odkazy nikoliv slova, ale text s nějakým divokým fontem, takže se to řeší obrázkem a tedy pro každou položku menu jsou dva obrázky ?
----------------------------
http://puschpull.org
:-)

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » St Apr 15, 2009 11:01 pm

takže jsem to upravil na:

Kód: Vybrať všetko

<div id="menu"> 

<div id="aimon-nav"> 
  <ul>
    <li id="aimon"><a href="aimon-homepage" ><span>aimon</span></a></li> 
    <li id="sluzby"><a href="sluzby"><span>služby</span></a></li> 
    <li id="jak_pracujeme"><a href="jak-pracujeme"><span>jak pracujeme</span></a></li> 
    <li id="nase_prace"><a href="nase-prace"><span>naše práce</span></a></li> 
    <li id="kontakty"><a href="kontakty"><span>kontakty</span></a></li> 
  </ul>
</div> <!-- aimon-nav --> 

</div> <!-- end menu --> 
a
css:

Kód: Vybrať všetko


#menu
{
	position: relative;
	left: 0px;
	top: 0px;
  	width: 639px;
  	height: 31px;
	float: left;
	/*background-image: url(images/titulka-logo-a-text.png);
	background-repeat: no-repeat;*/
	/*border: 1px solid blue;*/
}

#aimon-nav 
{
	float:left;
	width:100%;
	overflow:hidden;
	}	
	
#aimon-nav  ul 
{	
	border: 0;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
	clear: left;
	position: relative;
	top: 0px;
	left: 0px;
	
	}

#aimon-nav  li 
{
	display: block;
	float: left;
	text-align: center;
	padding: 0;
	margin: 0;
	}

#aimon-nav  a 
{
	margin:0px;
	padding:0px;
	display: block;
	}
	
	#aimon-nav a span 
{	
	display: none;
	}	

#aimon a
{
	width:95px;
	height:31px;
	background:#acacac url(images/menu-aimon-dis.jpg) no-repeat;
	}

#aimon a:hover
{
	width:95px;
	height:31px;
	background:#acacac url(images/menu-aimon-ena.gif) no-repeat;
	}

#sluzby a
{
	width:100px;
	height:31px;
	background:#acacac url(images/menu-sluzby-dis.jpg) no-repeat;
	}

#sluzby a:hover
{
	width:100px;
	height:31px;
	background:#acacac url(images/menu-sluzby-ena.gif) no-repeat;
	}
	
	#jak_pracujeme a
{
	width:171px;
	height:31px;
	background:#acacac url(images/menu-jakprac-dis.jpg) no-repeat;
	}

#jak_pracujeme a:hover
{
	width:171px;
	height:31px;
	background:#acacac url(images/menu-jakprac-ena.gif) no-repeat;
	}
	
	#nase_prace a
{
	width:144px;
	height:31px;
	background:#acacac url(images/menu-naseprac-dis.jpg) no-repeat;
	}

#nase_prace a:hover
{
	width:144px;
	height:31px;
	background:#acacac url(images/menu-naseprac-ena.gif) no-repeat;
	}
	
	#kontakty a
{
	width:129px;
	height:31px;
	background:#acacac url(images/menu-kontakty-dis.jpg) no-repeat;
	}

#kontakty a:hover
{
	width:129px;
	height:31px;
	background:#acacac url(images/menu-kontakty-ena.gif) no-repeat;
	}
a s tím trvalým zvýrazněním aktivní položky v menu si to ještě nějak musím promyslet
----------------------------
http://puschpull.org
:-)

R - stick
Moderator & CLT
Moderator & CLT
Príspevky: 215
Dátum registrácie: Pi Sep 23, 2005 10:59 am
Bydlisko: Vysoké Studnice (u Jihlavy)
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa R - stick » Št Apr 16, 2009 10:34 am

Hele - neřešil by tvůj problém něco podobného, jako mám menu použité na mých stránkách? - Mrkni se na www.rstick.com - pokud ano, tak bych ti poskytl všechno, co by jsi potřeboval. (to menu funguje až do 5 vnořených položek)
Jinak nastylovat to všecho - to byl děs a hrůza - ještě teť mám z toho divoké sny .....

Užívateľov profilový obrázok
puschpull
Expert
Expert
Príspevky: 112
Dátum registrácie: Št Mar 19, 2009 9:31 am
Bydlisko: Czech Republic - Most
Kontaktovať užívateľa:

Re: CSS a horizontální obrázkové menu

Príspevok od užívateľa puschpull » Št Apr 16, 2009 11:14 am

R - stick: dík za nabídku
pokud bys dokázal nějak srozumitelně vyseparovat html + css + případné obrázky (tak aby to fungovalo při otevření toho html) a zabalit to do nějakého raru, tak bych si to založil pro případné použití či modifikace
:-)
----------------------------
http://puschpull.org
:-)

Napísať odpoveď