Preencher a largura total de um determinado lado do site

[rikaschmitt 54]

Bom dia pessoal.

 

Gostaria de algumas sugestões de como posso fazer com que um banner, que está localizado no meio do site (ou em qualquer parte), preencha a largura total do lado correspondente. Como no exemplo abaixo:

 

 

O banner preenche uma parte da área visível do site (para monitores com resolução 1024, por exemplo) e se estende "infinitamente" para o lado direito.. para quem usa monitores maiores.

[Marlon Pacheco 132]

min-width: 100% ?

Não consigo visualizar a imagem pois está bloqueada a URL aqui na empresa.

[rikaschmitt 54]

min-width: 100% ?

Não consigo visualizar a imagem pois está bloqueada a URL aqui na empresa.

 

 

tenta ver http://i57.tinypic.com/24159j5.jpg

[Marlon Pacheco 132]

Justamente essa URL que está bloqueada. :(

[rikaschmitt 54]

Justamente essa URL que está bloqueada. :(

 

a tah, putz.

 

Mas então, vou tentar explicar com palavras hahaha..

 

O site tem o conteúdo programado para a resolução 1024. A div principal do conteúdo tem 990px de largura.. Entretanto, em algumas partes do site, há alguns banners que se estendem "infinitamente" para um determinado lado (esquerda ou direita). Isso para quem tiver monitores maiores, tenha uma visão mais bonita das coisas...

 

Queria saber como fazer para um elemento ter width infinito para a direita, por exemplo... pois ele estará visível uma parte no site (dentro dos 990) e o restante ficará alocado para a direita\esquerda.

[rikaschmitt 54]

Alguém?

 

Ou então, existe uma forma de deixar a imagem fixa, para o navegador não criar scroll horizontal. Como se ela estivesse estacada no lugar. Poderia usar "background", mas o problema é que serão várias imagens, como um banner rotativo.

[victorqueiroz 34]

O banner preenche uma parte da área visível do site 

basta você definir o tamanho das divs em porcentagem, ao invés de pixel :)

[rikaschmitt 54]

O banner preenche uma parte da área visível do site 

basta você definir o tamanho das divs em porcentagem, ao invés de pixel :)

 

 

blz, vou experimentar aqui.

 

mas, assim, digamos que a imagem tem 1200px de largura.. e a resolução da pessoa permite "ver" apenas 400px, o site iria criar um scroll para deslizar a página neh? queria que fosse fixa a imagem, que não mostrasse scroll..

[William Bruno 1501]

background não cria scroll.

[rikaschmitt 54]

background não cria scroll.

 

Sim. Mas pretendo não usar background, eu acho.

Pois será uma área onde terá um banner rotativo.. então as imagens dos banners estarão listadas... só se eu usar a propriedade background no banner...

[victorqueiroz 34]

se você usar porcentagem, a imagem irá se adequar de acordo com a resolução do monitor, e não aparecerá nenhum scroll :)

[Daniel Ribas_53919 0]

cr , tente usar o width:100% e display , tente primeiro com inline-block '

[rikaschmitt 54]

O que eu fiz até agora:

 

Criei uma div com width 100%.

Dentro dela, criei duas divs: uma com 33% (esquerda) e outra com 66% (direita, que fica o banner).

 

Até que funcionou, pelo menos para a resolução que uso. Mas quando abro em uma solução menor, a div da esquerda não fica como eu quero, pois ela acompanha a % baseada na resolução e fica mais pro canto.

Já quando abro em uma resolução maior, o que acontece é o contrário: a div se afasta.

 

Estou perdido nisso já.

Não sei oq fazer.. hahahah

 

*estou usando um jquery pronto para o banner rotativo: bxslider o nome*

[xanburzum 169]

tentou colocar margin:0 e padding:0. vc pode fazer a Div se ajustar automaticamente ao tamanho procure trabalhar com porcentagem

[rikaschmitt 54]

tentou colocar margin:0 e padding:0. você pode fazer a Div se ajustar automaticamente ao tamanho procure trabalhar com porcentagem

sim, estou usando.

 

 

 

Consegui colocar o banner, mas não está ficando como deveria.

Usei %, mas quando a janela é redimensionada, dependendo do tamanho, fica tudo estranho.

Então, tive que fazer no manual mesmo.

Criei vários @media query para ajustar.

 

Assim:

@media only screen and (max-width: 1920px) {
.noteban-news { width:37.5%; position:relative; }
.noteban-banner { width:62.5%; }
}


@media only screen and (max-width: 1680px) {
.noteban-news { width:35.7%; position:relative; }
.noteban-banner { width:64.3%; }
}


@media only screen and (max-width: 1600px) {
.noteban-news { width:35%; position:relative; }
.noteban-banner { width:65%; }
}


@media only screen and (max-width: 1440px) {
.noteban-news { width:33%; position:relative; }
.noteban-banner { width:67%; }
}


@media only screen and (max-width: 1360px) {
.noteban-news { width:32%; position:relative; }
.noteban-banner { width:68%; }
}


@media only screen and (max-width: 1280px) {
.noteban-news { width:31%; position:relative; }
.noteban-banner { width:69%; }
}


@media only screen and (max-width: 1024px) {
.noteban-news { width:25%; position:relative; }
.noteban-banner { width:75%; }
}

:)