Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

darabia1

Div Maldita

Por , em Desenvolvimento frontend

Recommended Posts

darabia1    0

darabia1
Postado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html>
<script type="text/javascript">var _siteRoot='index.html',_root='index.html';</script>
     <script type="text/javascript" src="js/jquery.js"></script>
     <script type="text/javascript" src="js/scripts.js"></script>    <head>

<title>Portifolio Alvaro Jr WebDevolper</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<style>
		body{
			background:#333 url(bg.jpg) repeat top Center;
			font-family:Arial;
		}
		span.reference{
			position:fixed;
			left:10px;
			bottom:10px;
			font-size:12px;
		}
		span.reference a{
			color:#aaa;
			text-transform:uppercase;
			text-decoration:none;
			text-shadow:1px 1px 1px #000;
			margin-right:30px;
		}
		span.reference a:hover{
			color:#ddd;
		}
		ul.sdt_menu{
			margin-top:150px;
		}
		h1.title{
			text-indent:-9000px;
			background:transparent url(title.png) no-repeat top left;
			width:633px;
			height:69px;
		}
	</style>
	<style>
.shadow {
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
}
</style>
<style type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:0.1;}
div.sidebar-social-gadget img:hover {opacity:1;-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;}
</style>

<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
<script language="JavaScript" type="text/JavaScript">

<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

   <body>
<div class="shadow" style="position:absolute; left:2px; top:460px; width:1577px; height:164px; z-index:1"> 
 <p><font color="#0099FF" size="4"><strong>Quem Sou Eu' </strong></font></p>
 <p> </p>
 <blockquote>
   <p align="left"><font color="#FFFFFF" size="4"><font size="3"><font face="Comic Sans MS"><em>Inicianante 
     Programador, Conhecimento em, <font color="#FF0000">Css, Jquery, JavaScrip, 
     ActionScrip, Html</font>, </em></font></font></font> <font color="#FFFFFF" face="Comic Sans MS"><em><font size="4"><font size="3">Sempre 
     </font></font></em></font><font color="#FFFFFF" face="Comic Sans MS"><em><font size="4"><font size="3">ouso 
     Agregar </font></font></em></font><font color="#FFFFFF" face="Comic Sans MS"><em><font size="4"><font size="3">Alguns 
     </font></font></em></font></p>
   <p align="left"><font color="#FFFFFF" face="Comic Sans MS"><em><font size="4"><font size="3">Estilo 
     Diferente para os meu Layout, Brevemente Estarei Me Aperfeiçoando nas tecnicas</font></font></em></font><em><font color="#FFFFFF" size="3" face="Comic Sans MS"> 
     </font></em><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3"><font size="3">e 
     ultima</font> t<font size="3">ende</font></font></em></font><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3"><font size="3">ncia 
     de </font></font></em></font></p>
   <p align="left"><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3"><font size="3">programação 
     e designer Ja estarei Criando </font>site com sistemas de banco de dados 
     comprar</font></em></font><em><font color="#FFFFFF" size="3" face="Comic Sans MS"> 
     </font></em><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3">online 
     e etc,,</font></em></font><em><font color="#FFFFFF" size="3" face="Comic Sans MS"> 
     </font></em><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3">sistema 
     <font color="#FF0000">php mysql</font> </font></em></font></p>
   <p align="left"><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3">que 
     ja tenho um breve conhecimento neste tipo de linguagem <font color="#FFFFFF" face="Comic Sans MS"><em>Web</em></font></font> 
     <font size="3">Edição, Software, Adobe</font></em></font><em><font color="#FFFFFF" size="3" face="Comic Sans MS"> 
     </font></em><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3">Dreamweaver, 
     Adobe Photoshop,</font></em></font></p>
   <p align="left"><font color="#FFFFFF" face="Comic Sans MS"><em><font size="3"> 
     FlashMx, Adobe CorelDraw, Firewroks Mx. Adobe Photoshop Cs4.</font></em></font></p>
   </blockquote>
</div>

<div class="shadow" style="position:absolute; left:2px; top:679px; width:344px; height:282px; z-index:2"> 
 <form action="grava.php" method="post" name="form1" id="form1">
   <table width="367"  border="0" cellspacing="2" cellpadding="0">
     <!--DWLayoutTable-->
     <tr> 
       <td width="243" height="21" valign="top"><p align="left" class="style2"><font color="#0099FF" size="4">Enquete: 
           Opine Sobre Site</font></p></td>
       <td width="21"></td>
       <td width="52"></td>
       <td width="41"></td>
     </tr>
     <tr> 
       <td height="18" valign="top" class="style1"><p> 
           <?php include("pergunta.txt"); ?>
            </p>
         <p> </p>
         <p> </p></td>
       <td></td>
       <td></td>
       <td></td>
     </tr>
     <tr class="style1"> 
       <td height="18" valign="top"><div align="left"> <em>
           <input name="voto" type="radio" value="R" />
           <font color="#CCCCCC">Bom</font> </em></div></td>
       <td valign="top"> 
         <?php include("op1.txt"); ?>
       </td>
       <td></td>
       <td></td>
     </tr>
     <tr class="style1"> 
       <td height="18" valign="top"><div align="left"> 
           <input name="voto" type="radio" value="B" />
           <font color="#CCCCCC"> <em>Regular</em></font></div></td>
       <td valign="top"> 
         <?php include("op2.txt"); ?>
       </td>
       <td></td>
       <td></td>
     </tr>
     <tr class="style1"> 
       <td height="18" valign="top"><div align="left"> <font color="#CCCCCC"> 
           <em>
           <input name="voto" type="radio" value="O" />
           Ruim</em></font></div></td>
       <td valign="top"> 
         <?php include("op3.txt"); ?>
       </td>
       <td></td>
       <td></td>
     </tr>
     <tr> 
       <td height="25" valign="top"><div align="center"> 
           <p> </p>
           <p> 
             <input type="image" src="btn_votar.png" width="58" height="25" scr="bt_votar.png" />
           </p>
         </div></td>
       <td> </td>
       <td> </td>
       <td> </td>
     </tr>
     <tr> 
       <td height="18" colspan="3" align="right" valign="top" class="style1"><a href="resultado.php"> 
         <font color="#0099FF">Resultados</font></a></td>
       <td></td>
     </tr>
   </table>
 </form>
</div>    
<!--content featured gallery here -->
<div id="oi" style="position:absolute; left:393px; top:797px; width:780px; height:225px; z-index:3"> 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <div id="header"> 
   <!--/center-->
   <div id="header"> 
     <div class="wrap"> 
       <div id="slide-holder"> 
         <div id="slide-runner"> <a href=""><img id="slide-img-1" src="http://3.bp.blogspot.com/-MsOvnnmb5ok/Tk5VS0utXPI/AAAAAAAAAYg/tQHgH2j6jzc/s1600/4237arte.jpg" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-2" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Museu_de_Arte_Contempor%C3%A2nea_de_Niter%C3%B3i.jpg" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-3" src="http://2.bp.blogspot.com/_iM2QC611-hE/S9riMfUwGKI/AAAAAAAAEg0/x97pTi98yAE/s1600/GetAttachment.jpg" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-4" src="http://3.bp.blogspot.com/_ogOziT6hhAo/TVMGne8TUJI/AAAAAAAAAgE/YByrnYpLFyU/s1600/ARTE+CONTEMPORANEA+2.JPG" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-5" src="http://www.jornaldoalgarve.pt/wp-content/uploads/2010/06/Ver%C3%A3o-2007-Bota-Flip-Salir-Mabecagem-151.jpg" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-6" src="" class="slide" alt="" /></a> 
           <a href=""><img id="slide-img-7" src="" class="slide" alt="" /></a> 
           <div id="slide-controls"> 
             <p id="slide-client" class="text"><strong>post: </strong><span></span></p>
             <p id="slide-desc" class="text"></p>
             <p id="slide-nav"></p>
           </div>
         </div>
         <!--content featured gallery here -->
       </div>
       <script type="text/javascript">
   if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Imagens Borg","desc":"Imagens Abstrator Arstiticos"},{"id":"slide-img-2","client":"Imagens Borg","desc":"Museu De Arte"},{"id":"slide-img-3","client":"Imagens Borg","desc":"Desenho Antigo"},{"id":"slide-img-4","client":"Imagens Borg","desc":"Quadro Artistico"},{"id":"slide-img-5","client":"Imagens Borg","desc":"Parede Artistica"},{"id":"slide-img-6","client":"Imagens Borg","desc":"Continuaçao"},{"id":"slide-img-7","client":"Imagens Borg","desc":"Tambem Nao sEI"}];
  </script>
     </div>
   </div>
   </div>
</div>
<div class="shadow" style="position:absolute; left:406px; top:655px; width:798px; height:304px; z-index:4"></div>
<div id="Layer1" style="position:absolute; left:384px; top:1063px; width:659px; height:61px; z-index:5"> 
 <div class="sidebar-social-gadget"> <a title="Entre em contato conosco" href="link-da-página-de-contato"><img src="flickr.png" alt="E-mail" width="118" height="66" border="0" /></a> 
   <a title="Assine o Feed" href="link-do-seu-feed" target="_blank"><img src="facebook.png" alt="Feed" width="118" height="66" border="0" /></a> 
   <a title="Siga-me no Twitter" href="link-do-seu-perfil-no-twitter" target="_blank"><img src="twitter.png" alt="Twitter" width="118" height="66" border="0" /></a> 
   <a title="Me adicione no Facebook" href="link-do-seu-perfil-no-facebook" target="_blank"><img src="rss.png" alt="Facebook" width="118" height="66" border="0" /></a> 
 </div>
</div>
</div> 
<script type="text/javascript">
   if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
  </script>
 </div></div><!--/header--></div>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<div class="content">

 <h1 class="title"> </h1>
 <ul id="sdt_menu" class="sdt_menu">
   <li> <a href="#"> <img src="images/2.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">Home</span> <span class="sdt_descr">Volta 
     Inicial</span> </span> </a> </li>
   <li> <a href="#"> <img src="images/1.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">Portfolio</span> <span class="sdt_descr">Meu 
     Trabalhos</span> </span> </a> 
     <div class="sdt_box"> <a href="#">Websites</a> <a href="#">Illustrations</a> 
       <a href="#">LogoTipo</a> </div>
   </li>
   <li> <a href="ideia.html"> <img src="images/3.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">inspiração</span> <span class="sdt_descr">Onde 
     as idéias se nasce</span> </span> </a> </li>
   <li> <a href="#"> <img src="images/4.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">Fotos</span> <span class="sdt_descr">Gosto 
     de fotografia</span> </span> </a> </li>
   <li> <a href="#"> <img src="images/5.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">Contatos</span> <span class="sdt_descr">Fale 
     comigo</span> </span> </a> </li>
   <li> <a href="#"> <img src="images/6.jpg" alt=""/> <span class="sdt_active"></span> 
     <span class="sdt_wrap"> <span class="sdt_link">Projetos</span> <span class="sdt_descr">Projeto 
     em andamento</span> </span> </a> 
     <div class="sdt_box"> <a href="#">Foto</a> <a href="#">website</a> <a href="#">Sistema</a> 
     </div>
   </li>
 </ul>
	</div>
<div> </div>

       <!-- The JavaScript -->
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easing.1.3.js"></script>
       <script type="text/javascript">

           $(function() {
			/**
			* for each menu element, on mouseenter, 
			* we enlarge the image, and show both sdt_active span and 
			* sdt_wrap span. If the element has a sub menu (sdt_box),
			* then we slide it - if the element is the last one in the menu
			* we slide it to the left, otherwise to the right
			*/
               $('#sdt_menu > li').bind('mouseenter',function(){
				var $elem = $(this);
				$elem.find('img')
					 .stop(true)
					 .animate({
						'width':'170px',
						'height':'170px',
						'left':'0px'
					 },400,'easeOutBack')
					 .andSelf()
					 .find('.sdt_wrap')
				     .stop(true)
					 .animate({'top':'140px'},500,'easeOutBack')
					 .andSelf()
					 .find('.sdt_active')
				     .stop(true)
					 .animate({'height':'170px'},300,function(){
					var $sub_menu = $elem.find('.sdt_box');
					if($sub_menu.length){
						var left = '170px';
						if($elem.parent().children().length == $elem.index()+1)
							left = '-170px';
						$sub_menu.show().animate({'left':left},200);
					}	
				});
			}).bind('mouseleave',function(){
				var $elem = $(this);
				var $sub_menu = $elem.find('.sdt_box');
				if($sub_menu.length)
					$sub_menu.hide().css('left','0px');

				$elem.find('.sdt_active')
					 .stop(true)
					 .animate({'height':'0px'},300)
					 .andSelf().find('img')
					 .stop(true)
					 .animate({
						'width':'0px',
						'height':'0px',
						'left':'85px'},400)
					 .andSelf()
					 .find('.sdt_wrap')
					 .stop(true)
					 .animate({'top':'25px'},500);
			});
           });

$(document).ready(function() {
$(".conteudo").hide();
$("ul.menu li:first").addClass("active").show(); 
$(".conteudo:first").show('slow'); 
$("ul.menu li").removeClass("actuve")
    });

});



<table width="1185" border="0" cellpadding="0" cellspacing="0">
 <!--DWLayoutTable-->
 <tr> 
   <td width="632" height="715"> </td>
   <td width="553"> </td>
 </tr>
 <tr>
   </tr>
</table>
</body>
</html>

 

So pra testificar so nao funciona no IE

 

ESSE EO EFEITO DA DIV

<style>
.shadow {
box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.6);
}
</style>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito