Ir para conteúdo

POWERED BY:

Arquivado

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

Uiu

Texto vazando da div

Por , em Desenvolvimento frontend

Recommended Posts

Uiu    0

Uiu
Postado

Olá a todos,

 

Estou fazendo um layout baseado em 3 colunas de conteúdo e tal, determinei o width de 640px para o conteúdo ocupar 2 colunas de uma vez só.

Até aí tudo bem, aqui no Dreamweaver ele está exibindo numa boa do jeito que deveria ser, porém quando vou testar em todos navegadores, o texto não respeita o width vaza 640px e acaba ocupando os 960px.

 

Já coloquei max-width e mesmo assim nada acontece.

 

Segue abaixo o CSS da div de coluna.

 

#2col {
margin-top:10px;
width:640px;
float: left;
overflow: hidden;
max-width:640px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Uiu    0

Uiu
Postado

Opa, segue aí o CSS todo e o HTML:

 

body {
font-family:Futura lt BT;
}

::selection {
background: #007dc5;
color:#ffc20e;
}
::-moz-selection {
background: #007dc5;
color:#ffc20e;
}

h1 {
font-size:40px;
color:#ffc61d;
}

h2 {
font-size:22px;
color:#000;
}


.wrapper {
width:960px;
margin-left:auto;
margin-right:auto;
}

.header {
height:117px;
background:url(../img/header_bg.jpg);
width:100%;
}

.nav_principal {
float:right;
margin-top:-50px;
}

.nav_principal li {
display:inline;
padding-left:70px;
font-size:16px;
}

.nav_principal a {
text-decoration:none;
color:#1066ab;
}

#slideshow {
background:url(../img/slide_bg.png);
height:333px;
width:100%;
}

.nav_jogadores {
margin-top:10px;
text-align:center;
}

.nav_jogadores li {
display:inline;
padding-left:50px;
font-size:16px;
}

.nav_jogadores a {
text-decoration:none;
color:#1066ab;
}

.conteudo {
margin-top:50px;
}

.1col {
margin-top:10px;
width:320px;
}

.2col {
float: left;
width:640px;
}

.2col p {
color:#666;
font-size:14px;
}


.3col {
margin-top:10px;
width:960px;
}

.separador {
margin:5px 0 10px 0;
}

 

HTML:

<body>

<div class="header">
<!---------------------- Começo do Header ---------------------->
<div class="wrapper">
<!---------------------- Começo do conteúdo do menu ---------------------->
<img src="img/logo.png" style="padding:20px 0 30px 0;" />
<!---------------------- Começo do menu de navegação ---------------------->
<div class="nav_principal"> 
 <ul>
<li><a href="#">Home</a></li> 
<li><a href="#">Institucional</a></li>
<li><a href="#">Notícias</a></li>
<li><a href="#">Filiais</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<!---------------------- Fim do menu de navegação ---------------------->
</div>
<!---------------------- Fim do conteúdo do menu ---------------------->
</div>
<!---------------------- Fim do Header ---------------------->



<div id="slideshow">
<!---------------------- Começo do Slideshow ---------------------->
<div class="wrapper">
<ul id="slider1">
 <li><img src="img/slide1.jpg" alt="sadasd" /></li>
 <li><img src="img/slide1.jpg" alt="sadasd" /></li>
 <li><img src="img/slide1.jpg" alt="sadasd" /></li>
 <li><img src="img/slide1.jpg" alt="sadasd" /></li>
</ul>
</div>
</div>
</div>
<!---------------------- Fim do Slideshow ---------------------->


<!---------------------- Começo do menu de jogadores ---------------------->
<div class="nav_jogadores" >
<ul>
<li><a href="#">Treinador</a></li>
<li><a href="#">Novos Talentos</a></li>
<li><a href="#">Atacante</a></li>
<li><a href="#">Meia</a></li>
<li><a href="#">Volante</a></li>
<li><a href="#">Zagueiro</a></li>
<li><a href="#">Lateral-Direito</a></li>
<li><a href="#">Goleiro</a></li>
</ul>
</div>
</div>
<!---------------------- Fim do menu de jogadores ---------------------->


<!---------------------- Começo do conteudo ---------------------->
<div class="conteudo">
<div class="wrapper">
<div class="2col">
<h2>NOTÍCIAS</h2>
<img src="img/not1.jpg" style="float:left"  />
<h2>Lorem ipsum</h2>
<p>Donec ornare bibendum ante ut tempor. Quisquea euismod, risus vitae iaculis dictum, sem erat mattis lacus, sed consequat enim massa id ante.</p>
</div>
<!---------------------- Fim do conteudo ---------------------->
</div>
</div>
</body>

 

PS: O css está diferente porque acabei de trocar o que era ID para Class

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

1. Não encontrei o fragmento do primeiro post no CSS.

 

2. Você tem uma div com classe 2col e no CSS do primeiro post você procura por um elemento com id 2col

Compartilhar este post

Link para o post
Compartilhar em outros sites

Uiu    0

Uiu
Postado

Como eu havia dito no meu post, troquei tudo que era ID por Class, só ler lá no final do post que postei os códigos.

 

Esqueci de avisar que removi algumas coisas da classe enquanto estava testando, que independente de qualquer coisa, nao alterou bruscamente a classe 2col.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Em qual parte quebra? Você está digitando um texto "normal" ou "um monte de letras juntas"?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Uiu    0

Uiu
Postado

Em qual parte quebra? Você está digitando um texto "normal" ou "um monte de letras juntas"?

 

Estou usando aquele gerador de Lorem Ipsum.

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