Ir para conteúdo

POWERED BY:

Arquivado

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

the_wizard

[Resolvido] Alinhamento de elementos

Por , em Desenvolvimento frontend

Recommended Posts

the_wizard    0

the_wizard
Postado

Olá pessoal gostaria de saber como alinhar os links da navbar do site para que os mesmos fiquem no mesmo alinhamento do conteudo, tentei diversas formas e não obtive sucesso.

O link para o site é este: http://www.testeserver1.xpg.com.br/

 

O codigo CSS:

 

/* CSS Document */

/* CSS Reset */

* {
    padding: 0;
    margin: 0;
    border: 0;
	}


body {
margin:0px;
}

#tudo {
width:100%;
background:#006699;
overflow:hidden;
margin:0 auto;
}

#topo_sup {
background:url(../imagens/topo_sup.jpg)repeat-x;
width:100%;
height:20px;
}

#topo_sup ul {
list-style:none;
}

#topo_sup ul li {
display:inline;
}

#topo_sup ul li a {
font-family:Arial, Helvetica, sans-serif;
font-size:small;
color:#CCCCCC;
text-decoration:none;
float:right;
margin-right:10px;
padding:0 10px 0 0;
}

#topo_sup ul li a:hover {
text-decoration:underline;
color:#FFFFFF;
}

#topo {
height:120px;
width:100%;
background:url(../imagens/bg_top.jpg)repeat-x;
text-align:right;
}

#navbar {
height:50px;
width:100%;
background:url(../imagens/barra_navbar.jpg) repeat-x;
background-repeat:repeat;
float:left;
}

#navbar ul {
list-style:none;
}

#navbar ul li {
display:inline;
}

#navbar ul li a {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
float:left;
padding-top:15px;
margin-left:15px;
}

#navbar ul li a:hover {
text-decoration:none;
font-weight:bold;
background:#CCCCCC;
}

#conteudo {
margin:0 auto;
width:930px;
height:800px;
}


#principal {
background:#FFFFFF;
width:590px;
height:800px;
float:left;
margin-top:10px;
margin-bottom:10px;
border-left:#999999 10px solid;
border-top:#cccccc 10px solid;
border-bottom:#cccccc 10px solid;
padding-left:10px;
padding-right:10px;
padding-top:10px;
}

/* Formatação da Barra lateral e dos Menus */

#barralateral {
background:url(../imagens/bg_barlat.jpg) repeat-y;
float:right;
margin-top:10px;
margin-bottom:10px;
width:300px;
height:810px;
border-right:#999999 10px solid;
border-top:#cccccc 10px solid;
border-bottom:#cccccc 10px solid;
}

#solucoes {
font-family:Arial, Helvetica, sans-serif;
color:#00FF99;
}

.solucoes_titulo {
background:#000000;
color:#FFFFFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
}


#solucoes ul {
color:#FF9900;
text-align:left;
padding-left:10px;
line-height:30px;
list-style:none;
}

#solucoes ul li a {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
text-decoration:none;
}

#solucoes ul li a:hover {
text-decoration:underline;
color:#000000;
font-weight:bold;
}

#noticias {
font-family:Arial, Helvetica, sans-serif;
color:#FF6600;
height:50px;
font-family:Arial, Helvetica, sans-serif;
}

.noticias_titulo {
background:#000000;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
}

#twitter {
height:50px;
font-family:Arial, Helvetica, sans-serif;
}

.twitter_titulo {
background:#000000;
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
}

/* Rodape */

#rodape {
width:100%;
height:50px;
background:url(../imagens/bg_top.jpg) repeat-x;
border-top:#999999 3px solid;
margin: 0 auto;
clear:both;
}

 

E o HTMl este:

 

<!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=iso-8859-1" />
<title>:: C7 Studio Web ::</title>
<link rel="stylesheet" href="CSS/estiloc7.css" type="text/css" />
</head>

<body>

<div id="tudo">

<div id="topo_sup">
<ul>
<li><a href="caminho.html"><strong> Contato</strong> </a></li>
<li><a href="caminho.html"><strong> Feeds RSS</strong> </a></li>
<li><a href="camiho.html"><strong> Twitter</strong> </a></li>
<li><a href="caminho.html"><strong> Home</strong></a></li>
</ul>
</div>

<div id="topo"></div>

<div id="navbar">
<ul>
<li><a href="#na"> Home </a></li>
<li><a href="#nb"> Soluções </a></li>
<li><a href="#nc"> Quem Somos </a></li>
<li><a href="#nd"> Contato </a></li>
</ul>
</div>

<div id="conteudo">
<div id="principal">

<p>Lorem ipsum dolor sit amet, nunc amet est, urna conubia blandit faucibus iaculis mattis, non lectus sem non quam amet cras, porta mauris, curae per adipiscing est eleifend. Eleifend dictumst mauris volutpat leo eu, aliquam non. Imperdiet minima sapien tincidunt class lorem. Nec sed, arcu vel tortor dui ut mauris, mauris eu semper ad, montes volutpat et etiam luctus sapien. Sagittis ligula, ac nec, amet malesuada montes egestas nam eget nam, turpis tristique in donec, malesuada id porta elementum netus.</p>

<p> Risus felis. Quis dolor rutrum et elementum ante. Risus pharetra, et fermentum, id sed sollicitudin pretium interdum. Habitant vel tellus nec, suspendisse convallis, auctor neque, nunc aliquet. Dolor ut nunc arcu cras sit, odio a, cras id vulputate, neque tristique facilisi ornare aliquam nunc. Leo in libero, lectus ultrices. Est nibh metus pulvinar vehicula iaculis, vestibulum sapien curabitur ac venenatis per at, scelerisque fusce nibh pede, rutrum metus, ligula hendrerit urna quis ut. In elit facilisis bibendum nibh et, lacus a, cum maecenas, egestas orci donec lacus in lorem facilisi, vel augue risus. Nunc nunc sit dignissim, enim integer, ut vulputate. Sed sodales lacinia at quam vitae fringilla. Aliquam nunc, fusce ligula morbi ligula ridiculus, dui consequat tellus in ac, et sit aliquet, imperdiet curabitur elit maecenas wisi eget. Massa vel wisi sodales eu rutrum erat, ultrices rhoncus felis, curabitur id mattis, ornare mollis libero, sed tempor wisi erat.</p>
<br />
<p> Risus felis. Quis dolor rutrum et elementum ante. Risus pharetra, et fermentum, id sed sollicitudin pretium interdum. Habitant vel tellus nec, suspendisse convallis, auctor neque, nunc aliquet. Dolor ut nunc arcu cras sit, odio a, cras id vulputate, neque tristique facilisi ornare aliquam nunc. Leo in libero, lectus ultrices. Est nibh metus pulvinar vehicula iaculis, vestibulum sapien curabitur ac venenatis per at, scelerisque fusce nibh pede, rutrum metus, ligula hendrerit urna quis ut. In elit facilisis bibendum nibh et, lacus a, cum maecenas, egestas orci donec lacus in lorem facilisi, vel augue risus. Nunc nunc sit dignissim, enim integer, ut vulputate. Sed sodales lacinia at quam vitae fringilla. Aliquam nunc, fusce ligula morbi ligula ridiculus, dui consequat tellus in ac, et sit aliquet, imperdiet curabitur elit maecenas wisi eget. Massa vel wisi sodales eu rutrum erat, ultrices rhoncus felis, curabitur id mattis, ornare mollis libero, sed tempor wisi erat.</p>

</div>

<div id="barralateral">
<div id="solucoes">
<div class="solucoes_titulo">Soluções</div>
<ul>
<li><a href="/./">Layouts<br /></a></li>
<li><a href="/./">Desenvolvimento Web<br /></a></li>
<li><a href="/./">Customização Blogger<br/></a></li>
<li><a href="/./">Criação de Banners<br/></a></li>
<li><a href="/./">Marketing Digital<br/></a></li>
<li><a href="/./">Criação de Newslatter<br/></a></li>
</ul>
</div>

<div id="noticias"></div>
<div class="noticias_titulo">Noticias</div>

<div id="twitter"></div>
<div class="twitter_titulo">Twitter</div>

</div>
</div>
<div id="rodape">

<p align="right"> Copyright 2009-2010 - Todos os Direitos Reservados</p>

</div>

</body>
</html>

Bem pessoal conto com a ajuda de vocês para me ajudarem mais uma vez! vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

the_wizard    0

the_wizard
Postado

Muito obrigado pela colaboração Desnickadu, mas o margin-left, muda a posição e não fica alinhando em direntes resoluções. Gostaria de saber alguma forma de deixar ele alinhando e "fixo" independente da resolução, igual ao site aki do Imaster.

Com relação a validação do CSS ja validei ele localmente e está tudo OK. Se puder me informar qual são esses "probleminhas" fikarei grato!

 

De qualquer maneira obrigado e espero que me ajudem com a resolução deste problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nino Giovanny    0

Nino Giovanny
Postado

Olá the_wizard,

 

tenta só colocar sua div "navbar" dentro da div conteudo...

 

 
<div id="conteudo">  
 <div id="navbar"> 
   <ul>
     <li><a href="#na"> Home </a></li> 
     <li><a href="#nb"> Soluções </a></li> 
     <li><a href="#nc"> Quem Somos </a></li> 
     <li><a href="#nd"> Contato </a></li> 
   </ul> 
 </div> 
 <div id="principal">
 ...

 

resolve teu problema?

 

abs

Compartilhar este post

Link para o post
Compartilhar em outros sites

the_wizard    0

the_wizard
Postado

carissimo Nino Giovanny muito obrigado pela ajuda, sua dica resolveu em partes meus problemas pois os links da navbar ficaram na posição correta mas a navbar deixou de ter a width 100%, passando a ter o mesmo tamanho da div conteudo. Como posso deixa-la novamente em 100% mantendo os links alinhados?

 

Mais uma vez obrigado e conto novamente com a ajuda de vcs!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Desnickadu    0

Desnickadu
Postado

agora que parei pra ver que você centralisou o conteudo, desculpa =X

 

define uma largura pro 'ul' da 'navbar' e declara 'margin: 0 auto;'

assim o menu fica centralisado, e dentro dele você alinha o texto como precisar.

 

você pode trabalhar com o 'ul' como se fosse um 'div', os dois são elementos de nivel 'block' :)

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