Crei um layout com tableless que ficou legal, mas ocorre que tem uma liha que é pulada do nada, quero tirar isso, deixar o layout certinho, já procurei pelos margin e padding, mas não tem nada errado, o link da página é esse:
Link
pode-se ver o código fonte para entender o que está acontecendo, mas vou mostrar aqui:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CidaBarros</title>
<link rel="stylesheet" type="text/css" href="css/cida.css" />
<script language="JavaScript" src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/orbit.css" />
<script src="script/home_orbit_config.js" type="text/javascript"></script>
</head>
<body style="background:#303"><div style="margin-left: auto; margin-bottom: 0; margin-right: auto; margin-top: 40px; width: 1024px; background-image:url(imagens/cidabarros.jpg); background-position:top; background-repeat:repeat-x;">
<div style="width: 1024px;">
<div>
<div style="width: 10px; height: 550px; float: left;"></div>
<div style="width: 238px; height: 550px; float: left;"><img src="imagens/logomin.png" style="margin: 50px 15px 15px 15px;" /></div>
<div style="width: 10px; height: 550px; float: left;"></div>
<div id="conteudo">
<div id="linha2" style="margin-top: 50px; text-align: center; line-height:12px; color:#DAC2CD;" class="rodape"> Endereço - Telefone - Emails
</div>
<div class="clear"></div>
<div style="width: auto; text-align: center; margin: auto; padding: 0pt; width: 740px; height: 400px;">
<div id="flash">
<!-- START FLASH -->
<div id="home_featured">
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG0.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG1.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG2.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG3.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG4.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG5.jpg" /></a></div>
<div class="content"><a href="#"><img alt="" src="imagens/home_imagens/BG6.jpg" /></a></div>
</div>
<!-- END FLASH -->
</div>
</div>
<div class="clear"></div>
<div id="linha2" style=" text-align: center; line-height:12px; color:#DAC2CD;" class="rodape">
<a href="index.php">Home</a> - <a href="index.php?page=perfil" class="rodape">Perfil</a> - <a href="index.php?page=galeria">Galeria</a> - <a href="index.php?page=contato">Contato</a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
E o Css usado estão em dois arquivos:
Esse foi o que eu criei
#linha1 {
width:918px;
height: 25px;
background-image:url(../imagens/sombra_topo.png);
}
#recuolinha1 {
float:left;
width:72px;
height: 25px;
}
#conteudolinha1 {
float:left;
height: 25px;
}
.clear{
clear:both;
}
#linha2 {
width:740px;
height: 16px;
background: #7F5065;
}
#conteudolinha2 {
float:left;
height: 16px;
margin-left: 46px;
}
#linha3 {
width:740px;
height: 25px;
}
#conteudolinha3 {
float:left;
height: 25px;
margin-left: 46px;
}
#padesq {
float:left;
width: 26px;
height: 430px;
background-image:url(../imagens/sombra_esq.png);
}
#paddir {
float:left;
width: 26px;
height: 430px;
background-image:url(../imagens/sombra_dir.png);
}
#conteudo {
float:left;
width: 740px;
height: 430px;
/* margin: 10px;*/
}
#button{
width:918px;
height: 25px;
background-image:url(../imagens/sombra_baixo.png);
}
.rodape a{
padding: 0 13px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color:#DAC2CD;
text-decoration:none;
}
.rodape a:hover {
color:#ffffff;
}
.h415{
height:400px;
background:url(../imagens/backgroundct.png);
}
Esse é o da própria galeria
/* CSS for jQuery Orbit Plugin 1.2.s
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
/* CONTAINER
================================================== */
div.orbit-wrapper {
width: 1px;
height: 1px;
position: relative; }
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden }
div.orbit>img {
position: absolute;
top: 0;
left: 0;
display: none; }
div.orbit a img {
border: none }
.orbit div {
position: absolute;
top: 0;
left: 0;
width: 740px;
height: 400px; }
/* TIMER
================================================== */
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right: 10px;
opacity: .6;
cursor: pointer;
z-index: 1001; }
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(orbit/rotator-black.png) no-repeat;
z-index: 3; }
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden; }
span.rotator.move {
left: 0 }
span.mask.move {
width: 40px;
left: 0;
background: url(orbit/timer-black.png) repeat 0 0; }
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: url(orbit/pause-black.png) no-repeat;
z-index: 4;
opacity: 0; }
span.pause.active {
background: url(orbit/pause-black.png) no-repeat 0 -40px }
div.timer:hover span.pause,
span.pause.active {
opacity: 1 }
/* CAPTIONS
================================================== */
.orbit-caption {
display: none;
font-family: "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif; }
.orbit-wrapper .orbit-caption {
background: #000;
background: rgba(0,0,0,.6);
z-index: 1000;
color: #fff;
text-align: center;
padding: 7px 0;
font-size: 13px;
position: absolute;
right: 0;
bottom: 0;
width: 100%;
min-height:400px;
overflow:hidden;}
/* DIRECTIONAL NAV
================================================== */
div.slider-nav {
display: block }
div.slider-nav span {
cursor: pointer;
height: 50px;
margin-top: -20px;
position: absolute;
text-indent: -9999px;
top: 50%;
width: 39px;
z-index: 1000; }
div.slider-nav span.right {
background: url(orbit/right-arrow.png);
right: 0; }
div.slider-nav span.left {
background: url(orbit/left-arrow.png);
left: 0; }
/* BULLET NAV
================================================== */
.orbit-bullets {
bottom: 0;
list-style: none outside none;
margin-left: -50px;
padding: 0;
position: absolute;
right: 0;
z-index: 1000; }
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background: url(orbit/bullets.gif) no-repeat 0 0;
width: 15px;
height: 15px;
overflow: hidden; }
.orbit-bullets li.active {
color: #222;
background-position: -15px 0; }
.orbit-bullets li.has-thumb {
background: none;
width: 100px;
height: 75px; }
.orbit-bullets li.active.has-thumb {
background-position: 0 0;
border-top: 2px solid #000;
}
#flash {
height: 400px;
/*margin: 20px 20px 20px 20px;*/
text-align: center;
display: block;
}
#home_featured {
height:400px;
overflow:hidden;
display: block;
}
Já tentei acertar, estudar o código, no dreamweaver não aparece essa linha pulada, Alguém pode me ajudar?
Esqueci de avisar, o local onde a linha é pulada é logo após a barra onde tem escrito Endereço - Telefone - Emails, era para essa barra ficar junto ao conteúdo seguinte, coladinho.
descobri que está aparecendo isso entre as divs
"
"
<div class="clear"></div>
<div style="width: auto; text-align: center; margin: auto; padding: 0pt; width: 740px; height: 400px;">
[/quote]
