Ajustar rodapé por DIV

Claudio Neto · Novembro 25, 2008

Olá a todos, estou criando uma página e estou tentando construí-la totalmente por tableless, usando DIV e CSS.

Minha default é composta por 4 páginas, o cabelho, lateral esquerda, lateral direita e rodapé.

Todas as quatro coloquei as imagens, botoes e mais o que tiver que ter através de div, então na default somente fiz quatro #include file.

Só que me surgiu um problema, irei utilizar o rodapé em todas as páginas, e não necessariamente, todas terão os mesmos tamanhos nas laterais esquerda e direita.

Então eu preciso de um jeito de, independente do tamanho das laterais, sempre colocar o rodapé abaixo do resto da página sem deixar um espaço muito grande em vão.

Eu estava fazendo através de tabelas antes, e estava dando certo nesse ponto, mas tomei um bronca aqui no fórum dizendo que tables são para dados e tableless para layouts, então estou alterando tudo, rs...

Alguém pode me ajudar?

Obrigado.

William Bruno · Novembro 25, 2008

Então eu preciso de um jeito de, independente do tamanho das laterais, sempre colocar o rodapé abaixo do resto da página sem deixar um espaço muito grande em vão.

Não entendi...

é isso oq procura?

http://imasters.com.br/artigo/9065/css...aixo_da_janela/

Exatamente oq quer dizer: sem deixar um espaço muito grande em vão ?

Onde é esse espaço?

todas terão os mesmos tamanhos nas laterais esquerda e direita

Se refere à tamanho vertical?

Já ouviu falar de Faux Columns?

http://forum.imasters.com.br/index.php?showtopic=309442

http://forum.imasters.com.br/index.php?showtopic=225319

Coloque um link para teu site, pois ficou dificil imaginar a situação por essa descrição.

Aprendiz CSS · Novembro 25, 2008

Se este que o william te passou não der certo

tente este

http://forum.imasters.com.br/index.php...t&p=1143818

ou dê uma olhada aqui

http://forum.imasters.com.br/index.php?showtopic=314618

abraço

Claudio Neto · Novembro 26, 2008

Só olhei o seu primeiro tópico até o momento, mas ele não conseguiu resolver totalmente meu problema pelo fato de meu código estar estruturado de forma diferente ao que ele passou. Mas talvez você possa me dizer se o que estou fazendo está errado.

Abaixo partes de meu código para entender:

Página default

<body>

<!--#INCLUDE FILE="vitrine.asp"-->
<!--#INCLUDE FILE="promocoes.htm"-->
<!--#INCLUDE FILE="CABECALHO.asp"-->
<!--#INCLUDE FILE="rodape.htm"-->

</body>

Vitrine:

<div id="vitrine" style="position:absolute;top:43%;left:15%;margin-left:-150px;margin-top:-100px;width:450px;height:45px;">
		<table border="0" width="700px">
			<tr>
				<td colspan="3" align="center">
					<img src="https://pagseguro.uol.com.br/Security/Imagens/728x90_10X_pagseguro.gif">
				</td>
			<tr>
			<tr>
				<td class="Anuncio" align="center" colspan="3"><br><p>Produtos em destaque:</p><hr><br></td>
			</tr>
			<%do while intrec<rs.pagesize and not rs.eof
			if intrec = 0 or intrec mod 3 = 0 then%>
			<tr height="20px" align="center" valign="center">
			<%end if%>
				<td class="vitrine">
					<img src="<%=rs("img_produtoPQN")%>">
					<p>
						<br>
						R<%=formatcurrency(rs("preco_unitario"))%>
						<br>
						<%=rs("nome_produto")%>
					</p>
				</td>
			<%intrec = intrec + 1
			if intrec mod 3 = 0 then %>
				</tr>
			<%end if
			rs.movenext
			loop%>
		</table>
	</div>

Promocoes:

<div style="position:absolute;top:43%;left:86%;margin-left:-150px;margin-top:-100px;width:200px;height:45px;">
	<img src="BANNERTG2.png">
</div>

Cabecalho:

<div valign="top"><img src="logo_new.gif"></div>
	
<div id="menu">
	<div class="itemmenu" onmouseover="over(1)" onmouseout="out(1)">
		<a href="default.asp">Nossas categorias</a><br>
		<%
		Set rs = CreateObject("ADODB.recordset")
		SQL = "select nome_categoria from categorias order by nome_categoria"
		rs.open SQL, conexao, 3, 3
		if not rs.eof then%>
		<div class="submenu" id="s1">
			<%do until rs.eof%>
			<a href="default.asp"><%=rs("nome_categoria")%></a>
			<%rs.movenext
			loop%>
		</div>
		<%end if%>
	</div>
	<div class = "itemmenu">
		<a href="">Home</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Meus dados</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Localizar pedido</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Histórico de compras</a><br>
	</div>	
</div>

Ou seja, em cada página, defini o lugar que os "objetos" deverão se localizar através do css, e só as inclui na default.

E no exemplo que ele deu, tudo está montado em uma só página.

Dá para eu aproveitar o exemplo dele no meu caso?

Ah, e sim, o tamanho que eu me referia é vertical.

Irei olhar o tópico do Aprendiz CSS e depois posto o resultado também...

Por hora, obrigado.

William Bruno · Novembro 26, 2008

Não tenho conhecimento de ASP.

Só analizamos o código HTML/CSS gerado por aqui... coloque um link para tua página..

mas veja que existem graves erros..

<div class = "itemmenu">
		<a href="">Home</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Meus dados</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Localizar pedido</a><br>
	</div>
	<div class="itemmenu" >
		<a href="default.asp">Histórico de compras</a><br>
	</div>

Se isso é realmente um menu, melhor seria usar <ul>, <li>...

e esse <br> está completamente perdido ai.. não vejo quebra de texto, para você o ter usado.

você posicionou a vitrine com absolute... se é uma parte do layout, não está muito correto isso.

Conhece a propriedade float? Poste um link para o site, para que vejamos o HTML final que tudo isso gera....

Claudio Neto · Novembro 26, 2008

Não se preocupe com a parte de ASP, não está contrinuindo muito para a montagem do layouto, que é onde estou tendo problemas.

Olha só, utilizei esse link para montar meu menu. Se tem algo errado vou brigar com o dono do post, rs, to brincando.

Clique aqui para visualizar

William Bruno · Novembro 27, 2008

Tem muito erro nesse HTML..

Veja, se você está trabalhando com includes, os arquivos de include, não devem contar as tags <html>, <head>, <body>.. pois esses pares devem ser únicos na página.

Independente de como você fez, o HTML final que é mostrado pelo browser, só deve conter apenas um DTD..

Retire essas repetições.

Veja... usamos o validador da w3c para conferir falhas na marcação, e o teu site apresenta várias..

http://validator.w3.org/check?uri=http%3A%...ine&group=0

Corrija isso antes de continuarmos, sem uma estrutura HTML correta, é impossível ajeitar detalhes de layout.

Claudio Neto · Novembro 27, 2008

Não entendo o motivo desses dois erros:

# Error Line 40, Column 87: required attribute "alt" not specified.

…ty/Imagens/728x90_10X_pagseguro.gif"/>

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

O que há de errado nessa linha:

<input type="image" src="<%=rs("img_produtoPQN")%>"/>

E:

# Error Line 53, Column 8: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag.

<p>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Que se refere a esse bloco:

<p>
R<%=formatcurrency(rs("preco_unitario"))%>
<br/>
<%=rs("nome_produto")%>
</p>

E alguns erros que está dando, é porque estou passando um valor na URL vazio, mas isso não terei o que fazer, preciso deixar assim mesmo.

Aprendiz CSS · Novembro 27, 2008

# Error Line 40, Column 87: required attribute "alt" not specified.

…ty/Imagens/728x90_10X_pagseguro.gif"/>

a tag alt é obrigatória em imagens!

na tag style falou colocar o type

<style type="text/css">

isso você deve fazer a mesma coisa com script

<script type="text/javascript">

nos & que aparecem os link sibistitua por & que é o "código" que representa o e comercial

o erro que dá na tag P é porque você está colocando um paragrafo dentro de um link

isso não é correto, troque o P por span

acho que é só!

abraço

William Bruno · Novembro 27, 2008

Só complementando... a marcação mínima para as imagens é sempre:

<img src="" alt="" />

Com um espaço, antes do />

E com espaços separando cada propriedade da tag. Vejo que teu código já melhorou absurdos ^^

Uma coisa que eu te indico à fazer agora, é deixar de lado esses absolutes, e fazer uma DIV que englobe todo o site, e centralize ele.

Pois aqui na minha resolução(1440x900), está tudo espalhado.

Claudio Neto · Novembro 28, 2008

Pode ser, vou tentar fazer baseado no tópico que me passou, mas ainda sim cairei no problema que postei antes, do menu. Sabe como evito isso?

William Bruno · Novembro 28, 2008

Eu não entendi bem oq você quiz dizer com esse problema do menu.

Conhece a propriedade z-index?

Não seria melhor então, alterar alguma coisa dos includes?... pq o importante é o HTML final gerado... a marcação final, tem que seguir a estrutura certa...

Claudio Neto · Novembro 28, 2008

Olha só, deu certo não, a página ficou uma bagunça só.

Não sei onde tenho que mexer para concertar isso agora.

Tirei tudo que indicava o local que as divs deveriam ficar, e todos os position.

Entra no link de novo para ver a zona que ficou.

Aprendiz CSS · Novembro 28, 2008

~~o link esta errado!~~ Editado: Link consertado

você deve usar o position para o que é necessário!

veja o que deve ser feito e posicione somente o que não tiver outra forma, utilize float também

abraço

Claudio Neto · Novembro 28, 2008

hehe, na verdade não conheço não, nem o z-index nem o float também.

Vou dar uma googlada e digo se consegui achar. E vou pesquisar também sobre position, que estou me perdendo por não saber o que significa absolute e relative.

Valeu aos dois...

Ops, o link certo: http://www.itbells.com.br/tableless. Estava faltando um e, por isso estava errado.

Claudio Neto · Novembro 28, 2008

Bom, consegui alterar algumas coisas.

Mas não estou conseguindo de forma alguma deixar a div lat_direita ao lado da div vitrine.

Meu CSS está assim:

#tudo{
	min-height: 100%;
	padding-bottom: 30px;
	position: relative;
	margin:0 auto;
}

/* hack para IE6 que trata height como min-height */
* html #tudo{
	height: 100%;
}

#rodape {
	background:#b0f1b0;
	width:760px;
	height:20px;
	position: absolute;
	bottom: 0; /**/
	border:dotted #999;
	border-width: 1px 0;
	text-align:center;
}
#rodape p {
	margin:0;
	font-weight:bold;
	color:#060;
}

#conteudo{
	padding-bottom: 30px;
	display:inline;
	position:relative;
	top:-80px;
	width:700px;
	padding-right:400px;
	float:left;
	padding-top:0px;
}

#vitrine{
	float:left;
	z-index:1;
}

#lat_direita{
	float:right;
	z-index:6;
}

#cabecalho{
	padding-top:1px;
	z-index:5;
	position:relative;
}

Nossa, que sufoco, programar é mais fácil que layoutar, rs...

William Bruno · Novembro 28, 2008

você vai precisar definir as laguras.

#vitrine{
	float:left;
	z-index:1;
}

#lat_direita{
	float:right;
	z-index:6;
}

É rapaz... HTML não é mole não... ^^

Leia todos os links que já lhe indicamos aqui..

http://forum.imasters.com.br/index.php...t&p=1173264

Claudio Neto · Novembro 28, 2008

Bom, consegui deixar a vitrine ao lado da lat_direita.

Mas não consigo de forma alguma colocar o rodapé para o fim da página.

Já fiz tudo que esses tópicos dizem para fazer (que praticamente todos dizem o mesmo), mas minha página nunca reage da mesma maneira das páginas que são dadas como exemplo.

Será que é muito ruim deixar sem rodapé? rs...

Aprendiz CSS · Dezembro 1, 2008

Veja isso

http://forum.imasters.com.br/index.php?showtopic=291579

abraço

Claudio Neto · Dezembro 1, 2008

Esse você já tinha passado.

Meu problema, acredito eu, é que, pelo que percebi, nesse exemplo todas as divs estão com suas positions definidas como normais (ou não estão definidas e por default são normais), com excessão da rodapé.

Mas se eu tento fazer dessa maneira, minha página não fica certinha. Fica com um vão grande entre o corpo e o cabeçalho, não sei se é por conta de eu estar utilizando absolute nos botões dos menus, sei que não fica igual ao exemplo. E meu rodapé não acompanha o fim da página.

Tentei até pegar seu fonte, mudar o conteúdo com o que precisa, mas não sei por qual motivo, nada apareceu, ficou tudo em branco.

Talvez meu erro esteja no css, mas tentei alterar um monte de coisa já, fazer de tudo quanto é jeito mais não cheguei no resultado esperado.

Eis meu css:

* {
	margin: 0;
	padding: 0;
	font-family: verdana, arial;
}

html, body {
	height: 100%;
}

#tudo{
	min-height: 100%;
	position: relative;
	margin:0 auto;
}

/* hack para IE6 que trata height como min-height */
* html #tudo{
	height: 100%;
}

#rodape {
	background:#b0f1b0;
	width:760px;
	height:20px;
	position: absolute;
	bottom: 0;
	border:dotted #999;
	border-width: 1px 0;
	text-align:center;
}

#conteudo{
	padding-bottom: 30px;	
	float:left;
	width:1000px;
	top:150px;
	position:relative
}

#vitrine{ /*é a principal no exemplo que deu*/
	z-index:1;
	width:715px;
	float:left;
}

#lat_direita{ /*é a secundária no exemplo que deu*/
	z-index:6;
	width:280px;
	float:left;
}

#cabecalho{
	padding-top:1px;
	z-index:5;
	position:absolute;
}

.coluna{ /*coloquei class="coluna" na vitrine e lat_direita*/
	float:left;
}

.clearFull{ /*e class="clearFull" na div clear*/
	clear:both;
	display:block;
}

Tem algo que eu possa alterar para ver se consigo?

Obrigado.

Arquivado

Ajustar rodapé por DIV

Recommended Posts

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Aprendiz CSS 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Claudio Neto 3