[Resolvido] alinhamento descentralizado

Annyh · Março 20, 2010

estou criando um site e a div global esta no centro mas os elemento dentro dela não...

tambem tenho uma span no rodape que não consigo alinhar na altura dos links...

meu codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<link href="css/estilos.css" rel="stylesheet" type="text/css" />

</head>

<body>

<!-- global -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<div id="global">

<!-- topo -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<div id="topo">
	<h1>JR.A design</h1>
    
    <ul id="menu">
    	<li><a href="#" title="Página inicial" class="home">Início</a></li>
        <li><a href="#" title="Nossos serviços" class="servicos">Serviços</a></li>
        <li><a href="#" title="Fale conosco" class="contato">Contato</a></li>
    </ul>
    
</div>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

<!-- esquerda -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<div id="esquerda">
	<h2>Bem vindo...</h2>
    <p>A JR.A design oferece serviços de desenvolvimento, atualização e manutenção de sites seguindo os padrões web <a href="#" title="World Wide Web Consortium">w3c consortium</a>.
	<br /><br />Com ampla experiência proporciona soluções de qualidade e definidas em função da complexidade objetivos e limites de investimentos definidos pelo próprio cliente.
	<br /><br />Caso tenha interesse, entre em <a href="#" title="Fale conosco">contato</a> para que possamos lhe passar um orçamento do seu site.</p>
</div>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

<!-- direita -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<div id="direita">
	<h2>Você sabia?...</h2>
	<p><a href="#" title="Linguagem de marcação de hipertexto">HTML</a>
    <br /><br />Você sabia que esta é uma sigla que signifia:<br /><br />
    Hyper Text Markup Language, traduzindo para o português (Linguagem de Marcação de Hipertexto), uma linguagem de marcação utilizada para produzir páginas para Web.</p>
    
</div>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

<!-- rodape -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<div id="rodape">

	<span id="minilogo"><img src="imgs/minilogo.gif" alt="Minilogotipos" title="Programas utilizados" /></span>
	<div id="copy">© 2010 JR.A design</copy>
    
	<ul id="links">
    	<li><a href="#" title="Página inicial">Início</a></li>
        <li><a href="#" title="Nossos serviços">Serviços</a></li>
        <li><a href="#" title="Fale conosco" class="semborda">Contato</a></li>
    </ul>

</div>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

</div>
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->


</body>
</html>

o css

@charset "utf-8";
/* CSS Document */

* {
    list-style: none;
    margin: 0;
    padding: 0; 
	outline: none;
}

body {
    background: url('../imgs/fundo.gif') repeat;
	font-family: Arial, Helvetica, sans-serif;
    margin: 20px 0;
}

#global {
	background: #333;
	margin: 0 auto;
    width: 750px;
}

#topo h1 {
    background: url('../imgs/logo.gif') no-repeat;
	float: left;
    height: 59px;
	padding-left: 50px;
	text-indent: -99999px;
    width: 149px;
}

#menu {
	padding-top: 12px;		
}

#topo #menu ul {
    float: left;
}

#topo #menu ul li {
	display: inline;
}

#topo ul#menu a.home, .servicos, .contato {
    background: url('../imgs/menu.gif') no-repeat -2px -5px;
    color: #bbb6b2;
    display: inline;
	float: left;
    font-size: 12px;
	font-weight: bold;
	height: 38px;
	letter-spacing: 0.1em;
	line-height: 40px;
	padding-left: 50px;
    text-decoration: none;
	width: 100px;
}

#topo ul#menu a:hover.home {
	background-position: -153px -5px;
    color: #fff;
 }

#topo ul#menu a:hover.servicos {
	background-position: -153px -5px;
	color: #fff;
}

#topo ul#menu a:hover.contato {
	background-position: -153px -5px;	
	color: #fff;
}

a {
	color: #c01f1f;	
}

a:hover {
	color: #333;	
}

h2 {
	color: #333;
	font-size: 12px;
	margin: 20px 0 0 25px;
}

p, span {
	color: #696766;	
	font-size: 11px;
}

#rodape span {
	color: #333;
	float: left;
}

#esquerda p {
	padding: 20px;	
}

#direita p {
	padding: 20px 20px;
}

#esquerda, #direita {
	background: url(../imgs/destaque.gif) no-repeat;
	float: left;
	height: 238px;
	margin: 50px 0 130px -200px;
	width: 304px;
}

#direita {
	margin: 50px 0 0 43px;
}

#minilogo img {
	margin: 0 0 10px 4px;
}

#rodape {
	background: url(../imgs/rodape.gif) no-repeat 5px 30px;
	clear: both;
	padding-bottom: 80px;
	width: 750px;
}

#rodape #links {
	margin-left: 250px;
	padding-top: 40px;
}

#rodape #links ul {
	float: left;
}

#rodape #links ul li {
	display: inline;
}

#rodape ul#links a {
	border-right: 1px dotted #bbb6b2;
    color: #bbb6b2;
    display: inline;
	float: left;
    font-size: 11px;
	padding: 0 7px;
	text-decoration: none;
}

#rodape ul#links a:hover {
    color: #fff;
	text-decoration: underline;
}
 
#rodape ul#links a.semborda {
	border-right: 0;
}

espero que me ajudem...

Thiago Retondar · Março 20, 2010

Centralizar tudo dentro do global? Como assim? Explica melhor. Posta uma imagem.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Annyh · Março 20, 2010

olha a imagem ai...

o fundo cinza mais escuro é a div#global...

http://img684.imageshack.us/img684/4132/imgx.gif

da um molhada ai...

obrigada...

Thiago Retondar · Março 20, 2010

Crie uma div que englobe aquela #esquerda e #direita, defina um width e coloque margin: 0 auto.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Annyh · Março 20, 2010

fiz o que você sugeriu mas nem mexeu...

Thiago Retondar · Março 20, 2010

Hospeda ele manda o link. Veja que você está usando imensos margin e isso significa que não está bem estruturado.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Annyh · Março 20, 2010

este é o link

http://jradesign.orgfree.com/jradesign/

Thiago Retondar · Março 20, 2010

Está muito poluído o HTML! Limpe-o, vai ser mais fácil trabalhar assim. Tenta algo assim:

#corpo{
    width: 440px;
    margin: 0 auto;
}
#esquerda, #esquerda{
    width: 200px; /* Mudar */
    height: 200px; /* Mudar */
    background: url();
    float: left;
}
#esquerda{ margin: 0 40px 0 0; /* Mudar */ }

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Annyh · Março 20, 2010

como assim poluído??? não entendi..

e ainda não consegui centralizar os elementos, e a span no rodape não consigo nem, com reza brava posiciona-lá...

s.o.s.

Thiago Retondar · Março 21, 2010

Dá uma olhada aqui que você vai entender do que estou falando.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

douglash · Março 21, 2010

Olá annyh, eu fiz um exemplo no código abaixo, veja se isto q você quer apresentar, o modo q eu fiz não é o melhor mas eu fiz rapidamente para demonstração, pois, como o thiago falou, o seu código está um tanto poluído.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>JR.A design - soluções web</title>

<link

href="estilos.css"

rel="stylesheet" type="text/css">

</head>

<body>

<h1>JR.A design</h1>

<li><a href="#" title="Página inicial" class="home">Início</a></li>

<li><a href="#" title="Nossos serviços" class="servicos">Serviços</a></li>

<li><a href="#" title="Fale conosco" class="contato">Contato</a></li>

</ul>

</div>

<h2>Bem vindo...</h2>

<p>A JR.A design oferece serviços de desenvolvimento, atualização e

manutenção de sites seguindo os padrões web <a href="#" title="World

Wide Web Consortium">w3c consortium</a>.

<br><br>Com ampla experiência proporciona soluções de qualidade e

definidas em função da complexidade objetivos e limites de investimentos

definidos pelo próprio cliente.

<br><br>Caso tenha interesse, entre em <a href="#" title="Fale conosco">contato</a>

para que possamos lhe passar um orçamento do seu site.</p>

</div>

<h2>Você sabia?...</h2>

<br><br>Você sabia que esta é uma sigla que signifia:<br><br>

Hyper Text Markup Language, traduzindo para o português (Linguagem

de Marcação de Hipertexto), uma linguagem de marcação utilizada para

produzir páginas para Web.</p>

</div>

</div>

<span id="minilogo"><img

src="http://jradesign.orgfree.com/jradesign/imgs/minilogo.gif"

alt="Minilogotipos" title="Programas utilizados"></span>

<li><a href="#" title="Página inicial">Início</a></li>

<li><a href="#" title="Nossos serviços">Serviços</a></li>

<li><a href="#" title="Fale conosco" class="semborda">Contato</a></li>

</ul>

</div>

</div>

</body></html>

CSS

@charset "utf-8";

/* CSS Document */

* {

list-style: none;

margin: 0;

padding: 0;

outline: none;

}

body {

background: url('http://jradesign.orgfree.com/jradesign/imgs/fundo.gif') repeat;

font-family: Arial, Helvetica, sans-serif;

margin: 20px 0;

}

#global {

background: #333;

margin: 0 auto;

width: 750px;

}

#topo{float:left; width:100%;}

#topo h1 {

background: url('http://jradesign.orgfree.com/jradesign/imgs/logo.gif') no-repeat;

float: left;

height: 59px;

padding-left: 50px;

text-indent: -99999px;

width: 149px;

}

#menu {

padding-top: 12px;

float: left;

}

#topo ul#menu li {

float:left;

}

#topo ul#menu a.home, .servicos, .contato {

background: url('http://jradesign.orgfree.com/jradesign/imgs/menu.gif') no-repeat -2px -5px;

color: #bbb6b2;

display: inline;

float: left;

font-size: 12px;

font-weight: bold;

height: 38px;

letter-spacing: 0.1em;

line-height: 40px;

padding-left: 50px;

text-decoration: none;

width: 100px;

}

#topo ul#menu a:hover.home {

background-position: -153px -5px;

color: #fff;

}

#topo ul#menu a:hover.servicos {

background-position: -153px -5px;

color: #fff;

}

#topo ul#menu a:hover.contato {

background-position: -153px -5px;

color: #fff;

}

a {

color: #c01f1f;

}

a:hover {

color: #333;

}

h2 {

color: #333;

font-size: 12px;

margin: 20px 0 0 25px;

}

p, span {

color: #696766;

font-size: 11px;

}

#corpo {

width: 620px;

margin:0 auto;

padding:40px 0;

clear:both;

}

#rodape span {

color: #333;

float: left;

}

#esquerda p {

padding: 20px;

}

#direita p {

padding: 20px 20px;

}

#esquerda, #direita {

background: url(http://jradesign.orgfree.com/jradesign/imgs/destaque.gif) no-repeat;

height: 238px;

width: 310px;

float:left;

}

#minilogo img {

margin: 0 0 10px 4px;

}

#rodape {

background: url(http://jradesign.orgfree.com/jradesign/imgs/rodape.gif) no-repeat 5px 30px;

clear: both;

padding-bottom: 80px;

width: 620px;

margin:0 auto;

}

#rodape #links {

margin-left: 250px;

padding-top: 40px;

}

#rodape #links ul {

float: left;

}

#rodape #links ul li {

display: inline;

}

#rodape ul#links a {

border-right: 1px dotted #bbb6b2;

color: #bbb6b2;

display: inline;

float: left;

font-size: 11px;

padding: 0 7px;

text-decoration: none;

}

#rodape ul#links a:hover {

color: #fff;

text-decoration: underline;

}

#rodape ul#links a.semborda {

border-right: 0;

}

E uma observação, para você querer margem, é preciso ter espaço para isso, você definiu o tamanho da div global em 750px e tamanho da div q você queria centralizar também, logo não teria espaço para margem.

Annyh · Março 21, 2010

porque você tambem disse que meu código esta poluído... não entendi...

me mostre onde e porque....

bj

douglash · Março 21, 2010

Oi, assim na minha opinião você está utilizando muitos comentários desnecessários e BRs também, mas digo q o html não está muito poluido mas a estrutura do css q está um pouco bagunçada, na minha opinião(Para mim é o correto) é melhor definir a estrutura no mesmo modo que está estruturado o código html, pois você se achará mais fácil, o q digo é que, você por exemplo faz os resets minimos no inicio da estrutura do css e depois segue estruturando o design do site da mesma forma q foi feito o html, ou pelo menos, o mais próximo. Por exemplo html(div id=topo, div id=menu, div id=conteúdo, div id=rodape) e no css(#topo{..},#menu{..},#conteudo{..},#rodape{..}).

E outra coisa, você está utilizando xhtml como doctype, ou seja, xml + html, sendo q XML exige fechamento de todas as tags, inclusive as tags unicas, como a BR.

De uma olhada no código html q eu dei limpada. Mas neste exemplo você terá de definir as margens da tag p, para ficar correto.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JR.A design - soluções web</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>

 <!-- global -->
 <div id="global">

  <!-- topo -->
  <div id="topo">
   <h1>JR.A design</h1>
    <ul id="menu">
     <li><a href="#" title="Página inicial" class="home">Início</a></li>
     <li><a href="#" title="Nossos serviços" class="servicos">Serviços</a></li>
     <li><a href="#" title="Fale conosco" class="contato">Contato</a></li>
    </ul>
  </div>
  
  <!-- corpo -->
  <div id="corpo">
   
   <!-- esquerda -->
   <div id="esquerda">
    <h2>Bem vindo...</h2>
     <p>A JR.A design oferece serviços de desenvolvimento, atualização e
manutenção de sites seguindo os padrões web <a href="#" title="World
Wide Web Consortium">w3c consortium</a>.</p>
     <p>Com ampla experiência proporciona soluções de qualidade e
definidas em função da complexidade objetivos e limites de investimentos
definidos pelo próprio cliente.</p>
     <p>Caso tenha interesse, entre em <a href="#" title="Fale conosco">contato</a>
para que possamos lhe passar um orçamento do seu site.</p>
   </div>

   <!-- direita -->
   <div id="direita">
    <h2>Você sabia?...</h2>
     <p><a href="#" title="Linguagem de marcação de hipertexto">HTML</a><br  /><br  />
      Você sabia que esta é uma sigla que signifia:<br  /><br  />
      Hyper Text Markup Language, traduzindo para o português (Linguagem
de Marcação de Hipertexto), uma linguagem de marcação utilizada para
produzir páginas para Web.</p>
   </div>

   <br style="clear:both;" />
  </div>

  <!-- rodape -->
  <div id="rodape">
   <span id="minilogo">
   <img src="http://jradesign.orgfree.com/jradesign/imgs/minilogo.gif" alt="Minilogotipos" title="Programas utilizados">
   </span>
   <!--<div id="copy">© 2010 JR.A design</copy>-->
   
   <ul id="links">
    <li><a href="#" title="Página inicial">Início</a></li>
    <li><a href="#" title="Nossos serviços">Serviços</a></li>
    <li><a href="#" title="Fale conosco" class="semborda">Contato</a></li>
   </ul>

  </div>

 </div>

   <!-- Free Web Hosting Area Start -->
   <br><center><a target="_blank" href="http://www.freewebhostingarea.com"><img src="http://users.freewebhostingarea.com/i/freehosting.png" border="0"    width="88" height="15" alt="Free Web Hosting"></a></center>
    <script type="text/javascript" src="http://users.freewebhostingarea.com/a/l2.js"></script>
    <noscript><br><center><font color='#000000' face='Verdana' style='font-size: 11px; background-color:#FFFFFF'><a target='_blank' href=  'http://www.freewebhostingarea.com'><font color='#000000'>Free Web Hosting</font></a></font></center></noscript>
   <!-- Free Web Hosting Area End -->

</body>
</html>

Annyh · Março 21, 2010

entendi, obrigada pelas explicações...

mas a tag br eu ja havia fechado <br />, sempre usei ela assim...

quanto os comentarios, li num post que sugeria que desse modo fosse o correto para xhtml...

obrigada por enquanto, ainda não consegui arrumar o alinhamento, mas... tudo bem...

o css concordo que esta uma bagunça, é que ja peguei assim, e nem me preocupei em arrumar...

você tambem falou que usei muitos brs, mas brs não servem para quebrar linhas??? foi o que fiz...

douglash · Março 21, 2010

Sobre os o fechamento dos brs eu vi e realmente estava ok, não sei se foi locura aqui do meu software de html, mas estava com o fechamento correto sim, desculpe. Quanto aos comentários, só achei q tem comentários demais, sem necessidade.. e quanto ao alinhamento, se testar o meu código verá q está centralizado o conteudo e o rodapé.

E sobre os brs, digo q no primeiro bloco você usou brs para gerar o mesmo efeito de um paragrafo, neste bloco:

<p>A JR.A design oferece serviços de desenvolvimento, atualização e manutenção de sites seguindo os padrões web <a href="#" title="World Wide Web Consortium">w3c consortium</a>.
        <br /><br />Com ampla experiência proporciona soluções de qualidade e definidas em função da complexidade objetivos e limites de investimentos definidos pelo próprio cliente.
        <br /><br />Caso tenha interesse, entre em <a href="#" title="Fale conosco">contato</a> para que possamos lhe passar um orçamento do seu site.</p>

Onde começa "Com ampla experiência.." para mim configura um novo paragrafo, podendo assim substituir os dois lines breaks por paragrafo.

Assim:

<p>A JR.A design oferece serviços de desenvolvimento, atualização e
manutenção de sites seguindo os padrões web <a href="#" title="World
Wide Web Consortium">w3c consortium</a>.</p>
     <p>Com ampla experiência proporciona soluções de qualidade e
definidas em função da complexidade objetivos e limites de investimentos
definidos pelo próprio cliente.</p>
     <p>Caso tenha interesse, entre em <a href="#" title="Fale conosco">contato</a>
para que possamos lhe passar um orçamento do seu site.</p>

Annyh · Março 21, 2010

entendi, agora entendi, valeu DouglasH pela ajuda... e a todos que me ajudaram (TiagoR).

vou seguir as dicas que vcs me deram para criar um código cada vez mais limpo e claro...

beijos... http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Annyh · Março 21, 2010

só mais uma coisinha...

como faço pro meu texto ficar como na imagem abaixo sem usar <br />?

http://img201.imageshack.us/img201/1079/textoi.gif

.............

no IE 6 esta com espaçamento diferente do FF3.6

veja a imagem no IE6

http://img403.imageshack.us/img403/9320/ie6.gif

agora no FF 3.6

http://img708.imageshack.us/img708/9192/ff36.gif

????...

douglash · Março 21, 2010

Oi, foi o q eu falei para você, você terá de acertar no css o p, primeiro dando um reset e depois definindo a margem correta.

Caso você não queira criar os resets, existem varios na internet prontos.

Como esse:

http://meyerweb.com/eric/tools/css/reset/reset.css

Arquivado

[Resolvido] alinhamento descentralizado

Recommended Posts

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

douglash 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real