Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
esse eo codigo html
<!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">
<link rel="stylesheet" type="text/css" href="style.css" />
<head>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#jslidernews3 .button-previous') ,
next:$('#jslidernews3 .button-next') };
$('#jslidernews3').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
direction:'opacity',
duration:1200,
auto:false,
mainWidth:980,
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons} );
});
</script>
<style>ul.lof-main-wapper li {
position:relative;
}
</style>
<script type="text/javascript" src=></script>
<script type="text/javascript">
$(document).ready(function() {
$('a[name=modal]').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$('#mask').css({'width':maskWidth,'height':maskHeight});
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$('.window .close').click(function (e) {
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script><!-- SCRIP MENU --->
</script>
<script type="text/javascript">
$(document).ready(function()$('#menuBar li').click(function()
{
var url = $(this).find('a').attr('href');
document.location.href = url;
});
$('#menuBar li').hover(function() $(this).find('.menuInfo').slideDown();
},
function() $(this).find('.menuInfo').slideUp();
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OFICINA | BETO & VALQUIRIAS |</title>
</head>
<body>
<div id="main">
<div id="menu100"></div>
<div id="menu">
<div id="menuBarHolder">
<ul id="menuBar">
<li class="firstchild"><a href="javascript:#">Home</a><div class="menuInfo">Voltar para cessão Inicial do Do Atualizando</div></li>
<li><a href="javascript:#">Serviços</a><div class="menuInfo">Serviços prestados durando anos</div></li>
<li><a href="javascript:#">Clientes</a><div class="menuInfo">Fotos de cliente satisfeitos com o resultados</div></li>
<li><a href="javascript:#">Mapa</a><div class="menuInfo">Mapa para achar com mais facilidade</div></li>
<li><a href="javascript:#">Contatos</a><div class="menuInfo">Contrate o nosso serviço aqui !</div></li>
</ul>
</div>
</div>
</div>
<div id="tabless">
<div id="top">
<img src="img/logo beto.png"width="376" height="74" border="0" alt="img"/>
</div>
<div id="traco"></div>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="tabless">
<div id="top">
<img src="img/logo beto.png"width="376" height="74" border="0" alt="img"/>
</div><div class="slid">
<div id="jslidernews3" class="lof-slidecontent" style="width:980px; height:300px;">
<div class="preload"><div></div></div>
<div class="button-previous">Previous</div>
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:980px; height:300px;">
<ul class="sliders-wrap-inner">
<li>
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 1</h4>
<p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_002.png" title="Newsflash 1" /><img src="images/thumbl_980x340.png" title="Newsflash 2" />
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 2</h4>
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_003.png" title="Newsflash 3" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 3</h4>
<p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_004.png" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 4</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_005.png" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 5</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
<li>
<img src="images/thumbl_980x340_006.png" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a> <i> — Monday, February 15, 2010 12:42</i></div>
<h4>Content of Newsflash 6</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
<a class="readmore" href="#">Read more </a>
</p>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="images/lofthumbs/791902news3.jpg" />
<h3> NewsFlash 1 </h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu...
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/435576news10.jpg" />
<h3> NewsFlash 2 </h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3> NewsFlash 3 </h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3> NewsFlash 4</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/641906img1.jpg" />
<h3> NewsFlash 5</h3>
<span>20.01.2010</span> -In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
<li>
<div>
<img src="images/lofthumbs/416719news7.jpg" />
<h3> NewsFlash 6</h3>
<span>20.01.2010</span> - In id, mauris viverra asperiores, bibendum in id. Eu molestie. Ac sit eu. ..
</div>
</li>
</ul>
</div>
</div>
<!----------------- END OF NAVIGATOR --------------------->
<div class="button-next">Next</div>
</div>
</div>
</div>
</div>
</div> <!--- final da div class slid ---->
<ul>
<div id="map" class="map">" height="380" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=Rua+Jo%C3%A3o+Alves++385+Engenho+Pequeno,+Nova+Igua%C3%A7u+26015150,+RJ&aq=&sll=-14.239424,-53.186502&sspn=57.176479,93.076172&ie=UTF8&hq=&hnear=R.+Jo%C3%A3o+Alves,+385+-+Parque+Engenho+Pequeno,+Nova+Igua%C3%A7u+-+Rio+de+Janeiro,+26015-150&t=m&z=14&ll=-22.742,-43.428253&output=embed"></iframe><br /><small><a href="http://maps.google.com.br/maps?f=q&source=embed&hl=pt-BR&geocode=&q=Rua+Jo%C3%A3o+Alves++385+Engenho+Pequeno,+Nova+Igua%C3%A7u+26015150,+RJ&aq=&sll=-14.239424,-53.186502&sspn=57.176479,93.076172&ie=UTF8&hq=&hnear=R.+Jo%C3%A3o+Alves,+385+-+Parque+Engenho+Pequeno,+Nova+Igua%C3%A7u+-+Rio+de+Janeiro,+26015-150&t=m&z=14&ll=-22.742,-43.428253" style="color:#0000FF;text-align:left">Exibir mapa ampliado</a></small>
</div>
<div id="local" class="l">
<P>------------------------------------------------------------------------</P>
</div>
<div id="tnc">
<h1> Ultimos Trabalhos</h1>
<p> Localidade </p>
<img src="img/dvh.png" width="1" height="497" border="0" alt="img" class="dvh"/>
<img src="img/Etiqueta.png" width="306" height="55" border="0" alt="img"/>
</div>
<div id="boxes">
<div id="dialog" class="window">
<a href="#" class="close"><img src="img/fechar.png" /></a><br />
<img src="img/betoevalkirias_142210_image.JPG"/>
</div>
<div id="dialog1" class="window">
<a href="#" class="close"><img src="img/fechar.png" /></a><br />
<img src="img/betoevalkirias_142211_image.JPG"/>
</div>
<div class="d-blank"></div>
<div class="d-login"></div>
<div id="opa" class="pqp">
<p class="text1"> Corsa 2010 </p>
<li><a href="#dialog" name="modal" class="jariba1"><p>Antes</p></a></li>
<li><a href="#dialog1" name="modal" class="jariba"><p>Depois</p></a></li>
<p class="text2"> Palio 2010 </p>
<li><a href="#dialog2" name="modal" class="jariba2"><p>Antes</p></a></li>
<li><a href="#dialog3" name="modal" class="jariba3"><p>Depois</p></a></li>
</div><!-- FIM DA DIV OPA -->
<div id="formulario">
<form id="form1" name="form1" method="post" action="enviar_contato.php">
<table width="500" border="0" cellspacing="2" cellpadding="5">
<tr>
<td width="398"><p>Nome</p>
<p>
<input name="nome" type="text" id="nome" class="form1" />
</p></td>
</tr>
<tr>
<td><p>E-Mail
</p>
<p>
<input name="Fone" type="text" id="email" class="form1" />
</p></td>
</tr>
<tr>
<tr>
<td><p>Fone
</p>
<p>
<input name="email" type="text" id="email" class="form1" />
</p>
<p>Mensagens</p></td>
</tr>
<tr>
<td><textarea name="mensagem" cols="25" rows="5" id="mensagem" class="form2" ></textarea></td>
</tr>
<td><input type="submit" name="Submit" value="Enviar Mensagem" /></td>
</tr>
</table>
</div>
<div class="lol"><p> Serviços </p>
</div>
<div class="lk">
<p>E pintura esta no ramo de <strong>reformas</strong> de automoveis para lhe oferecer serviços profissionais diversos. Tais como:<strong> Alinhador de monobloco</strong> (ciborg). <strong>Spoter digital </strong>(repuxadeira). <strong>Martelinho de ouro</strong>. Recuperação de parachoque e peças de laminação (fibra) Beto e Valkirias trabalha com: <strong>Soldas mig</strong>, <em><strong>oxigênio metal e eletrica</strong></em> Beto e valkirias tambem recupera peças de fibra e parachoques envolventes, spoiler, aerofolios etc. Beto e valkirias tambem <em><strong>pinta</strong> o seu carro geral, parcial, retoques ou micro pinturas</em>. A nossa oficina Beto e valkirias esta de portas abertas para você que quer o melhor para o seu veiculo.</p></div>
<div id="rodape">
</div>
</div>
</div>
</body>
</html>CSSS STYLE
html, body, div, span, applet, objeto, iframe
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, endereço sigla, grande, citar, código,
del, dfn, em, img, ins, kbd, q, s, samp,
greve, pequeno, forte, sub, sup, tt, var,
b, u, i, centro,
dl, dt, dd, ol, ul, li,
fieldset, forma, etiqueta, lenda,
tabela, a legenda, tbody, tfoot, thead, tr, th, td,
lona artigo, além, detalhes, embed,
figura, figcaption, cabeçalho, rodapé, hgroup,
menu, nav, de saída, rubi, seção, resumo,
tempo, marca, áudio, vídeo, menu{
margin: 0;
padding: 0;
margem: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}display: block;
}line-height: 1;
}list-style: none;
}citações: nenhum;
}conteúdo:'';
conteúdo: none;
}border-collapse: colapso;
border-spacing: 0;
}
#main{
width:100%;
position:absolute;
height: 515px;
}background-color:#CCC;
width:1024;
height:768;
}background-repeat:no-repeat;
right:0px;
left:250px;
position:absolute;
z-index:1;
}#corpo img{
margin-left:184px;
margin-right:50px;
margin-top:82px;
border:0;#tabless {
left:0;
right:0;
top:0;
width:100%;
height:100%;
overflow:hidden;top:-375px;
left:19px;.pqp {
background:#D8D8D8;
width:982px;
height:800px;
margin-left:190px;
border:0;
z-index:1;
}
.formulario {width:400px;
width:50px;
margin-top:300px;
position:absolute;
float:left;
}#formulario .form1 {
background:url(images/form.png);
width:225px;
height:35px;#formulario .form2 {
background-color:#666;
border:#999 1px solid;#formulario h1{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:30px;
color:#333F;
text-align:left;
letter-spacing: 6px;margin-top:40px;
margin-left:190px;#traco {
width:100%;
height:300px;
background:#000;
margin-top:151px;
position:absolute;
z-index:1;
clear:both;
padding:0 0 0 360px;
display: inline-block;
}body {
font-family:verdana;
font-size:15px;
}a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
position:absolute;
z-index:100000;
}.close{display:block; text-align:right;}
.jariba {
background-color:#0CF;
width:120px;
height:40px;
position:absolute;
margin-top:175px;
margin-left:57px;
left: 134px;
top: 456px;
}
.jariba1 {
background-color:#0CF;
width:120px;
height:40px;
position:absolute;
margin-top:175px;
margin-left:180px;
left: 134px;
top: 456px;
}
.jariba2 {
background-color:#0CF;
width:120px;
height:40px;
position:absolute;
margin-top:250px;
margin-left:57px;
left: 134px;
top: 456px;
}
.jariba3 {
background-color:#0CF;
width:120px;
height:40px;
position:absolute;
margin-top:250px;
margin-left:180px;
left: 134px;
top: 456px;
}.jariba1 p{
font-size:25px;
text-align:center;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;font-size:25px;
text-align:center;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;font-size:25px;
text-align:center;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;.jariba3 p{
font-size:25px;
text-align:center;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;font-size:25px;
text-align:center;
margin-top:6px;
font-family:Arial, Helvetica, sans-serif;.jariba1:hover {
background-color:#666;
}.jariba:hover {
background-color:#666;
}.jariba2:hover {
background-color:#666;;
}.jariba3:hover {
background-color:#666;;
}
.text1 {
font-size:28px;
color:#ff9900;
margin-top:105px;#tnc { position:absolute;
margin-left:155px;.text2 {
font-size:28px;
color:#ff9900;
margin-top:175px;#tnc h1{
position:absolute;
margin-left:40px;
margin-top:-3px;
width: 263px;
color:#FFF;
font-size:33px;
}position:absolute;
margin-left:470px;
margin-top:2px;
}#tnc p{
position:absolute;
margin-left:500px;
margin-top:2px;
width: 380px;
color:#FFF;
font-size:35px;
left: 10px;
}
.map {
position:absolute;
margin-left:650px;
margin-top:120px;
width: 500px;
height:180px;
color:#FFF;
z-index:3;
}
#formulario {
position:absolute;
margin-left:211px;
margin-top:-250px;
}#local{
position:absolute;
width:163px;
height:33px;
background:#3CF;
margin-left:660px;position:absolute;
width:520px;
height:33px;
margin-left:0px;
margin-top:37px;color:#Fff;
font-size:35px;
position:absolute;
margin-left:25px;
margin-top:0px;
width: 409px;
}
.lol {
position:absolute;
width:162px;
height:33px;
background:#3CF;
margin-left:660px;position:absolute;
color:#666;
margin-left:663px;
margin-top:-220px;
width:450px;- MENU STYLE -
#menuBarHolder { width: 730px; height:35px; background-color:#0CF; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
.firstchild { border-left:1px solid #ccc;}
#container { margin-top:100px;}
#menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #fff; background-color:#0CF; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#0CF;}
.menuInfo { cursor:hand; background-color:#0cF; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px;
border-radius-bottomright: 5px;border-radius-bottomleft: 5px;
}h1 {
font: 50px normal Georgia, 'Times New Roman', Times, serif;
color: #111;
margin: 0;
text-align: center;
padding: 5px 0;
}font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
#menu100{
height:46px;
width:100%;
background-color:#0CF;
position:absolute;
clear: both;
z-index:-1;
padding:0 0 0 360px;
display: inline-block;
}
#menu {
margin-left:525px;
margin-right:0px;Minha duvida é minha div #traco e #menu100
estão 100% horizontalmente ai eu diminiur a resoluçao ai ficou sobrando
eu boteei padaggin left mais ficou com barar na horizontal como regularizar isso
Carregando comentários...