Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
casa verde 2024

Intrerupator cu N - doza doar cu ...

Incalzire casa fara gaz/lemne

Incalzire in pardoseala etapizata
 Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii

Impozite pe proprietati de anul v...
 teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...

Rezultat RMN
 Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor

Discuții despre TVR Sport HD.
 

meniu cu background transparent

- - - - -
  • Please log in to reply
1 reply to this topic

#1
alin19

alin19

    Active Member

  • Grup: Members
  • Posts: 1,338
  • Înscris: 03.01.2007
incerc sa ii fac cuiva un meniu cu un background transparent;

chiar daca pare usor la prima impresie(asa am zis si eu) este destul de complicat;


deci :

este un div cu id-ul content care are o imagine ca background;

peste el un div cu id-ul menu si cu un background cu opacity:0.4;

peste el un div cu continut care trebuie sa fie cu opacity:1;

iar colturile div-ului cu id-ul menu sunt rotunde;

trebuie sa functioneze si in internet explorer;


singura solutie pe care am gasito este cu javascript  am :

<div id="menu"></div>
<div id="menu_content"></div>
<div id="menu_head"></div>
<div id="menu_footer"></div>

toate cu position absolute;
menu il asez in centrul div-ului content;
redimensionez menu sa poata contine menu content si sa para ca este inclus in el ( de fapt fiind deasupra cu un index mai mare)
asez menu_content peste menu

menu_head
contine 2 imagini de aceiasi culoare cu background-ul menu (una in stanga una in dreapta)
inca un div pe centru cu background-ul de aceiasi culoare ca si menu
si menu_head are opacity:0.4;
menu head este asezat cu javascript exact inainte de menu

la menu footer aceiasi lucru ca si la menu_head numa ca este asezat dupa menu




intrebarea mea este:

se poate face toata chestia asezand ceva mai normal elementele

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<!-- mbpc - margin, border, padding, content-->
<style>
body,div {margin:0px;padding:0px;text-align:center;}


#content {background:url("test.gif");width:360px;height:360px;margin:auto;position:relative}

#menu {
	width:320px;
	margin:auto;
	background-color:gray;
	position:relative;
	filter:alpha(opacity=40);
	opacity:0.4;
   
}

#menu_head
{

	width:100%;
	 background-color:gray;
	position:absolute;
	left:0px;
	top:0px;
	height:19px;
	filter:alpha(opacity=40);
	opacity:0.4;

}
#menu_footer
{
	width:100%;
	background-color:gray;
	position:absolute;
	left:0px;
	bottom:0px;
	height:19px;
	filter:alpha(opacity=40);
	opacity:0.4;

}


#menu_content{top:0px;position:absolute;z-index:3;}
#menu_line1{   border-bottom-width:2px;   border-bottom-color:#ffffff;   border-bottom-style:solid;}
span{height:100%;text-align:center;padding:4px;text-decoration:none;color:black;}
span.border{border-right-width:2px; border-right-color:#ffffff;border-right-style:solid;}
a{margin:5px; text-decoration:none;color:#ffffff;}
a:hover{text-decoration:underline;}

#image_copy
{
	position:absolute;
	right:5px;
	bottom:30px;
}

#sh_footer{
	height:30px;
	width:100%;
	text-align:center;
	font-size:12px;
	display: table;
	clear:both;/*turn off any float before footer*/
	background-color:#333;
	/* for IE */
	filter:alpha(opacity=40);
	/* CSS3 standard */
	opacity:0.4;
	position:absolute;
	left:0px;
	bottom:0px;
}

#sh_footer p {
	display: table-cell; 
	vertical-align: middle;
	color:#fff;
}

#sh_footer span {
color:#fff;
font-weight:bold;
}
#sh_footer a {text-decoration:none}
	
</style>
<script type="text/javascript">
	function fix()
	{

	/*
	 *
	 * arange menu in the center of the body
	 *
	 */
	
	var menu=document.getElementById("menu");
	var menu_content=document.getElementById("menu_content");
	var menu_head=document.getElementById("menu_head");
	var menu_footer=document.getElementById("menu_footer");
	
	//menu.style.left=(menu.parentNode.offsetWidth-menu.offsetWidth)/2;
	menu.style.top =(menu.parentNode.offsetHeight-menu.offsetHeight)*50/100;



	/**
	 * resize menu to contain menu content
	 *
	 */
	menu.style.height=menu_content.offsetHeight+20;
	/**
	 * arange menu content in the center of menu 
	 */
		
		menu_content.style.left=menu.offsetLeft+((menu.offsetWidth-menu_content.offsetWidth)/2);
		menu_content.style.top=menu.offsetTop+((menu.offsetHeight-menu_content.offsetHeight)/2);
	/*
	 *
	 * we arange menu head and menu footer divs
	 */

	menu_head.style.left=menu.offsetLeft;
	menu_head.style.width=menu.offsetWidth;
	menu_head.style.top = menu.offsetTop-19;

	menu_footer.style.left=menu.offsetLeft;
	menu_footer.style.width=menu.offsetWidth;
	menu_footer.style.top = menu.offsetTop+menu.offsetHeight;

	}
</script>
</head> 

<body onload="fix()" >

	<div id="content">

	<div id="menu_head"></div>
	 <div id="menu">  
	 </div>
	 <div id="menu_footer"></div>
		<div id="image_copy"><span>&copy;</span></div>
		<div id="sh_footer">
			<p><a href="#"><span>ConfusedMe</span></a> | <a href="#"><span>CreateWebsite</span></a> | <a href="#"><span>Settings</span></a> | <a href="#"><span>Annoyed</span></a></p>
		</div>

		<div id="menu_content">
			 <div id="menu_line1">
				 <span class="border"><a href="#" >vertical 1</a></span>
				 <span class="border">  <a href="#" >vertical 2</a></span>
				 <span>  <a href="#" >vertical 3</a></span>

			 </div>
			 <div id="menu_line2" >


				 <span class="border" > <a href="#">vertical 4</a></span>
				 <span class="border" >  <a href="#">vertical 5</a></span>
				 <span> <a href="#" >vertical 6</a></span>

			 </div>
		 </div>

	</div>



</body> 
</html>

Edited by alin19, 16 February 2010 - 20:49.


#2
Ion_Cristoiu

Ion_Cristoiu

    Member

  • Grup: Members
  • Posts: 846
  • Înscris: 31.07.2008
Pentru IE folosesti filter:alpha(opacity=40) pentru opacitate 40%.
Ti-as da raspuns si la restul dar nu stiu cum ai gandit. Nu-mi dau seama din descriere ce ai vrut sa faci. Daca ai posta codul ar fi bine.

Nu-i cel mai simplu sa faci un PNG cu transparenta 0.4 si sa-l pui ca background la meniu, astfel incat tu sa nu mai pui opacity prin CSS? Teoretic ar ramane cu opacity 1 si lucrezi cum vrei. Singuru dezavantaj e ca trebuie sa te chinui putin sa-l faci s amearga pe IE6.

Edited by Ion_Cristoiu, 16 February 2010 - 20:47.


Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate