Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Schimbare adresa DNS IPv4 pe rout...

Recomandare Barebone

Monede JO 2024

Suprasolicitare sistem electric
 CIV auto import

Mutare in MOZAMBIC - pareri, expe...

Scoatere antifurt airtag de pe ha...

Magnet in loc de clește pent...
 Cumparat/Locuit in apartament si ...

Pot folosi sistemul PC pe post de...

Sokol cu distorsiuni de cross-over

Filtru apa potabila cu osmoza inv...
 Kanal D va difuza serialul “...

Upgrade xiaomi mi11

securitate - acum se dau drept - ...

Farmacia Dr Max - Pareri / Sugest...
 

meniu cu background transparent

- - - - -
Last Updated: Feb 16 2010 21:04, Started by alin19 , Feb 16 2010 20:39  
  ·  
  • Please log in to reply
1 reply to this topic

#1
alin19
Posted 16 February 2010 - 20:39

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
Posted 16 February 2010 - 21:04

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

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro
Back to Markup Languages

▶ 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. Forumul Softpedia
  2. → Professional Zone
  3. → Programming
  4. → Markup Languages
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