Jump to content


Photo

Tamanho Absoluto?


  • Faça o login para participar
6 replies to this topic

#1 SlyX

SlyX

    12 Horas

  • Usuários
  • 178 posts
  • Sexo:Não informado

Posted 27/06/2007, 15:34

seguinte.. to fazendo a pagina

mas eu nao queria definir ela com um TAMANHO fixo..
entao fiz:

#geral {
width:780px;
height:100%;
background:#FFF;
margin:auto;
padding:0 0 0 0;
font: 12px Tahoma, sans-serif;
clear: both;
}

soh que ela nao ta grade.. eu queria que a parte do background (branco) fosse ate onde fosse o texto.. mas é como se a pagina terminasse antes se eu nao setar o tamanho real "height:800px".. como faço isso?

deixa explicar oq eu quero ehehe...

eu queria 2 fundos.. tipo..

1 fundo por fora do site, e um (fundo branco) na parte onde tem texto escrito no site.. vo colar aki os respectivos codigos para vcs me dizerem "onde errei" ehehe

código da pagina:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="pt-br">
<head>
  <link rel="stylesheet" href="include/style.css" media="screen" />
</head>
<body bgcolor="#000000">

<div id="geral">
  <div id="topo">
	  <a href="">Topo</a>
  </div>
  <div id="menu">
	<ul>
	  <li><a href="menu/">menu</a></li>
	  <li><a href="menu/">menu</a></li>
	  <li><a href="menu/">menu</a></li>
	  <li><a href="menu/">menu</a></li>
	</ul>
  </div>

  <div id="principal">
	<div class="principal_left">
	  <p>
	  asdasda<br>asdasd<br>adasdasd<br>asdasdas
	   </p>
	</div>
	<div class="principal_right">
	  <p>
	  oioiopoiopopiopiopiopiopiopiopiiopiopiopiopiopoi<br>0oiopiopiopiopiopiopioiopiopiopopiopio
	  </p>
	</div>
  </div>
	<div id="rodape">
		<address>
			copyright?
		</address>
	</div>
</div>
</body>
</html>


código do css:
* {	margin:0; padding:0; list-style:none; text-decoration:none; font-style:normal; vertical-align:top; }

#geral {
 	width:780px;
 	height:auto;
 	background:#FFF;
 	margin:auto;
 	padding:0 0 0 0;
 	font: 12px Tahoma, sans-serif;
	clear: both;
}

a:active, a:link, a:visited { color: #5D5D5D; }
a:hover { color: #900000; }

#topo {
 	width:780px;
 	height:100px;
 	padding:0 15px;
}

#menu {
 	height:25px;
 	width:780px;
 	background:#900000;
 	display:table;
}

#menu ul {margin-left:5px}

#menu ul li {display:inline}

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited {
 	display:block;
 	float:left;
 	font:bold 12px/25px 'Trebuchet MS', Arial, Helvetica, sans-serif;
 	text-transform:uppercase;
 	color:#FFF;
 	margin-right:30px;
 	padding:0 5px;
}

#menu ul li a:hover {
 	background:#FFF;
 	color:#666;
}

#principal {
 	width:780px;
 	padding:30px 0 0 0;
}

#principal div.principal_left {
	width:180px;
	float:left;
		padding-right: 8px;
		text-align: right;
}

#principal div.principal_right {
 	width:570px;
	  border-left: 1px solid #CCC;
 	float:left;
		padding-left: 8px;
		text-align: left;
}

#principal div p {
 	font: 12px/18px Tahoma, sans-serif;
}

#rodape {
 	float:right;
 	width:400px;
		clear: both;
}

espero q vcs possam me ajudar :D
MSN: fabiovaz arroba gmail.com

#2 Andreia Regina

Andreia Regina

    Veterano

  • Conselheiros
  • 1347 posts
  • Sexo:Feminino
  • Localidade:PR
  • Interesses:PHP; MySQL; Javascript; CSS; tudo ligado ao desenvolvimento web.

Posted 27/06/2007, 16:07

Quanto aos dois fundos: na body você coloca o fundo desejado para ela, seja imagem ou apenas cor:
#bodyl { background: url(fundo.jpg) no-repeat;}
para saber mais propriedades acesse: http://www.artifice....d/tut_css5.html

Com relação ao fundo, experimenta colocar a propriedade min-height: na div desejada, segue mais um link para você
http://www.artifice..../tut_css12.html

Fórum WMO - Conselheira - Na equipe desde 31/01/2006.
Links importantes: Regras de conduta - Busca do fórum


#3 SlyX

SlyX

    12 Horas

  • Usuários
  • 178 posts
  • Sexo:Não informado

Posted 27/06/2007, 17:54

Quanto aos dois fundos: na body você coloca o fundo desejado para ela, seja imagem ou apenas cor:

#bodyl { background: url(fundo.jpg) no-repeat;}
para saber mais propriedades acesse: http://www.artifice....d/tut_css5.html

Com relação ao fundo, experimenta colocar a propriedade min-height: na div desejada, segue mais um link para você
http://www.artifice..../tut_css12.html


nao deu certo =/

ps: eh so cor memso =(

ps: ta o código todo.. se vc salvar ele, vc vai entender oq eu quero dizer ehhehe :D
MSN: fabiovaz arroba gmail.com

#4 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 28/06/2007, 17:20

Soca um display:table; nessa div geral.

Se por acaso der um bug no IE é normal, nem esquenta, é só colocar height:100% para o body da página também. Se mesmo assim bugar no IE5, coloca height 100% pro html também:

html, body{
  height:100%;
}

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#5 SlyX

SlyX

    12 Horas

  • Usuários
  • 178 posts
  • Sexo:Não informado

Posted 28/06/2007, 19:20

Soca um display:table; nessa div geral.

Se por acaso der um bug no IE é normal, nem esquenta, é só colocar height:100% para o body da página também. Se mesmo assim bugar no IE5, coloca height 100% pro html também:

html, body{
  height:100%;
}


funcionou aqui com o
html, body{
  height:100%;
}

mas oq seria este "display: table;" oq faria isso? uqando uso ele meio que "quebra" o layout ehehehe

ps: com o height100% nao deu certo (ele fica 100%, mas se vc descer a abrra de rolagem, quando tem mais texto em baixo, ele fica com o fundo normal ehhehe :D)
MSN: fabiovaz arroba gmail.com

#6 bimonti

bimonti

    Super Veterano

  • Usuários
  • 2654 posts
  • Sexo:Masculino

Posted 29/06/2007, 16:00

O display table serve para o elemento aumentar de tamanho para comportar os elementos filhos.

.div{ display:table; border:1px solid #000;}

<div class="div">
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
  <p>AAAA</p>
</div>

WebFórum - Equipe de Desenvolvimento - Monitor
Posted Image
Yeah I do have some stories, and it's true I want all the glory ...

#7 Raphaell

Raphaell

    Normal

  • Usuários
  • 80 posts
  • Sexo:Masculino
  • Localidade:Recife/PE
  • Interesses:Tableless, CSS, XHTML, Flash, ActionScript, Photoshop, Fireworks, Teoria das cores, Webdesign.

Posted 24/07/2007, 14:36

Velho, é simples você só tem de criar 2 div's, e uma por como geral, que engloba tudo, e a outra será o 2 geral, que vai englobar somente o conteúdo, aí na CSS você define o tamanho e tals.
Raphael Taveira Webdesigner
Avaliação (x)HTML, CSS & Visual.
Ocupado com projeto !!!
"Minhas seções": CSS & Semântica(Tableless)

Contato: raphaelstrous@yahoo.com.br




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq