Bom dia, pessoal.
Sou novo com CSS e estou fazendo meu primeiro site usando esse estilo.
Mas, me deparei com uns problemas, vou cita-los, e abaixo posto um link para o conteúdo hospedado e postarei também diretamente o código para o caso de alguem conseguir me ajudar.
Bom, vamos lá, se alguem puder debugar pra mim o código e me dizer onde estão os conflitos, por favor, seria de grande ajuda. essa hospedagem está bem lenta, então a imagen de fundo vai demorar a aparecer, mas não acho que isso é problema.
1° Problema: Em todas as divs, se eu não colocar um <
.br /> antes de todo o conteúdo, o primeiro parágrafo do texto não aparece, consequentemente quando coloco o br, ele aparece, mas pula uma linha. isso acontece quando o conteúdo da div é de imagens também.
2°: Não consigo centralizar o menu, notem que ele está deslocado para a direita.
3°: Só consigo inserir imagens diretamente com src, Mas não consigo alinha-las por código, tive que ´burlar´ o alinhamento colocando a imagem com a width da div e usando png transparente.
4°: Agora que hospedei, vi que o menu não está totalmente junto da borda superior da página como deveria estar.
Talvez tenha mas alguns probleminhas que vou me lembrar mais tarde. aí qualquer coisa eu volto a perguntar.
Aqui está o Código Css e HTML da página. e uma screen de como supostamente ela vai ficar depois de pronta.
Por favor, peço que me ajudem.
<!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>Untitled Document</title>
</head>
<style>
@import "global.css";
body {
color:#000000;
background: #082a4a;
font-weight: normal;
}
#Centralizador {
width:638px;
height:43px;
display:block;
margin:0 auto;
}
#Barramenu {
border-bottom: 2px solid #0c3066;
background:url(images/fundomenu.gif);
width:100%;
height:43px;
display:block;
font-family:cibreo;
font-size:15px;
font-weight:bold;
font-stretch:condensed;
}
#Barramenu ul.Centralizador {
margin:0 auto;
float: left;
width: 638px;
height:43px;
list-style:none;
display:block;
}
#Barramenu ul.Centralizador li {
text-align:center;
float:left;
display:block;
background:url(images/divisoriamenu.gif) no-repeat left top;
width:106px;
height:43px;
}
#Barramenu ul.Centralizador li a.item1 {
background:url(images/home.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item1:hover {
background:url(images/homeh.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item2 {
background:url(images/empresa.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item2:hover {
background:url(images/empresah.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item3 {
background:url(images/servicos.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item3:hover{
background:url(images/servicosh.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item4 {
background:url(images/links.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item4:hover {
background:url(images/linksh.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item5 {
background:url(images/contato.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item5:hover {
background:url(images/contatoh.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li > a.item6 {
width:108px;
}
#Barramenu ul.Centralizador li a.item6 {
background:url(images/localizacao.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a.item6:hover {
background:url(images/localizacaoh.gif) no-repeat right top;
}
#Barramenu ul.Centralizador li a{
height:43px;
display:block;
text-indent:-9999px;
outline:none;
}
#logo{
background:url(images/logo.png) left top no-repeat;
color:#000000;
width:820px;
height:114px;
display:block;
margin: 0 auto;
}
#Fundodiv {
margin: 0 auto;
color:#000000;
display:block;
background:url(images/background-novo.png) no-repeat center top #FFFFFF;
width:100%;
}
#Corpomeio {
color:#000000;
width:820px;
display:block;
background:url(images/box.png) no-repeat center top;
margin:0 auto;
}
#conteudo{
margin: 0 auto;
width:100%;
display:block;
text-indent: -9999px;
padding-top:10px;
}
#contentleft {
background:url(images/dividediv.png) repeat-y center;
color:#000000;
float:left;
width:550px;
padding-right:14px;
display:block;
margin: 0 auto;
text-align: justify;
padding-left: 20px;
}
#innertop {
color:#000000;
float:left;
width:100%;
display:block;
margin: 0 auto;
text-align: justify;
}
#innerleft {
background:#d6e5f1;
color:#000000;
float:left;
height:400px;
width:146px;
display:block;
margin: 0 auto;
text-align: justify;
}
#innerright {
color:#000000;
float:left;
width:384px;
display:block;
margin: 0 auto;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}
#innerbottom {
background:url(images/innerbottom.gif) no-repeat left top;
color:#000000;
float:left;
width:552px;
height:134px;
display:block;
margin: 0 auto;
text-align: justify;
overflow:hidden;
}
#contentright {
color:#000000;
float:left;
width: 200px;
display:block;
margin: 0 auto;
text-align: justify;
padding-left: 13px;
}
#Rodape{
color:#FFFFFF;
background:url(images/picote.png) repeat-x top;
width:100%;
height:100px;
margin:0 auto;
display:block;
text-align:center;
font-family:Arial;
font-size:16px;
text-indent:-9999px;
}
.clear { clear:both; overflow:hidden; height:1px; text-indent:-9999px; }
</style>
<body>
<div align="center">
<div id="Barramenu">
<div id="Centralizador">
<ul class="Centralizador">
<li><a class="item1" href="#">HOME</a></li>
<li><a class="item2" href="#">EMPRESA</a></li>
<li><a class="item3" href="#">SERVIÇOS</a></li>
<li><a class="item4" href="#">LINKS</a></li>
<li><a class="item5" href="#">CONTATO</a></li>
<li><a class="item6" href="#">LOCALIZACAO</a></li>
<div class="clear"> </div>
</ul>
</div>
</div>
</div>
<div id="Fundodiv">
<div id="logo"></div>
<div id="Corpomeio">
<div id="conteudo">
<div id="contentleft">
<div id="innertop"><br />
<img src="images/bemvindo.png" width="563" height="23" />
</div>
<div class="clear"> </div>
<div id="innerleft"><br />
<img src="images/noticias.png" width="146" height="27" />
</div>
<div id="innerright"><br />
Donec eu arcu et elit tempor pulvinar non vitae ante. Sed ante justo, tempor eget lacinia eu, venenatis sed justo. Suspendisse et nulla mauris, vel laoreet nulla. Sed ultricies sapien at tortor volutpat eget tempus orci ornare. Mauris cursus, urna vel
ornare iaculis, lectus mi faucibus nisl, non interdum est eros vel magna. Vestibulum pellentesque hendrerit velit eget sodales.
In sodales porta convallis. Aliquam vel lectus massa. Pellentesque egestas hendrerit mi eget gravida. Aliquam interdum semper
lacus eget vulputate.
Proin tempus erat non urna condimentum sagittis. Fusce bibendum ante vel urna rhoncus ac rhoncus leo ultricies. Morbi nec dolor id
urna volutpat commodo at nec libero. <br />
<br />
Nam egestas consequat egestas. Donec ac turpis sit amet tellus dictum molestie. Suspendisse rutrum neque vitae nisl interdum
ultrices. Maecenas in enim nec leo rutrum tincidunt id vel mi. Duis tempor ante nec erat cursus tempor. Phasellus accumsan risus
metus, nec ultrices ligula. Pellentesque facilisis egestas arcu, in ornare ante egestas pellentesque. Maecenas cursus ornare
tincidunt. Integer pellentesque est nec turpis aliquet euismod. Pellentesque nec leo ante. Fusce odio ligula, adipiscing sit amet
blandit eu, tempor ac nulla. Aliquam at aliquet magna.
</div>
<div id="innerbottom"></div>
<div class="clear"> </div>
</div>
<div id="contentright"><br/ >
<img src="images/infraest.png" width="200" height="23" /><br/ ><br/ >
<img src="images/breve1.png" width="200" height="141" />
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div id="Rodape">Aqui vai o papel picotado</div>
</body>
</html>E aqui está uma imagem de como a pagina futuramente deverá ficar:
Desde já agradeço a todos que puderem me ajudar.
