Ir para conteúdo

POWERED BY:

Arquivado

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

Annyh

[Resolvido] alinhamento descentralizado

Por , em Desenvolvimento frontend

Recommended Posts

Annyh    4

Annyh
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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

 

 

  Mostrar conteúdo oculto

 

 

CSS

 

 

  Mostrar conteúdo oculto

 

 

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Annyh    4

Annyh
Postado

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

 

????...

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

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

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