Ir para conteúdo

POWERED BY:

Arquivado

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

Biano

[Resolvido] Linha fixa de divisao de conteudo

Por , em Desenvolvimento frontend

Recommended Posts

Biano    0

Biano
Postado

Boa tarde pessoal,

 

Preciso fazer uma divisao de conteudo de um site exatamente como esta da imagem abaixo:

linha.jpg

 

Com um detalhe este que esta me atormentando, a tela ao ser redimensionada (esquerda pra direita.) os marcadores da esquerda e direita, tem que permanecer no seu estado inicial.

 

Ja tentei tudo mas nao consigo fazer com que este detalhe de fixar os marcadores venha funcionar.

Obrigado desde ja!

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

Como esta fazendo? Poste seu código.

 

Eles devem manter esta distância ou cada um deve ir para um canto mas mantendo a disposição na tela?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Cada um tem que ir pro canto da tela, como apresentado na imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

Poste seu código, só assim poderemos encontrar o problema.

 

Provavelmente utilizando float você consegue, mas poste o código para verificarmos melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Poste seu código, só assim poderemos encontrar o problema.

 

Provavelmente utilizando float você consegue, mas poste o código para verificarmos melhor.

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>

<style>
body{
margin:0 auto;
background-color:#CCC;
}
#total{
margin:0 auto;
width:1024px;
height:500px;
background-color:#333;
}
#central{
float:left;
margin:20 0 20 0px;
width:100%;
/*position:relative;*/
/*widht:1000px;*/
height:25px;
background-color:#F93;	
}
#esquerda{width:25px; height:25px; background-color:#FFF; float:left;}
#direita{width:25px; height:25px; background-color:#FFF; float:right;}
</style>


</head>

<body>

<div id="total">
 <div id="central">
 <div id="esquerda"></div>
 <div id="direita"></div>
 </div>
</div>
</div>


</body>
</html>

 

Detalhe: nao estou conseguindo centralizar nem a linha no meio da tela.

Compartilhar este post

Link para o post
Compartilhar em outros sites

João Prado    64

João Prado
Postado

Você esta tentando deixar uma div ao lado da outra, diferente do que a imagem acima sugere.

 

Se a intenção é separar os conteúdos verticalmente, não tem motivos para querer deixar uma div ao lado da outra.

 

Coloque um width:100% nas duas e a separação você faz com um bg aplicando um position alinhado conforme sua necessidade. No caso da primeira div - left bottom, no caso da segunda div - right top.

 

Também pode utilizar border bottom e border top para fazer a linha azul de separação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biano    0

Biano
Postado

Joao Prado,

 

Bom dia seguindo seu conselho obtive exito na tarefa.

A solução:

 

Fiz 2 divs numa adicionei border-botton 1pixel, e a imagem como rodape com margin lef e na outra div border top, com a imagem margin-right.

 

O que matou de vez o problema.

 

Obrigado pela ajuda!!

 

 

Você esta tentando deixar uma div ao lado da outra, diferente do que a imagem acima sugere.

 

Se a intenção é separar os conteúdos verticalmente, não tem motivos para querer deixar uma div ao lado da outra.

 

Coloque um width:100% nas duas e a separação você faz com um bg aplicando um position alinhado conforme sua necessidade. No caso da primeira div - left bottom, no caso da segunda div - right top.

 

Também pode utilizar border bottom e border top para fazer a linha azul de separação.

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