Ir para conteúdo

POWERED BY:

Arquivado

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

Tiago Macedo

Como aumentar a div conforme o tamanho do texto?

Por , em Desenvolvimento frontend

Recommended Posts

Tiago Macedo    0

Tiago Macedo
Postado

Bom dia,

Gostaria de saber se em css é possivel aumentar uma div conforme o tamanho do texto.

Em um modelo de layout, tenho 4 div's ...

 

1º div = topo

2º div = barra lateral

3º div = conteudo

4º div = rodapé

 

-Na div 3, se eu colocar um texto maior do que a div ele vai passar por cima da outra div, como resolver isso?

 

-Segunda dúvida, tem como eu colocar uma cor de fundo na div 2, para que essa aumente também seu tamanho conforme o texto da div 3. Sinão vai ficar desalinhado....

 

- Terceiro, na pagina de estilos adicionei o campo body .... e na pagina .html chamei ele através do comando:

<div id="body"></div>

Gostaria de saber se tem algo de errado com o codigo acima, pois a imagem não aparece no site.

- Quarta dúvida: Como faço para deixar o texto dentro da div 3 com uma margem de 10px ?

 

O Link para vocÊs visualizarem o layout esta em: LAYOUT

 

Os códigos estão abaixo.

 

 

SITE.CSS

/* ---> Inicio da posição do Layout <----- */#cima /* Parte superior, logotipo */{position: absolute; top: 10px; left: 10px; width: 764px;height: 100px; background: blue; }#lateral /* Posicionamento lateral esquerdo */{position: absolute;top: 110px; left: 10px;width: 100px; height: 300px;background: red;}#conteudo /* Posicionamento da parte central */{ position: absolute;top: 110px;left: 110px;width: 664px;height: 300px;background: gray; font: 90% Verdana, Arial, Helvetica, Tahoma, Sans-Serif;}#inferior /* Posicionamento do Rodapé */{position: absolute; top: 410px; left: 10px; width: 764px; heigh: 30px;background: green; }/* ---> Fim da posição do Layout <----- */#body {	background-image: url(imagens/fundo_site.jpg);	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;}

Site.html

<html><head><title> :: Contruindo um site em css </title><link rel="stylesheet" href="site.css" type="text/css"></head><body><div id="body"></div><div id="cima"></div><div id="lateral"></div><div id="conteudo"><h3>Nadadora diz que apanhou por causa de namorado</h3><a>Ucraniana Katerina Zubkova afirmou que a fúria do pai e técnico Mikhaylo após uma prova do Mundial de Esportes Aquáticos foi por causa de um namorado. A nadadora foi agredida após não avançar em uma prova da competição realizada na Austrália, mas ambos já fizeram as pazes. <br><br>"Sinto muito pelo que aconteceu... foi minha culpa também. Eu o desobedeci e ele ficou bravo", disse a nadadora, 18 anos, em entrevista ao Herald Sun. Zubkova recebeu a ordem do pai de não mais se encontrar com o namorado.<br><br>"Ele nunca havia me batido antes. Ele nunca havia levantado a mão para mim", completou a nadadora ucraniana. <br><br>"Foi uma situação muito emocional. Eu toquei em uma questão muito sensível e as emoções ficaram muito exaltadas", comentou Zubkov, suspenso pela Fina (Federação Internacional de Natação). <br><br>Nesta quinta-feira, a dupla esteve presente em um distrito policial para prestar depoimento sobre o incidente. No acordo, Zubkov assegurou que não iria repetir a conduta no futuro. <br><br>Na sexta-feira, Zubkova volta às piscinas para a disputa dos 200m costas, mas sem a presença por perto do pai.</a> </div> <div id="inferior"></div></body></html>

Bom galera, me desculpem pelo tamanho do post.

Aguardo a ajuda de vocês.

Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Tiago Macedo, você tem que ler os links que tem aqui no fórum. Tem que estudar.

http://forum.imasters.com.br/index.php?s=&...st&p=536888

 

Pq tanto position: absolute;?

Vocês está fazendo o código com Dreamweaver? Se tiver vai outra dica, faça na mão, até pode utilizar o DW, mas no modo código.

 

Vá até o site do maujor e pesquise sobre Layout CSS de 2 colunas com faux column, vai responder as suas dúvidas.

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Macedo    0

Tiago Macedo
Postado

Boa tarde galera, fiz como vocês mencionarão....Surgiu uma dúvida.É possivel marcar um tamanho padrão... da div lateral e da div conteudo ?se o texto da div conteudo for menor que o tamanho da div lateral, então assume o valor defaut, e se o texto do conteudo for maior que o tamanho padrão dos dois div's ..... que os dois então aumente conforme o texto... é possivel fazer isso ???Abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Macedo    0

Tiago Macedo
Postado

Galera me desculpem, não tinha dado certo porque esqueci de mandar a imagem para o site... mil desculpas.... Agora pra ficar perfeito, gostaria de saber só mais uma coisa.. Como posso por exemplo adicionar um fundo com tamanho de 100% .... ai se a pessoa por exemplo estiver com uma resolução superior a do meu site por exemplo... que meu site fique centralizado e nas laterais fiquem com uma cor cinza... é possivel ????

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Coloque:

 

margin:0 auto;

Na div que engloba todo o site(se naum existir crie), e ponha um fundo no body, pode ser um degradê com repeat, outra imagem qualquer, ou apenas uma cor

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Macedo    0

Tiago Macedo
Postado

Bom dia.

Tentei colocar como você disse mas acho que já tem algo de errado com o código...

se no body eu coloco background: url(fundo_site.jpg) repeat-y 0 0;

O site aparece sem nenhuma cor e desalinha todas as div's.... o que tem de errado?

 

body {	width: 100%;	height: 100%;	margin:0 auto;	font: 12px Arial, Helvetica, sans-serif;	text-align:center;	}#tudo {	width:764px;	background: url(faux-bg.gif) repeat-y 0 0;	text-align:left;	margin:0 auto;	}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Opa, O arquivo faux-bg.gif esta na mesma pasta do arquivo css? Senão, o motivo do fundo estar aparecendo em branco.Senão for isso, poste um link para analisarmos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hunter_    0

Hunter_
Postado

Erro craso e n vi

 

 

#tudo {	width:764px;	background: url(faux-bg.gif) repeat-y 0 0;	text-align:left;	margin:0 auto;	}

 

Tava tentando ver o bg e n achava, imagem muito clara!! e ela so aparece á esquerda!!pq:?? mágica? não apenas corrija

 

 

background: url(faux-bg.gif) repeat-y 0 0;/* aqui você mandou o background repetir apenas no eixo Y( vertical)*/

por

 

background: url(faux-bg.gif);/*aqui omitindo o repeat o browser entende que é para repetir no eixo X-Y (horizontal e vertical) */

Espero ter ajudado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

fenixgroup    0

fenixgroup
Postado

Boa tarde!

 

Sou novo na área de html/css e stou com uma dúvida besta. Estou criando um site e estou inserindo um texto em uma div, mas quando diminuo a tela este texto não diminui junto com a div ele fica do mesmo tamanho e fica um visual terrivel.

 

Alguém poderia me ajudar?

 

Segue o link do site:

 

fenixgroup

 

O problema está na página "CLIENTES"

 

FICO NO AGUARDO DE UMA AJUDA URGENTE!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

fenixgroup    0

fenixgroup
Postado

assim eu aumento a minha div eu quero que a div fique como esta o texto esta no tamanho ideal mas quando minimizo minha janela o texto não diminiu



acho que a forma como montei minha página não está correta

1ª div

 

#conteudo{

position: relative;
background-color: rgba(255,255,255,0.4);
width: 60%;
height: 85%;
top: 10%;
left: 25%;
}
2ª div
#divclientes{
position: relative;
background-color: #ededed;
width: 80%;
height: 30%;
top: 2%;
margin: 0 auto;
border: 2px solid #fff;
}
formatação de paragrafo
p{
font-size: medium;
text-align: center;
margin-top: 2%;
margin-right: 2%;
margin-bottom: 2%;
margin-left: 2%;
white-space: nowrap;
}
e inseri uma div conteudo, dentro desta div eu inseri outra div e formatei o "p"
o tetxo ficou correto se eu diminuo a resolução o texto diminui junto mas se eu miniminizo a tela do meu navegador tudo diminui menos o texto inserido
como corrigir isto?

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