Jump to content
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

Nuno

Separação de barra lateral

Recommended Posts

Nuno

Boas people!

bem tava a tentar criar uma linha para separar a frame central da frame da esquerda mas quando o conteudo da frame central excede o tamanho das barra esquerda a linha nao acompanha e gostava de saber qual a instrução que tenho de acrescentar nas CSS's para que isso aconteça.

Aqui fica a imagem:

barraru7.jpg

Aqui tão as CSS's:

	#esquerda {
	  	width:180px;
	  /*min-height: 350px;/* vai defenir o tamanho minimo da coluna da esquerda*/
		border-right: 1px solid gray;
		background:#fff;
		padding:3px;
		float:left;
	}
        #conteudo {
		background:#FFF;
		padding-top:10px;
		width: 450px;
		margin:0 200px;
	}

Share this post


Link to post
Share on other sites
pmg

Mete um border-left: 1px solid gray; no #conteudo?


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Share this post


Link to post
Share on other sites
Nuno

Mete um border-left: 1px solid gray; no #conteudo?

já experimentei mas com isso fico com 2 linhas e nota-se.

para quem nao entendeu eu apenas quero que as barras laterais aconpanhem a frame central consoante o conteúde que vou acrescentando.

Share this post


Link to post
Share on other sites
softklin

Então, mas a solução do PMG faz o que queres, ou então ainda não consegui entender...

O PMG disse basicamente para acrescentares uma linha no conteúdo, ok, acompanha ate ao fim. as agora tiras o border-rigth da div esquerda. Ou seja:

  #esquerda {
           width:180px;
        /*min-height: 350px;/* vai defenir o tamanho minimo da coluna da esquerda*/
         background:#fff;
         padding:3px;
         float:left;
      }
           #conteudo {
         border-left: 1px solid gray;
         background:#FFF;
         padding-top:10px;
         width: 450px;
         margin:0 200px;
      }

O que entendi foi: a linha que separa a div esquerda da central deve ser tão comprida quanto o conteúdo gerado pela div central.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites
Nuno

Então, mas a solução do PMG faz o que queres, ou então ainda não consegui entender...

O PMG disse basicamente para acrescentares uma linha no conteúdo, ok, acompanha ate ao fim. as agora tiras o border-rigth da div esquerda. Ou seja:

  #esquerda {
           width:180px;
        /*min-height: 350px;/* vai defenir o tamanho minimo da coluna da esquerda*/
         background:#fff;
         padding:3px;
         float:left;
      }
           #conteudo {
         border-left: 1px solid gray;
         background:#FFF;
         padding-top:10px;
         width: 450px;
         margin:0 200px;
      }

O que entendi foi: a linha que separa a div esquerda da central deve ser tão comprida quanto o conteúdo gerado pela div central.

sim mas cria-me outro problema, por exemplo se eventualmente a div da esquerda for maior do que a div do centro vai acontecer o mesmo, ou seja, a linha do conteúdo nao vai acompanhar a div da esquerda.. eu keria era mesmo que independentemente de onde acrescenta-se conteúdo (div da esquerda ou do centro) as duas div's nse acompanhassem uma á outra.

Share this post


Link to post
Share on other sites
pmg
#esquerda {
  width: 180px;
  /* min-height: 350px; */ /* vai definir o tamanho minimo da coluna da esquerda */
  border-right: 1px solid gray;
  background: #fff;
  padding: 3px;
  float: left;
}
#conteudo {
  border-left: 1px solid gray;
  background: #FFF;
  padding-top: 10px;
  width: 450px;
  margin: 0 200px;
  position: relative; left: -24px; /* chega o #conteudo para trás */
}


What have you tried?

Não respondo a dúvidas por PM

A minha bola de cristal está para compor; deve ficar pronta para a semana.

Torna os teus tópicos mais atractivos e legíveis usando a tag CODE para colorir o código!

Share this post


Link to post
Share on other sites
Nuno

#esquerda {
  width: 180px;
  /* min-height: 350px; */ /* vai definir o tamanho minimo da coluna da esquerda */
  border-right: 1px solid gray;
  background: #fff;
  padding: 3px;
  float: left;
}
#conteudo {
  border-left: 1px solid gray;
  background: #FFF;
  padding-top: 10px;
  width: 450px;
  margin: 0 200px;
  position: relative; left: -24px; /* chega o #conteudo para trás */
}

era uma solução mas partindo do principio k kero meter na esquerda e na direita.....

apenas referi só a esquerda pq depois era só fazer igual. e para além disso começa a dar problemas com os browsers com isso.

não há mesmo uma instrução k faça acompanhar as colunas ao centro conseante o conteudo acrescentado e vice-versa?

Share this post


Link to post
Share on other sites
softklin

Só se definisses a propriedade height igual em cada um... Acho que é uma solução pouco prática, mas não põe em causa os problemas de browser.

A ideia do pmg é boa, pelo que percebi, queria fazer sobreposição e assim não se notava o border mais largo. Tenta explorar um bocado isso, e tentar que funcione nas 2, nem que aumentes o width numa e noutra.


Nick antigo: softclean | Tens um projeto? | Wiki P@P

Ajuda a comunidade! Se encontrares algo de errado, usa a opção "Denunciar" por baixo de cada post.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.