[Resolvido] Problema com DIVS

bcesarmotta · Janeiro 4, 2013

Boa noite, senhores!

Estou com um problema que me acompanha a algum tempinho já e não tenho idéia de como resolve-lo.

É o seguinte..

Quando eu posiciono uma div de 100% ela fica perfeita na tela, então até ai, sem problemas.

O problema é que, quando eu diminuo a janela do meu Browser para menos de 990 px(que é o que eu costumo usar de conteúdo) o conteúdo de dentro das divs fica saindo pra fora pelo lado direito.

Alguém sabe como eu posso estar fazendo para que isso não ocorra?

Tem gente que me disse que isso é normal, mas eu ainda tenho mias dúvidas, pois não acho possível que isso seja normal.. rs

Agradeço desde já!

e desculpem-me se violei alguma regra do fórum.

Abraços!

Marco Bruno · Janeiro 4, 2013

Olá,

Como os objetos internos esta definido?

bcesarmotta · Janeiro 4, 2013

Quais objetos ?

Marco Bruno · Janeiro 4, 2013

Bom dia, bcesarmotta.

Desculpa. Me expressei mal.

Qual o comportamento dos elementos HTMLs que estão dentro da div na qual você coloca com o width 100%?

Quando menciono comportamento, estou me referindo se os elementos estão flutuando o pode estar com absolute e por ai vai...

Layo · Janeiro 4, 2013

Bom dia

Já tive esse problema um tempo atras não sei se é a verdade mais a solução q achei foi o seguinte...

Caso trabalhe com 100% tente usar todos os outros seletores tambem pois se definir em px ele vai respeitar o tamanho e se chegar menos que 900px por exemplo ele vai tentar enquadrar...

Existe uma segunda opção media queries ex:

Definindo o minimo e o maximo:

<link rel="stylesheet" type="text/css" href="css/menu-m.css" media="screen and (min-width:401px) and (max-width:901px)" />

Essas propriedades sao validas nos seletores tambem:

seletor { min-width:401px; }

bcesarmotta · Janeiro 5, 2013

Bom dia, Marco!

Todo o conteúdo da Div está flutuando.

Tinha feito algumas alterações e não deu certo.

E essa alternativa que o Layo tinha sugerido também não funcionou.

O engraçado é que quando eu diminuo o tamanho da tela, e cria a rolagem horizontal, as divs ficam do tamanho exato que o browser está, porém, o conteúdo todo vaza pela direita.

F Lima · Janeiro 6, 2013

Bom dia, Marco!

Todo o conteúdo da Div está flutuando.

Tinha feito algumas alterações e não deu certo.

E essa alternativa que o Layo tinha sugerido também não funcionou.

O engraçado é que quando eu diminuo o tamanho da tela, e cria a rolagem horizontal, as divs ficam do tamanho exato que o browser está, porém, o conteúdo todo vaza pela direita.

Olá Motta,

Cole o cod aqui para podermos ajudar.

Abço

bcesarmotta · Janeiro 7, 2013

Aqui vai o código fonte e o css das páginas:

Obs: Sei que ainda tem bastante erro, mas, estou aprendendo.. rs

Index.html --------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Documento sem título</title>

</head>

<body>

</form>

REGISTRAR-SE | LOGIN

</div>

</div>

<li>QUEM SOMOS</li>

<li>BUSCA</li>

<li>UPLOAD</li>

<li>CONTATO</li>

</ul>

</ul>

</div>

</div>

<li><a href="#">QUEM SOMOS</a></li>

<li><a href="#">BUSCA</a></li>

<li><a href="#">UPLOAD</a></li>

<li><a href="#">TERMOS DE PRIVACIDADE</a></li>

<li><a href="#">CONTATO</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

reset.css --------------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

a, abbr, acronym, address, applet, article, aside, audio,

b, blockquote, big, body,

center, canvas, caption, cite, code, command,

datalist, dd, del, details, dfn, dl, div, dt,

em, embed,

fieldset, figcaption, figure, font, footer, form, html,

h1, h2, h3, h4, h5, h6, header, hgroup,

i, iframe, img, ins,

kbd,

keygen,

label, legend, li,

meter,

nav,

object, ol, output,

p, pre, progress,

q,

s, samp, section, small, span, source, strike, strong, sub, sup,

table, tbody, tfoot, thead, th, tr, tdvideo, tt,

u, ul,

var{

background: transparent;

border: 0 none;

font-size: 100%;

margin: 0 auto;

padding: 0;

border: 0;

outline: 0;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

table, table td {

padding:0;

border:none;

}

img {

vertical-align:top;

}

embed {

vertical-align:top;

}

topo.css --------------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#topo{

position:relative;

background-color:#171717;

background-repeat:repeat-x;

height:89px;

width:100%;

min-width:100%;

z-index:1;

}

#logo{

position:absolute;

left:50%;

margin-left:-495px;

}

#busca{

background-image:url(../imagens/barra-de-busca.png);

background-repeat:no-repeat;

width:255px;

height:30px;

float:right;

margin-right:190px;

margin-top:30px;

}

.busca{

width:225px;

height:18px;

margin-top:4px;

margin-left:4px;

background-color:#ececec;

border:none;

}

.lupa{

position:absolute;

margin-top:3px;

margin-left:3px;

}

#registro{

position:absolute;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:12px;

color:#fff;

top:0;

}

ul#menu{

position:relative;

width:990px;

height:61px;

margin-top:10px;

}

ul#menu li{

background-image:url(../imagens/botao.png);

width:198px;

height:61px;

float:left;

text-align:center;

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

color:#282828;

}

ul#menu li:hover{

background-image:url(../imagens/botao-hover.png);

color:#ffcc11;

}

corpo.css -------------------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#recentes{

background-image:url(../imagens/faixa-recentes.jpg);

height:220px;

width:100%;

position:relative;

margin-top:40px;

}

ul#ultimos{

position:relative;

width:990px;

}

ul#ultimos li{

width:198px;

float:left;

margin-top:15px;

}

#primeiro{

background-image:url(../imagens/exemplar2.jpg);

background-position:center;

background-repeat:no-repeat;

width:162px;

height:192px;

}

#segundo{

background-image:url(../imagens/exemplar2.jpg);

background-position:center;

background-repeat:no-repeat;

width:162px;

height:192px;

}

#terceiro{

background-image:url(../imagens/exemplar2.jpg);

background-position:center;

background-repeat:no-repeat;

width:162px;

height:192px;

}

#quarto{

background-image:url(../imagens/exemplar2.jpg);

background-position:center;

background-repeat:no-repeat;

width:162px;

height:192px;

}

#quinto{

background-image:url(../imagens/exemplar2.jpg);

background-position:center;

background-repeat:no-repeat;

width:162px;

height:192px;

}

geral.css -------------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

html, body{

height:100%;

}

#tudo{

min-height:100%;

}

html #tudo {

height: 100%; /* hack para IE6 que trata height como min-height */

}

rodape.css ---------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#rodape{

position:relative;

background-color:#171717;

width:100%;

}

#rodape_content{

width:990px;

background-color:#009;

}

ul#mapa{

background-color:#0C6;

width:200px;

left:0;

}

ul#mapa li{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:12px;

line-height:20px;

}

ul#mapa li a{

text-decoration:none;

color:#FFF;

}

ul#mapa li a:hover{

color:#ffcc11;

}

#direitos{

position:absolute;

float:right;

}

textos.css ------------------------------------------------------------------------------------------------------

@charset "utf-8";

/* CSS Document */

.texto{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:12px;

color:#fff;

}

h1{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:21px;

color:#3a3a3a;

}

.texto2{

font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

font-size:16px;

color:#3a3a3a;

text-align:justify;

}

O problema é que quando eu diminuo a tela para menos de 990 px as divs começam a diminuir (como é esperado) mas o conteúdo fica todo do lado de fora.

Percebi que isso acontece também neste site, porém, só com a barra de menu.

Isso não é normal, certo?

Abraços e muito obrigado pela ajuda!

GiovanniWeb · Janeiro 8, 2013

Cara, se eu entendi o que é vou tentar dar umas dicas para ver se te ajudo:

- Tente aplicar um display, provavelmente com valor block, senão, inline-block, vá testando todos.

- Caso não dê certo, aplique um overflow,também vá testando todos valores.Link W3C Overflow

- Num último caso, dê uma fuçada com position.

Bom, não sei mais como posso ta orientar, nem sei se entendi direito, mas teste! :thumbsup:/>

bcesarmotta · Janeiro 8, 2013

Opa!

Consegui resolver o problema.

Não sei se é correto, mas, eu apliquei mais uma div em volta do topo e do rodapé com mais algumas configurações.

Agora, quando a tela fica menor que 990px o conteudo do site fica todo dentro da div.

Mesmo assim, muito obrigado pela ajuda.

Abraços!

Arquivado

[Resolvido] Problema com DIVS

Recommended Posts

bcesarmotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

bcesarmotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marco Bruno 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Layo 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

bcesarmotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

F Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bcesarmotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

GiovanniWeb 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

bcesarmotta 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante