Ir para conteúdo

POWERED BY:

Arquivado

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

uiLhian

Texto "Quebrado" dentro da div

Por , em Desenvolvimento frontend

Recommended Posts

uiLhian    1

uiLhian
Postado

Olha a imagem: 2hi81li.jpg

 

CSS:

 

#RODAPE  {  
clear : both;  
height : 50px;
margin-top : 10px;
border-top : solid 1px #CFCFCF;
background : #F5F5F5;
font-family : 'ABeeZee', sans-serif;
}
  
#RODAPE .endereco, .telemail { 
padding : 5px 0 5px 10px;
float : left;
line-height : 17px;
}

#RODAPE .endereco dl, .telemail dl {
width : 42%;
overflow: hidden;
}

#RODAPE .endereco dt, .telemail dt {
float : left;
border-right : 1px solid #CFCFCF;
padding-right : 5px;
}

#RODAPE .endereco dd, .telemail dd {
width : 240px;
display : inline;
}

HTML

 

 

<div id="RODAPE"><div class="endereco">
<dl>
<dt><img src="imagens/E32.png" alt="Endereço" title="Endereço" /></dt>
<dd>nao sei pq esta qebrando a div assim.</dd>
</dl>
</div>
<div class="telemail">
<dl>
<dt><img src="imagens/C32.png" alt="Endereço" title="Endereço" /></dt>
<dd>e aqui tbm esta quebrando tudo naum sei pq.</dd>
<dd>o que fazer ?</dd>
</dl>
</div>
</div>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Ué, mas ele não "quebra". Ele apenas se comportou de acordo com o tamanho do seu elemento, conforme está no CSS:

 

 

#RODAPE .endereco dd, .telemail dd { width : 240px; }

 

Ou você troca/elimina esta largura, ou então usa:

 

 

white-space: nowrap;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

Boa noite a todos. Olá amigo! Veja Se é isso que você quer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 type="text/css">

#RODAPE  {
width:auto ;
height: 100px;
background: #0FC;
font-family : 'ABeeZee', sans-serif;
}
 
.telemail_a{
width:300px;
height: auto;
padding:5px 0px 5px 10px;
float:left;
text-align:left;
background:#09C;
}

.telemail_b{
width:300px;
height: auto;
padding:5px 0px 5px 10px;
float:left;
text-align:left;
background:#090;
}

</style>


</head>

<body>

<div id="RODAPE">

<div class="telemail_a">
nao sei pq esta qebrando a div assim.
nao sei pq esta qebrando a div assim.
nao sei pq esta qebrando a div assim.
nao sei pq esta qebrando a div assim.
</div>

<div class="telemail_b">
e aqui tbm esta quebrando tudo naum sei pq.
o que fazer ? e aqui tbm esta quebrando tudo naum sei pq.
o que fazer ? </div>


</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

uiLhian    1

uiLhian
Postado

- não Biel não era isso que eu queria... mas brigadão!

- André Campos: eu tirei o display:inline e aumentei a porcentagem width : 42%; pra 100% ae deu certo eu não tinha reparado. :)

 

Valeu!

 

 

uma outra coisa...

 

 

eu tava ajeitando o rodapé aqui e vi que o "padding-left" não estava funcionando dentro da tag <dd> ae coloquei borda dentro da tag <dd> pra ve e percebi que ela ta "invadindo" a tag <dt> que é onde fica a imagem. não sei se isso é "padrão" ou se tem algo no meu css.

segue a imagem e depois os códigos.

ehx8h.jpg

 

CSS:

 

#RODAPE  {  
clear : both;  
height : 50px;
margin-top : 10px;
border-top : solid 1px #CFCFCF;
background : #F5F5F5;
font-family : 'ABeeZee', sans-serif;
}
  
#RODAPE .endereco, .telemail { 
padding-left: 10px;
float : left;
line-height : 17px;
}

#RODAPE .endereco dl, .telemail dl {
width : 100%;
overflow: hidden;
}

#RODAPE .endereco dt, .telemail dt {
float : left;
border-right : 1px solid #CFCFCF;
padding-right : 5px;
}

#RODAPE .endereco dd, .telemail dd {
width : 280px;
white-space : nowrap;
padding-left : 50px;
border: 1px solid #333;
}

HTML:

 

<div id="RODAPE">
<div class="endereco">
<dl>
<dt><img src="imagens/E32.png" alt="Endereço" title="Endereço" /></dt>
<dd>blalksfjdofjsdngsd ndjfsnfnsdjng fnqosnfonf</dd>
</dl>
</div>
<div class="telemail">
<dl>
<dt><img src="imagens/C32.png" alt="Endereço" title="Endereço" /></dt>
<dd>djfhisdhgihdgihjsdgh</dd>
<dd>dijghishgiosjgoijsogjosgj</dd>
</dl>
</div>
</div>

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