Ir para conteúdo

POWERED BY:

Arquivado

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

RafiWskY

[Resolvido] Posicionamento de Div

Por , em Desenvolvimento frontend

Recommended Posts

RafiWskY    2

RafiWskY
Postado

Olá Galera,

 

Estou tendo este pequeno problema, tenho duas divs dentro de uma div principal, uma eu quero que fique a esquerda e a outra a direita. A primeiro do logo menor aparece por inteiro e se alinha onde eu ajustei. A segunda que é do logo maior não está se alinhando nem aparecendo por inteiro.

 

Segue o link teste do site

http://www.consultrain.com.br/layout2/

 

Segue abaixo o html:

<div id="topo">

<div id="topocorpo">

 

<div id="topologo">

</div> <!-- topologo -->

 

<div id="topologofundo">

<h1> BEM-VINDO AO NOSSO SITE </h1><br />

<h2> VOLTE SEMPRE </h2><br /><br /><br />

<h2> 17 3234-7475 </h2><br />

<h3> CONTATO@CONSULTRAIN.COM.BR </h3>

 

</div> <!-- topologofundo -->

 

</div> <!-- topocorpo -->

 

</div><!-- topo -->

 

 

E abaixo segue o css:

 

* {margin:0; padding:0;}

 

#topo {

background-image: url(images/topo_fundo.jpg);

width: auto;

height: 214px;

margin: 0 auto;

}

 

#topocorpo {

width: 960px;

height: 214px;

margin: 0 auto;

position:relative;

}

 

#topologofundo {

background-image: url(images/topo_fundo_logo.png);

width: 516px;

heigth: 214px;

float: right;

position: absolute;

}

 

#topologo {

background-image: url(images/topo_logo.png);

width: 262px;

height: 123px;

float: left;

position:absolute;

top: 57px;

left: 50px;

}

 

 

Gostaria de saber também se está correto a forma como estou aplicando as imagens, é utilizando background-image mesmo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wanderson Valerio    102

Wanderson Valerio
Postado 

#topocorpo {
   width: 960px; 
   height: 214px; 
   float: left; 
   position:relative;
   left: 50%;
   margin-left: -480px;
}

Experimente isso. Na que você quiser que renderize na esquerda, adiciona um float: left, Caso for na direita: float: right.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafiWskY    2

RafiWskY
Postado

Cara, no caso ai você colocou na #topocorpo que é digamos a principal, isso ta certo ? Não teria que ser na div #topologofundo ? Tentei na #topocorpo e nada acontece, tentei na #topologofundo e nada acontece também.

 

#topocorpo {
   width: 960px; 
   height: 214px; 
   float: left; 
   position:relative;
   left: 50%;
   margin-left: -480px;
}

Experimente isso. Na que você quiser que renderize na esquerda, adiciona um float: left, Caso for na direita: float: right.

 

Eu já tentei dar esse clear:both mais não resolve.

 

crie uma div por último abaixo das outras 2, e defina no css assim:

 



#ultima {
clear:both;
}

 

O engraçado é que o #topologo tem a mesma característica, e está normal.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

CTRL + C / CTRL + V

 


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}

#topo {
background-image: url(images/topo_fundo.jpg); 
width: 970px;
height: 214px; 
margin: 0 auto;
}

#topocorpo {
width: 970px;
height: 214px; 
margin: 0 auto;
}

#topologofundo {
background-image: url(images/topo_fundo_logo.png); 
width: 516px; 
heigth: 214px; 
float: right; 
}

#topologo {
background-image: url(images/topo_logo.png); 
width: 262px; 
height: 123px; 
float:left;
}

.clear {
clear:both;
}

</style>

</head>

<body>
<div id="topo">
<div id="topocorpo">

<div id="topologo">
</div> <!-- topologo -->

<div id="topologofundo">
<h1> BEM-VINDO AO NOSSO SITE </h1><br />
<h2> VOLTE SEMPRE </h2><br /><br /><br />
<h2> 17 3234-7475 </h2><br />
<h3> CONTATO@CONSULTRAIN.COM.BR </h3>

</div> <!-- topologofundo -->

<div class="clear"></div>
</div> <!-- topocorpo -->

</div><!-- topo -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

RafiWskY    2

RafiWskY
Postado

Resolveu meu problema. Muito agradecido!

 

Mais saberia me dizer o que estava errado naquele código ? Só para eu saber onde errei.

 

 

 

CTRL + C / CTRL + V

 


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:0;
}

#topo {
background-image: url(images/topo_fundo.jpg); 
width: 970px;
height: 214px; 
margin: 0 auto;
}

#topocorpo {
width: 970px;
height: 214px; 
margin: 0 auto;
}

#topologofundo {
background-image: url(images/topo_fundo_logo.png); 
width: 516px; 
heigth: 214px; 
float: right; 
}

#topologo {
background-image: url(images/topo_logo.png); 
width: 262px; 
height: 123px; 
float:left;
}

.clear {
clear:both;
}

</style>

</head>

<body>
<div id="topo">
<div id="topocorpo">

<div id="topologo">
</div> <!-- topologo -->

<div id="topologofundo">
<h1> BEM-VINDO AO NOSSO SITE </h1><br />
<h2> VOLTE SEMPRE </h2><br /><br /><br />
<h2> 17 3234-7475 </h2><br />
<h3> CONTATO@CONSULTRAIN.COM.BR </h3>

</div> <!-- topologofundo -->

<div class="clear"></div>
</div> <!-- topocorpo -->

</div><!-- topo -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Resolveu meu problema. Muito agradecido!

 

Mais saberia me dizer o que estava errado naquele código ? Só para eu saber onde errei.

 

 

Então cara, tipo você dá float:left em uma, float:right e o centro como fica ?

 

você precisa "inserir uma linha imaginária" kk para o resto ficar em baixo ! :thumbsup:

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