[Resolvido] DIVs e Spans

[vitinho.vitor 0]

Olá pessoal,

Havia abandonado um site meu e agora resolvi voltar.

Estou com um problema com DIV's e Spans que criaram um espaço desnecessário (e feio) no layout.

Segue uma pequena ilustração:

Aquele espaço que o Explorer faz é que eu não consigo tirar.

Segue HTML:

<div id="logo">
	<img src="images/logo.png" width="530" />
</div>	
<div id="login" align="right">	
<iframe src="campo_login.php" name="log" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>
</div>
<div id="menu" align="right">
	<p align="right">
		<span style="float: right;">
		<a href="anuncie.php" class="meio">.anuncie.</a><a href="compre.php" class="centro">compre.</a><a href="conheca.php" class="meio">conheça.</a></span></p>
</div>
<div style="clear: both;"></div>

 

E o CSS

#logo{
  border:  0px solid #003399;
	float: left;
	width: 49%;
	height: 125pt;
	background-color:;
	display:inline;
	}
#login{
  border: 0px solid #000066;
	float: right;
	width: 50%;
	height: 50pt;
	line-height: 50pt;
	}

#menu{
	border: 0px solid #000066;
	float: right;
	width: 50%;
	height: 74pt;
	position: relative;
	font-size: 30px;
	text-align: right;
	display:inline;
	}

span {
border: 1px solid black;
position: absolute;
display:block;
bottom: 0px;
width: 220px;
text-align: right;
font-family: arial;
color: forestGreen;
font-weight: bold;
font-style: normal;
float: right;
clear: both;
border: 0px solid black;
left: 32px;
}	

 

 

Desde já agradeço,

Vitor

[Ramael 0]

Estou um pouco de bobeira, vamos ver se consigo lhe dar uma ajudinha:

 

Primeiro os estilos de #logo, #login e #menu. Essas três declarações serão únicas no documento ?? Se sim e ainda aplicará alguma outra função a eles (JS, PHP ou etc), então mantenha-os como ID, mas caso o contrário reverta-os para CLASS, declarando-os com um ponto antes ao invés do “jogo da velha”, assim deixando seu CSS mais organizado.

 

Dá uma lida no que escrevi aqui.

 

Ainda nesses três ID’s, você declarou uma borda, mas com zero pixels de tamanho, por que ?? Isso não tem sentido e eventualmente pode acabar gerando problemas de visualização em alguns browsers. No ID #logo tem uma declaração de background-color vazia, que pode ser removida. No todo, esses ID’s estão um tanto complicados, pois eles tem dimensões declaradas em %, em pontos e em pixels, o que também pode gerar problema de acordo com a interpretação de cada browser.

 

Por último a declaração do SPAN. Da forma que você fez, toda a tag span usada no seu documento será daquela forma, toda, e a declaração do estilo também está muito confusa: Você determina um posicionamento absoluto, com um float e um clear, border com e sem px...... confuso. Span é uma tag muito usada no HTML, e uma declaração dessa forma pode complicar muito sua vida no decorrer do documento, com o span você pode determinar estilos dentro de classes sem precisar declarar a classe, somente discriminando da tag dentro da classe, da mesma forma que fiz com a tag A dentro da classe login no exemplo que escrevi a seguir.

 

Fora que você ainda declara estilos dentro do HTML, tanto pro span como pro resto do código. Procure manter todo o estilo, a cara do documento, somente dentro do CSS, sem declarar nada no HTML, assim você pode facilitar muito sua vida no futuro.

 

Não sei exatamente o que você quer, mas eu declararia as coisas mais ou menos assim:

 

CSS:

body {
   margin: 0;
   padding: 0;
   font: 12px arial, verdana, helvetica, sans-serif;
}

img {
   border: 0
}

a {
   text-decoration: none;
border: 0;
outline: none;
}

.head {
position: relative;
width: 100%;
height: 200px;
background: #dcefed;
color: #000a70;
font-size: 16px;
}

.head a:hover {
text-decoration: underline;
}

.logo {
float: left;
width: 400px;
height: 200px;
background: green; /*só para identificar o espaço da imagem*/
}

.login {
float: right;
text-align: right;
padding-right: 30px;
font-style: italic;
line-height: 30px;
}

.login a {
color: #177330;
padding: 0 5px;
}

.menu {
position: absolute;
bottom: 10px;
right: 30px;
}

.menu a {
font-size: 26px;
font-weight: bold;
color: #000a70;
}

a.verde {
color: #177330;
}

/*declaração de teste para conteudo*/
.conteudo {
border: 1px dotted red;
}

 

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt">
 <head>
       <title>Teste</title>
       <link rel="stylesheet" href="teste.css" type="text/css" media="screen" />
 </head>
 <body>
<div class="head">
	<div class="logo">Logo no tamanho exato do espaço 200px x 400px</div>  
    <div class="login">  
	<a href="#">Início </a>|
	<a href="#">Cadastre-se </a>|
	<a href="#">Dúvidas </a>|
	<a href="#">Fale Conosco</a><br />
	Bem vindo (a), <a href="#">faça login!</a>
    </div>
    <div class="menu">
        <a href="#">.anuncie.</a>
	<a href="#" class="verde">compre.</a>
	<a href="#">conheça.</a>
    </div>
</div>
<div class="conteudo">
    aqui vai o contudo do site<br />
    seja ele qual for.		
</div>
 </body>
</html>

 

Espero ter ajudado....

 

T+

Ramael

[Evandro Oliveira 331]

<div id="login" align="right">

Align é uma propriedade de estilo e deve ficar a cargo do CSS através da propriedade text-align

 

<iframe src="campo_login.php" name="log" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>

http://forum.imasters.com.br/topic/389388-e-correto-usar-iframe/

 

 

		<a href="anuncie.php" class="meio">.anuncie.</a><a href="compre.php" class="centro">compre.</a><a href="conheca.php" class="meio">conheça.</a></span></p>

Não classifique os elementos pelo leiaute. Se daqui pra amanhã você tem que mudar estes três links de ordem e lugar, tem que trocar toda a nomenclatura da classe.

 

Quanto ao CSS não tenho quase nada a discordar do @Ramael a não ser um único ponto...

 

Ainda nesses três ID’s, você declarou uma borda, mas com zero pixels de tamanho, por que ?? Isso não tem sentido e eventualmente pode acabar gerando problemas de visualização em alguns browsers.

Não gera. É mais limpo e em geral mais elegante para fazer estados hover por exemplo:

 

a { border: 0 dotted #0ff; }
a:hover { border-bottom-width: 2px; }

[vitinho.vitor 0]

Alterei tudo e agora está funcionando perfeitamente.

Se quiserem dar uma olhada:

Clique aqui

 

Obrigado

Vitor

[Ramael 0]

Quem bom que "as coisas estão funcionando".... Mas pelo que vi, você não deu uma limpada no seu código, tanto do CSS como do HTML. No CSS ainda tem muitos estilos duplicados e com declarações confusas, acho que valeria a pena "perder um tempinho" pra dar uma estudada no seu CSS, limpá-lo e validá-lo. O mesmo vale pro HTML, que está todo em tabelas e cheio de estilos, tente ir limpando o código para poder validá-lo também.

 

É um esforço de aprendizado que vale a pena e torna seu trabalho mais limpo, mais robusto e por que não, mais elegante também.

 

Dá uma lida nas dicas ^^

 

 

t+

Ramael

[vitinho.vitor 0]

Verdade. Quanto aos estilos, havia guardado alguns para o caso de algo dar errado. Porém já dei uma arrumada. Quanto ao layout, antes usava muito mais tabelas, agora estou usando muito mais DIVs. As tabelas que uso agora são poucas.

 

Mas se tiverem mais dicas e opiniões, fiquem à vontade.

 

Desde já agradeço,

Vitor