Ir para conteúdo

POWERED BY:

Arquivado

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

Davicamarinha

[Resolvido] Layout com faixa horizontal em Table

Por , em Desenvolvimento frontend

Recommended Posts

Davicamarinha    0

Davicamarinha
Postado

Ola a todos,

 

Sou novato nessa area de tableless e webstandards, e me bati com uma duvida, como fazer aqueles layouts que tem uma faixa horizontal, e essa faixa é variavel. Basicamente sao 3 colunas, e as da borda fazem o trabalho de resize dependendo da resolução do monitor do usuário. Como fazer isso em tableless???

 

Li sobre layouts liquidos, mas nenhum exemplo como o que eu citei acima.

 

Desde já agradeço a qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Eu não entendi direito o que você quer.

Não tem o link de algum site que seja como você quer?

Ou uma imagem?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado 

body {
	text-align: center;
	background-color: #000;
}

#tudo {
	margin: 0 auto;
	width: 750px;
	text-align: left;
	background: #000 url("caminho-da-imagem.jpg') no-repeat bottom center;
}

<html>
<body>
<div id="#tudo">

</div>
</body>
</html>

a marcação do html falta muita coisa para ficar valida, mas já ajuda como exemplo

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tenta isso:

<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #f00;
	/* caso não queria totalmente no centro, adicione um padding-left,right aqui */
}
#tudo {
	background-color: #000;
	width: 780px;
	height: 500px;
	margin: 0 auto;
}
#rodape {
	width: 100%;
	background-color: #ff0;
	height: 100px;
}
</style>

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




</div><!-- /tudo -->
<div id="rodape">

</div><!-- /rodape -->
</body>
Mas enfim, explica melhor.. oque não funcionou?

Veja se o exemplo do Aprendiz não era oque você pretendia, talvez seja porquê não entendemos oque você queria fazer.

 

Na primeira vez que olhei, pensei em sugerir que você fizesse como bg do body.

 

Essa faixa horizontal é exatamente oq? um rodapé, um header? um banner? é uma área utilizável? você vai querer escrever texto nela?

Dê mais detalhes doque pretende..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

manda um link do exemplo que você fez para eu fazer as modificação com as imagens que você tem

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Davicamarinha    0

Davicamarinha
Postado

eu meio que consegui posicionar, mas eles não estão preenchendo toda a tela como deveria.

 

o codigo é:

 

<!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>Untitled Document</title>
<style>
body {
	text-align: center;
	background-color:#000000;
}

#tudo {
margin: 0 auto;
/* width:750 px; */
height: 600px;
text-align: center;
}
#left {
float:left;
/* width:125px; */
height: 600px;
background-image:url(image/fundo.jpg);
}
#conteudo {
position:relative;
width:500px;
height: 600px;
background-image:url(image/fundo.jpg);
}
#right {
float:right;
width:125px;
height: 600px;
background-image:url(image/fundo.jpg);
}

</style>
</head>

<body>
<div id="tudo">
<div id="left">davi</div>
<div id="right"> </div>
<div id="conteudo"> </div>

</div>
</body>
</html>

e a imagem q estou usando de fundo é:

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Me explica essas coisas:

Essa faixa horizontal é exatamente oq? um rodapé, um header? um banner? é uma área utilizável? você vai querer escrever texto nela?

Dê mais detalhes doque pretende..

Sem isso fica dificil te ajudar.

Preciso saber oque você pretende. você vai inserir conteudo nessas faixas laterais? oque você chama de "borda" ?

<!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>Untitled Document</title>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
	background-color:#000000;
	background-image:url(http://img244.imageshack.us/img244/1277/fundoqu1.th.jpg);
	background-repeat: repeat-x;
}

#tudo {
	margin: 0 auto;
	width: 750px;
	height: 600px;
	text-align: center;
}

#conteudo {
	position:relative;
	width:750px;
	height: 600px;
	background-image:url(http://img244.imageshack.us/img244/1277/fundoqu1.th.jpg);
	background-repeat: repeat-x;
	border: 1px solid #f00;
	border-top: none;

}
</style>
</head>

<body>
<div id="tudo">


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

</div><!-- /tudo -->
</body>
</html>
Era isso ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title> ..:: teste ::.. </title>
	<style type="text/css">
		
		body {
			text-align: center;
			background: #000 url(fundo.jpg) repeat-x center bottom;
		}
		
		#tudo {
			width: 750px;
			margin: 0 auto;
			text-align: left;
			
		}
		
		#conteudo {
			background: #000 url(bg.jpg) no-repeat center bottom;
			height: 500px;
		}		
		
	</style>
</head>
<body>
	<div id="tudo">
		<div id="topo">
			<h1> TOPO </h1>
		</div>

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

apenas acerte o tamanho da imagem e o posicionamento

 

delas

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Davicamarinha    0

Davicamarinha
Postado

IISSOOOOOOOOO. As DIVS laterais são dimensionaveis. Se eu ver em 800x600 elas diminuem e se eu vejo em 1600 elas aumentam. Eu sabia fazer isso com TABLE, aonde se colocava 3 colunas, a do meio iria o conteudo do site, e as da extremidade iam so a imagem para dar esse efeito de ajustavel a qualquer resolução.

 

VALEU

 

ISSO, FUNFO. Era isso mesmo. Tava pensando de forma errada. Em Table voce criar 3 colunas. A do meio fica sendo o conteudo, as da extremida as que fazem a função de ajustavel a qualquer resolução. Tava fazendo a mesma coisa, so que com divs. Era so ter feito ai o que você fez, jogar uma div por cima e usar o background no body.

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