Ir para conteúdo

POWERED BY:

Arquivado

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

giga_fire

Como eu coloco o mald*to rodapé

Por , em Desenvolvimento frontend

Recommended Posts

giga_fire    0

giga_fire
Postado

Gnt... basicamente eu uso esse código ae:

<body><div id="banner"></div><div id="menu"></div><div id="conteudo"></div></body>

 

Então, todas estao posicionadas em 'absoulte', definidas com 'top' e 'left'. O que eu quero saber é como colcoar um rodapé?

 

Eu já tentei 'bottom:0px;left:50%;margin-left:-50%' mas nao dá certo quando a página fica com o scroll. O que poderia fazer pra colocar um rodapé?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Caveira    0

Caveira
Postado

vey andei lendo uns artigos de CSS ae vi um check list q tah nu site du majour

 

tah dizendo assim

 

O site usa unidades de medida relativas em lugar de absolutas para tamanhos de texto?

 

Use unidades de medidas relativas em lugar de absolutas, nos atributos da linguagem de marcação e nos valores de propriedade da folha de estilo.

http://www.w3.org/TR/WCAG10/wai-pageauth.h...-relative-units

 

 

 

eu achu melhor fazer tudo RELATIVE pq eh mais facil posicionar

 

mas tipo se for definir ABSOLUT colocah assim

 

<body>

<div id="banner"></div>

<div id="menu"></div>

<div id="conteudo"></div>

<div id="rodape"></div>

</body>

 

e ae oc colocah a posição do rodapeow entaum

 

<body>

<div id="banner"></div>

<div id="menu"></div>

<div id="conteudo">

<div id="rodape"></div>

</div>

</body>

 

ae oc define o height e define a margem de baixo com o height negativo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Herege    0

Herege
Postado

Você está tentando centralizar o conteúdo do site? Acho que para isso não precisa de uma margem negativa com o mesmo valor do Left. Para ficar com posição relativa:

#menu { position:relative; }
Só substituir no CSS. A posição é relativa porque está relacionada ao tamanho do viewport ou do elemento "pai". Por exemplo:
#site { position:relative; width:763px; height:auto; left:50px; }#topo { position:relative; width:100%; height:100px; top:0px; }#menu { position:relative; width:125px; height:auto; top:100px; left:100px; }
O site deve ficar mais ou menos assim, quando div#site for o 1º div e dentro dele estiverem o div#topo e div#menu.

_________________|________________||      |      |                ||      |      |                ||      |      |                ||      |      |                ||___|___|________|

A posição do div#menu está relacionada ao div#site.Acho que a W3C não recomenda um div dentro de outro só para declarar o tamanho da página e infelizmente o IE não renderiza a página corretamente, mesmo com o menu de 125px estar a 100px de distância das bordas do div#site, o DIV vai continuar ocupando o espaço e outro elemento com posição relativa substituindo aquele espaço, não irá aparecer, o div#menu será exibido como se tivesse uma margem de 100px, enquanto no mozilla o tamanho continua o mesmo, mas o bloco "flutua" 100px para a direita. Para centralizar o conteúdo, normalmente eu coloco a coluna com conteúdo primeiro com posição relativa e bordas com as cores de fundo dos menus da esquerda e direita ou com uma margem com o tamanho dos menus.Depois, dependendo do menu, há a necessidade de colocar em posição absoluta para o IE não deformar o conteúdo. Se tiver dificuldades com o posicionamento, caso o layout seja centralizado:http://www.csscreator.com/version2/pagelayout.phpEspero que tenha entendido http://forum.imasters.com.br/public/style_emoticons/default/yay.gif XD

Compartilhar este post

Link para o post
Compartilhar em outros sites

giga_fire    0

giga_fire
Postado

Kra... eu fui usar esse position: relative nas divs e usei o site que você passou ae, meu... quebrou o site todo :@

 

O que será que aconteceu? Sabe viu, eu to quase desistindo de Tableless... eu achei que seria mais fácil de fazer o que com as tags <table> mas tô vendo que está sendo mais difícil...

 

Meu, se não for pedir muito, será que você poderia passar um layout completo apenas em divs? Tipo:

<div id="site">  <div id="topo"></div>  <div id="menu"></div>  <div id="conteudo">    <div id"rodape">  </div></div>

Eu acho que desse jeito aí dê certo, mas por favor, eu tenho que terminar logo isso... é claro... eu não quero apreçar ninguém...

 

Valew...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Caveira    0

Caveira
Postado

página XHTML no modo strict recomendo usar o trasational (achu q eh issu hehehe) já que oc está começando agora.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

<title>Titulo da página</title> [COLOR=red]<!-- Lembresse que qualquer caractere não comum, como por exemplo 'á, <, ô' ... devem estar com seus devidos codigos em seu lugar -->[/COLOR]
<meta http-equiv="content-type" content="text/html;charset=utf-8" >

<link rel="stylesheet" href="seucss.css" type="text/css" >

</head>

<body>

<div id="tamanhodapagina" >

<div id="topo" >

		<div class="content"> Aqui vem o topo </div>

</div>

	<div id="meio">

		<div id="lateralesquerda" >
			<div class="content"> Aqui vem o menu </div>
	</div>

	<div id="texto" >

		<div class="content"> Aqui vem o texto </div>
	</div>

		<div class="pontodeapoio"></div>[COLOR=#F2D61C] <!-- Serve para forçar a div pai, no caso a 'meio', a manter sua altura igual a da maior div dentro dela -->[/COLOR]

</div>

	<div id="rodape" >
	<div class="content"> rodapé </div>
</div>

<div class="clr"></div>

</div>

</body>
</html>

 

e o codigo CSS

html, body{ [COLOR=#F2D61C]/* cofigurações gerais da pagina */[/COLOR]
margin:0; 
padding:0; 
text-align:center; 
} 

#larguradapagina { [COLOR=#F2D61C]/* define largura da página */[/COLOR]
width:776px; 
text-align:left; 
min-width: 500px;
margin-left:auto; 
margin-right:auto; 

} 

#topo {  [COLOR=#F2D61C]/* define o topo use o backgound caso queira colocar imagens */[/COLOR]
height:100px; 
width:100%; 
background-color:#EEEEEE; 
} 
#meio{  [COLOR=#F2D61C]/* Define a area do menu e do texto */[/COLOR]
clear:both;
}  

#lateralesquerda{[COLOR=#F2D61C] /* Define a lateral esquerda, o MENU */[/COLOR]
width:250px; 
float:left; 
position:relative; 
margin-right:10px; 
}

#texto { [COLOR=#F2D61C]/* Define local do texto */[/COLOR]
 margin:0px;
 margin-left: 260px;
 width: auto;
 }

[COLOR=#F2D61C]  /* Define o rodape */[/COLOR]
#rodape{
height:30px; 
width:100%; 
background-color:#DDDDDD; 
}

.pontodeapoio{
 clear:both;
 }

.content{[COLOR=#F2D61C]/*padding for content */ [/COLOR]
 padding:5px;
 }

 

estude esse codigo e se der errado dah o grito ae q tamu ae hehehe

fiz correndo aqui malz se num funfa

 

http://forum.imasters.com.br/public/style_emoticons/default/hug.gif

^^CAV

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