Ir para conteúdo

POWERED BY:

Arquivado

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

vitinho.vitor

Posicionamento

Por , em Desenvolvimento frontend

Recommended Posts

vitinho.vitor    0

vitinho.vitor
Postado

Olá pessoal, estou fazendo uma coisinha que precisa de muitas DIVs. Porém no Chrome eu consigo vê-las da forma que eu quero, porém no Firefox e no Explorer ( <_< ) ele desconfigura.

Segue o link para análise: http://www.acampi.com.br/Virtua

 

Coloquei essa borda azul no menu para destacar (provisioriamente)

Gostaria que ficasse assim:

Imagem Postada

 

 

O que eu posso fazer?

 

Segue estilos.css

a:link {
	text-decoration: none;
	color: forestGreen;
   }
a:visited {
	text-decoration: none;
	color: forestGreen;
   }
a:hover {
	text-decoration: underline; 
	color: #000066;
}
a:active {text-decoration: none}

a.centro:link {
	text-decoration: none;
	color: forestGreen;
	text-style: none;
   }
a.centro:visited {
	text-decoration: none;
	color: forestGreen;
	text-style: none;
   }
a.centro:hover {
	text-decoration: underline; 
	color: forestGreen;
	text-style: none;
}
a.centro:active {text-decoration: none}

a.meio:link {
	text-decoration: none;
	color: #000066;
   }
a.meio:visited {
	text-decoration: none;
	color: #000066;
   }
a.meio:hover {
	text-decoration: underline; 
	color: #000066;
}
a.meio:active {text-decoration: none}

body {
	font-family: arial;
	color: #000066;
	font-style: italic;
	background-color: #DCEFED;
    }

#barraup{
	border:  0px solid; #003399;
	float: right;
	width: 99%;
	height: 20pt; 
	text-align: right;
    }

#logo{
	border:  1px solid; #003399;
	float: left;
	width: 49%;
	height: 125pt;
	background-color: white;
    }
    
#login{
	border: 0px solid; #000066;
	float: right;
	width: 50%;
	height: 50pt;
	line-height:50pt;
	text-weight: bold;
    }

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

span {
	position: absolute;
	bottom: 0;
	clear: both;
	text-align: right;
	font-family: arial;
	color: forestGreen;
	font-weight: bold;
}
E o cabeçalho:

<html>
<head>
<title>Virtua Imobiliária - A Imobiliária do Futuro</title>
<link rel="stylesheet" type="text/css" media="screen" href="estilos.css">
</head>
<body>
<div id="barraup">
	<a href="cadastra.php">Cadastre-se</a> | <a href="faq.php">Dúvidas</a> | <a href="fale conosco.php">Fale Conosco</a> 
</div>

<div id="logo">
	<img src="images/logo.jpg" width="500">
</div>

<div id="login" align="right">	
Bem-Vindo (a), <a href="login.php">faça login!</a>
</div>
<div id="menu" align="right">
	<span align="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>
</div>
<br><HR WIDTH=100% COLOR="#000080" height="5">
</body>
</html>

 

Obrigado

Vitor

Compartilhar este post

Link para o post
Compartilhar em outros sites

CarlosMarx    4

CarlosMarx
Postado

Os navegadores renderizam o CSS de forma diferente, mas como você está trabalhando com elementos float, você terá que adicionar mais um elemento (um span) e colocar esse elemento com clear.

 

Por exemplo assim:

<html>
<head>
<title>Virtua Imobiliária - A Imobiliária do Futuro</title>
<link rel="stylesheet" type="text/css" media="screen" href="estilos.css">
</head>
<body>
<div id="barraup">
        <a href="cadastra.php">Cadastre-se</a> | <a href="faq.php">Dúvidas</a> | <a href="fale conosco.php">Fale Conosco</a> 
</div>

<div id="logo">
        <img src="images/logo.jpg" width="500">
</div>

<div id="login" align="right">  
Bem-Vindo (a), <a href="login.php">faça login!</a>
</div>
<div id="menu" align="right">
        <span align="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>
</div>

<div style="clear: both;"></div> <!-- Aqui está  o elemento com clear:both -->

<br><HR WIDTH=100% COLOR="#000080" height="5">
</body>
</html>

Obs: Pode colocar o css no estilo separado, é só pra demonstrar.

Se você colocasse esse conteudo dentro de uma div poderia aplicar o clear nessa div. Mais já dá pra você resolver o seu problema.

Tem um tópico recente e bem similar ao seu problema aqui no fórum: Espaçamento da DIV, depois de elementos 'float

Compartilhar este post

Link para o post
Compartilhar em outros sites

Agência Trama    0

Agência Trama
Postado

Boa noite vitinho.vitor,

 

tenta colocar no css na tag de span o codigo 'display:block' ... Testei aqui e funcionou.

Compartilhar este post

Link para o post
Compartilhar em outros sites

vitinho.vitor    0

vitinho.vitor
Postado

Olá, eu tinha tentado somente com a div porém o texto não ficava encostado no final dela, verticalmente. Tem alguma forma de fazer isso em div e o texto ficar à direita e tambpem no final dela?

 

Obrigado

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