set display with css

**davelf** · 03-03-2010, 02:57 AM

i have a drop down menu, how to make that menu over lay with the content, u can see the demo here:

what i want is like this

what should i add in the css?

this is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<title>Smooth Animated jQuery Menu</title>
	
	<link rel="stylesheet" href="animated-menu.css"/>
	
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script src="animated-menu.js" type="text/javascript"></script>
</head>

<body>

	<p>Rollover a menu item to expand it.</p>
	
	<ul>
		<li class="green">
			<p><a href="#">Home</a></p>
			<p class="subtext">The front page</p>
		</li>
		<li class="yellow">
			<p><a href="#">About</a></p>
			<p class="subtext">More info</p>
		</li>
		<li class="red">
			<p><a href="#">Contact</a></p>
			<p class="subtext">Get in touch</p>
		</li>
		<li class="blue">
			<p><a href="#">Submit</a></p>
			<p class="subtext">Send us your stuff!</p>
		</li>
		<li class="purple">
			<p><a href="#">Terms</a></p>
			<p class="subtext">Legal things</p>
		</li>
	</ul>
	<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:inline;">
  <tr>
    <td>am pharetra ligula at lorem pretium in porta enim scelerisque. Cras eget nibh luctus mauris blandit posuere. Maecenas purus velit, ultricies sed volutpat eget; tincidunt a magna. Nullam accumsan tincidunt tempor. Suspendisse sagittis imperdiet justo, in sagittis est vulputate feugiat. Suspendisse malesuada sollicitudin erat, eget condimentum nisl placerat vel. Morbi eleifend sagittis nibh in iaculis. Fusce dignissim, nibh ut tristique tempus, ante magna elementum mauris, a vulputate velit nisl non mauris. Cras sollicitudin purus ac nulla pharetra malesuada. Sed aliquet dui vitae purus ultrices sagittis! Duis in ipsum felis? Maecenas lobortis aliquam rhoncus. Pellentesque sit amet lorem eget sapien congue sodales. Ut ornare bibendum dapibus. Phasellus ac velit nibh, a hendrerit velit. Quisque nec velit nunc. Aenean eget justo purus, eget volutpat ante. Cras ut orci fringilla mauris ultrices dictum a at odio. Nullam lacus neque, auctor et consectetur eget; ullamcorper ut lacus. Integer enim felis, congue id vulputate nec, fringilla nec diam.<br /></td>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>

please help me, thanks a lot..

**stringcugu** · 03-03-2010, 09:02 AM

<html>
<head>
</head>
<body>
<br><br><br><br>
<script language="JavaScript">
var ron="#0C58BA"; // Colore al MouseOver
var roff="#C6DDF9"; // Colore di default
var leftmargin=170; // Distanza dal margine sinistro della pagina
var topmargin=70; // Distanza dal margine superiore della pagina
var largo=125; // Larghezza dei layers, quindi distanza (orizzontale) fra i sottomenu
var voci=new Array();
voci[0]=new Array("JavaScript","StaffScripts","UserScripts","FlyScripts","P.O.J.","Newsgroup icly")
voci[1]=new Array("Documenti","F.A.Q & Answers","Tutorials","Lezioni","Risorse e Downloads","Biblioteca","Links");
voci[2]=new Array("About us","Staff","Collaboratori","Contatti","Credits");
voci[3]=new Array("Varie","Servizi Gratuiti","Sondaggi","Hanno detto di noi","Banner","Advertising","Questo menu...");
var links=new Array();
links[0]=new Array("","#","#","#","#")
links[1]=new Array("","#","#","#","#","#","#")
links[2]=new Array("","#","#","#","#")
links[3]=new Array("","#","#","#","#","#","http://www.jsdir.com")
var wst=new Array();
wst[0]=new Array("Risorse JavaScript nel sito","Gli script dello Staff di JsDir - Le schede ti insegnano anche a personalizzarli ed a capirne il funzionamento","Gli Script pubblicati dai nostri visitatori. Contribuisci anche tu alla raccolta, puoi farlo on-line inviando i tuoi lavori che saranno *immediatamente* visibili al nostro pubblico!","Una serie di Wizards per programmare on-line gli scripts per il tuo sito!","Chi l\'ha detto che JavaScript serve solo per far girare delle immagini o controllare i form? Scopri in questa pagina applicazioni inedite (ed insospettabili) di JavaScript","Finalmente un NG che da\' riposte serie a chi ha bisogno di aiuto!!! (-=Gigio 2K=-)");
wst[1]=new Array("Imparare JavaScript","Le Faq di JsDir - Sono piu\' di 400 ed aumentano in continuazione! In quale altro sito trovi tante FAQ?","I tutorials sono dei micro manuali che volta per volta affrontano argomenti di interesse generale","Le lezioni di JavaScript ed un corso introduttivo all\'HTML","Un grande archivio (quasi 35 MegaBytes) di documentazione su JavaScript - Dal sito di Netscape","Una panoramica di libri dedicati a JavaScript","Sono innumerevoli i siti presenti in rete dedicati a JavaScript. Questa raccolta, lungi dall\'essere esaustiva, comprende gia\' molti links, aiutaci nella raccolta segnalandoli allo staff");
wst[2]=new Array("Chi lavora a JsDir","Le persone che lavorano (giorno e notte!) a JsDir","Alcuni amici che saltuariamente (ma non tanto...) contribuiscono alla crescita di JsDir","Per scrivere al WebMaster ed agli altri autori del sito","Amici e siti che ci hanno aiutato nel setup del sito");
wst[3]=new Array("Altri link e servizi","I servizi gratuiti di JsDir, una valida alternativa offerta da JsDir ai WebMasters italiani","Vogliamo conoscere meglio il nostro pubblico. Vota in HomePage il sondaggio del mese, i risultati sono pubblici ed accessibili da questo link","Consentite anche a noi un po\' di autocelebrazione! In questa pagina raccogliamo le recensioni ed i pareri su qeusto sito","Vuoi scambiare un banner con JsDir?","Fra un po' sara' possibile fare promozione tramite JsDir","Il sito in cui è reperibile lo script di questo menu...");
var nn=document.layers?true:false//,
var nn=document.layers?true:false//,
var Ver4=(document.getElementbyid)?true:false;
conta=0;last=0;
if (nn)
{
document.write("<LAYER NAME=mtop. position=absolute left="+leftmargin+" top="+topmargin+" width=50 height=15 clip=0,0,50,15 bgColor="+roff+" visibility=visible onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')> <A HREF='home.html' CLASS=menuNNb><I>Home</I></A></LAYER>");
for (i=0;i<voci.length;i++)
{
var n=i;
document.writeln("<LAYER NAME=mtop"+n+". position=absolute left="+eval(leftmargin+50+largo*i)+" top="+topmargin+" width="+largo+" height=15 clip=0,0,"+largo+",15 bgColor="+roff+" visibility=visible onMouseOver=MostraMenu("+i+");mroll('mtop"+i+".');conta++ onMouseOut=last="+i+";unmroll('mtop"+i+".');conta--><DIV ALIGN=center> <A HREF=javascript:mroll('mtop"+i+".') CLASS=menuNNb><I>"+voci[i][0]+"</I></A></DIV></LAYER>");
for (l=1;l<voci[i].length;l++)
document.writeln("<LAYER NAME=mdep"+i+"."+l+" position=absolute left="+eval(leftmargin+50+largo*i)+" top="+eval(topmargin+15*l)+" width="+largo+" height=15 clip=0,0,"+largo+",15 bgColor="+roff+" visibility=hidden onMouseOver=mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta--> <A HREF=javascript:mroll('mdep"+n+"."+l+"') onClick=vai('"+links[i][l]+"',"+i+","+l+") CLASS=menuNN>"+voci[i][l]+"</A></LAYER>");
}
}
else
{
document.write("<DIV ID=mtop. STYLE=\"position:absolute;left:"+leftmargin+";top:"+topmargin+";width:50;height:15;background:"+roff+";visibility:visible;cursor:hand\" onMouseOver=showdeps(last,false);mroll('mtop.') onMouseOut=unmroll('mtop.')><A HREF='home.html' CLASS=menuIEb onFocus=this.blur()> <I>Home</I></A></DIV>");
for (i=0;i<voci.length;i++)
{
var n=i;
document.writeln("<DIV ID=mtop"+n+". STYLE=\"position:absolute;left:"+eval(leftmargin+50+largo*i)+";top:"+topmargin+";width:"+largo+";height:15;background:"+roff+";visibility:visible;cursor:hand\" onMouseOver=MostraMenu("+n+");mroll('mtop"+n+".');conta++ onMouseOut=last="+n+";unmroll('mtop"+n+".');conta--><DIV ALIGN=center CLASS=menuIEb> <I>"+voci[i][0]+"</I></DIV></DIV>");
for (l=1;l<voci[i].length;l++)
document.writeln("<DIV ID=mdep"+i+"."+l+" STYLE=\"position:absolute;left:"+eval(leftmargin+50+largo*i)+";top:"+eval(topmargin+15*l)+";width:"+largo+";height:15;background:"+roff+";visibility:hidden;curs or:hand\" onMouseOver=;mroll('mdep"+n+"."+l+"');conta++ onMouseOut=unmroll('mdep"+n+"."+l+"');conta-- CLASS=menuIE onClick=vai('"+links[i][l]+"',"+i+","+l+")> "+voci[i][l]+"</DIV>");
}
}
timer=setInterval("NascondiMenu()",1000)
function NascondiMenu()
{
if (conta==0)
{
coloratutti(true)
timer=setTimeout("coloratutti(false)",200);
timer=setTimeout("showdeps(last,false)",250);
}
}
function coloratutti(col)
{
colore=col?ron:roff;
for (i=0;i<voci.length;i++)
for (j=1;j<voci[i].length;j++)
{
if (nn)
document["mdep"+i+"."+j].bgColor=colore;
else
document.getElementById('mdep'+i+"."+j).style.background=colore;
}
}
function MostraMenu(n)
{
showdeps(last,false);
showdeps(n,true);
last=n;
}
function showdeps(n,act)
{
if (conta==0)
{
act?stat="visible":stat="hidden";
for (i=1;i<voci[n].length;i++)
(nn&&document["mdep"+n+"."+i]||document.getElementById('mdep'+n+"."+i).style).visibility=stat;}
}
function vai(dove,r,c)
{
lev=nn&&document["mdep"+r+"."+c]||document.getElementById("mdep"+r+"."+c).style;
timer=setTimeout("nn&&(lev.bgColor||lev.background)=ron",50)
timer=setTimeout("nn&&(lev.bgColor||lev.background)=roff",100)
timer=setTimeout("self.location.href='"+dove+"'",350)
}
function mroll(l)
{
nn?document.layers[l].bgColor=ron

document.all)?document.all[l].style.background=ron:document.getElementById(l).style.background=ron;
document.getElementById?document.getElementById(l).style.cursor=document.all?'hand':'pointer':'void(0)';
if (l.substr(0,4)=="mdep")
stringa=wst[l.substr(4,l.indexOf(".")-4)][l.substring(l.indexOf(".")+1,l.length)];
else if (l.length>5)
stringa=wst[l.substr(4,l.indexOf(".")-4)][0];
else
stringa="Home Page";
window.status=stringa;
timer=setTimeout("window.status=stringa",20);
}
function unmroll(l)
{
//eval(nn&&document.layers[l].bgColor||document.getElementById(l).style).bgColor=roff;//
nn?document.layers[l].bgColor=roff

document.all)?document.all[l].style.background=roff:document.getElementById(l).style.background=roff;
window.status="";
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="display:inline;">
<tr><td>
am pharetra ligula at lorem pretium in porta enim scelerisque. Cras eget nibh luctus mauris blandit posuere. Maecenas purus velit, ultricies sed volutpat eget; tincidunt a magna. Nullam accumsan tincidunt tempor. Suspendisse sagittis imperdiet justo, in sagittis est vulputate feugiat. Suspendisse malesuada sollicitudin erat, eget condimentum nisl placerat vel. Morbi eleifend sagittis nibh in iaculis. Fusce dignissim, nibh ut tristique tempus, ante magna elementum mauris, a vulputate velit nisl non mauris. Cras sollicitudin purus ac nulla pharetra malesuada. Sed aliquet dui vitae purus ultrices sagittis! Duis in ipsum felis? Maecenas lobortis aliquam rhoncus. Pellentesque sit amet lorem eget sapien congue sodales. Ut ornare bibendum dapibus. Phasellus ac velit nibh, a hendrerit velit. Quisque nec velit nunc. Aenean eget justo purus, eget volutpat ante. Cras ut orci fringilla mauris ultrices dictum a at odio. Nullam lacus neque, auctor et consectetur eget; ullamcorper ut lacus. Integer enim felis, congue id vulputate nec, fringilla nec diam.<br /></td><td> </td></tr></table>
</body>
</html>

**davelf** · 03-03-2010, 09:56 AM

. What is this some one please tell me?

**simcomedia** · 03-04-2010, 01:39 AM

Wrap the menu in a div like this:

<div id="navbar">
<ul>
<li class="green">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<li class="red">
<p><a href="#">Contact</a></p>
<p class="subtext">Get in touch</p>
</li>
<li class="blue">
<p><a href="#">Submit</a></p>
<p class="subtext">Send us your stuff!</p>
</li>
<li class="purple">
<p><a href="#">Terms</a></p>
<p class="subtext">Legal things</p>
</li>
</ul>

</div>

Then ditch the table. Tables suck. Do this:

<div id="content">
am pharetra ligula at lorem pretium in porta enim scelerisque. Cras eget nibh luctus mauris blandit posuere. Maecenas purus velit, ultricies sed volutpat eget; tincidunt a magna. Nullam accumsan tincidunt tempor. Suspendisse sagittis imperdiet justo, in sagittis est vulputate feugiat. Suspendisse malesuada sollicitudin erat, eget condimentum nisl placerat vel. Morbi eleifend sagittis nibh in iaculis. Fusce dignissim, nibh ut tristique tempus, ante magna elementum mauris, a vulputate velit nisl non mauris. Cras sollicitudin purus ac nulla pharetra malesuada. Sed aliquet dui vitae purus ultrices sagittis! Duis in ipsum felis? Maecenas lobortis aliquam rhoncus. Pellentesque sit amet lorem eget sapien congue sodales. Ut ornare bibendum dapibus. Phasellus ac velit nibh, a hendrerit velit. Quisque nec velit nunc. Aenean eget justo purus, eget volutpat ante. Cras ut orci fringilla mauris ultrices dictum a at odio. Nullam lacus neque, auctor et consectetur eget; ullamcorper ut lacus. Integer enim felis, congue id vulputate nec, fringilla nec diam.
</div>

There's more to it but that's the jist. If you stack the div's like this:

<div id="navbar">
</div>
<div id="content">
</div>

and wrap those in a container:

<div id="container" style="width:800px; margin:0; padding:0;">
<div id="navbar" style="float: left; width: 100%;">
</div>
<div id="content" style="float: left; width: 100%;">
</div>
</div>

Cryptic but that's the idea.

Thread: set display with css

Thread Tools

Search Thread

set display with css

Bookmarks

Bookmarks

Posting Permissions