para alinhar o conteudo horizontalmente

[estevao_lucas 0]

e aew galera beleza??

 

to fazendo um site pra minha empresa cujo o layout do site foi feito ( http://www.visitebrasilia.com.br/visitebrasilia.jpg ) e que o conteudo do site era pra ser em iframe com o conteudo todo alinhado horizontalmente!

devido a problemas com buscadores em relacao a iframe, resolvi fazer isso em css....nos padroes!

mas so que naum consequi alinha ele hozitontalmente!

 

sera q alguem poderia ajudar!

o site q eu estou montando:

http://www.visitebrasilia.com.br/index2.php

 

abraços

agradeço desde ja!

[Hunter_ 0]

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

 

Se entendi direito você quer fazer isso http://forum.imasters.com.br/public/style_emoticons/default/devil.gif

[estevao_lucas 0]

foi mals!!eh que eu queria q o conteudo do site ficasse horizontalmente....sem quebra de div!por exera pra ficar assim<topo><conteudo> <bloco1> <bloco2> <bloco3> <bloco4><rodape>mas tah ficando assim:<topo><conteudo> <bloco1> <bloco2> <bloco3> <bloco4><rodape>tipo um site de um evento imasters q eu naum lembro!!

[Giovani 104]

E ai Estavao,

 

Nào sei se entendi bem.....mas você quer isso:

 

<#topo><#conteudo><#bloco1> <#bloco2> <#bloco3> <#bloco4><#rodape>

São todas div's ou não entendi mesmo????

Se for isso tem uns artigos do Bruno Dulcetti q podem ajudar você....é só dar uma pesquisada lá!

 

Abraços!!!

[estevao_lucas 0]

kkkkkkkk...ninguem me entendi! rs.rs.rs o pior q naum sei explicar direito mesmo!!dinovo!!pra quem viu a index q eu passei!!aquela div(#conteudo) do meio entre o topo e o rodape....eu queria q o conteudo dentro dela ficasse alinhando horizontanlmente....tudo em uma so linha.....sem aparecer barra verticalem vez do conteudo ficar um abaixo do outro...ai eu botei a divi conteudo que é a div do meio......como width 100% overflow: auto; pra quando o conteudo passar do tamanho aparecer a barra de rolagem horizontal e botei umas paradas a mais! e naum deu certoeu queria que alguem me ajudasse nisso!!entenderam??

[micox 2]

Acho que o float:right pode te ajudar. Coloca ele em cada div 'bloco'.Mas quando chegar no limite de largura da tela ele irá quebrar e cair pra linha de baixo.Como solução para isto, você deve colocar um div pra conter os blocos e aumentar a largura dele. <topo><conteudo><blocos><bloco1> <bloco2> <bloco3> <bloco4></blocos><rodape>

[Giovani 104]

Nos artigos tá bem explicado....não tem erro Estavao....dá uma lida q você faz na boa!!!!

[THE_WATCHER 0]

Vem cá, você quer um site que nem o do InterCon? A diferença é que o do InterCon é com tabela hauhaeuaehaueÉ como o micox disse, crie uma div envolvendo todo o layout e aumente a largura para quanto você quiser.E como a largura do layout será maior que a largura da tela... qual a razão de centralizá-lo horizontalmente? :blink:

[estevao_lucas 0]

começaram a me entender!!gio!...........vou dah uma lida naquele tutorial! acho q jah li ele....mas vou ler novamento pra ver se eu acho algoThe watcher......o site q eu quero fazer é q nem aquele dah intercon msm!!....mas to tentando fazer ele nos padroes!! tentando!...o layout naum foi eu qm fiz........naum sei ql foi a intencao do do designer de fazer um site com conteudo horizontal....mastipoeu naum posso especificar largura da div q engloba tudo....pois naum sei qual vai ser a largura, vai depender de qual pagina vai ser! por exese for a index........vai ter um largura tal! e as outras paginas tmb!compriendem!! será q eu vou consequir fazer issso?abraços a todos

[micox 2]

Eu imagino que fazer um site horizontal sem tabelas e com largura variável é impossível. Pois a largura de uma div quando não é setada, fica como a largura do browser (ou seja, sem barra de rolagem horizontal)

E também para os elementos ficaram lado a lado você deverá usar float left, e o float pula pra linha de baixo ao atingir a largura de seu pai.

 

Eu acho que sem tabelas é impossível.

 

Mas, pra que você quer isso?? só pra ficar "bonito"? você tem que pensar na USABILIDADE pra seus usuários e não apenas em "frescuras" (me desculpe a palavra, é que não achei outra) visuais.

 

As pessoas poderão até achá-lo bonito, mas não estão acostumadas a ficar usando scrool horizontal. Elas acabarão achando um saco tudo aquilo e abandonarão seu site.

Inovação só é bom quando vem junto da praticidade... (minha opinião)

 

Estude mais sobre usabilidade:

http://forum.imasters.com.br/index.php?sho...&hl=usabilidade

[THE_WATCHER 0]

Concordo micox... rolagem horizontal não rola... além das pessoas não estarem acostumadas... não faz muito sentido...Mas se quiser implementar, também acho que não dá com largura variável, pois o limite é a tela... tanto da largura de um div quanto a posição do elemento com um float.

[estevao_lucas 0]

ae micox...realmente fica estranho....barra de rolagem horizontal! realmente o pessoal naum está acostumado.....to ligado na usabilidade! leio constatemente sobre usabilidade.....artigos e livre de Nielsen....mas naum sou eu qm faço o layout! cabe a mim apenas programar.!reconheço q eh frescura mesmo....mas falar q é imposivel fazer um site horizontalmente com largura variavel....ai jah eh exagero! existe n maneiras de se fazer um site e eu vou tentar ainda achar essa maneira!!eu agradeço a todos!e seu eu concequi fazer essa parada funfa em tableless, eu vou ficar muito feliz!! pois é imposivel pra vcs q saum membros q sacam de fazer site nos padroes!um grande abraço! e vlw

[micox 2]

Cara, sem tabelas e só no html/css puro fica meio impossível (se você conseguir você é o cara).

 

Mâaaas... fazendo umas gambiarras em javascript é possível:

 

<style>#conteudo {height: 100px; border:1px solid blue;}.quadro {height:98px; width:300px; overflow:hidden; float:left; border:1px solid black;}</style><script>function altera(){	var quadros, larguras,i;	quadros = document.getElementsByTagName("div");	larguras=0;		for(i=0;i<quadros.length;i++){		if(quadros[i].className=="quadro"){			larguras = larguras + parseInt(quadros[i].clientWidth);		}	}		document.getElementById("conteudo").style.width= larguras + quadros.length + "px";}</script><body onload="altera();">		<div id="conteudo">		<div class="quadro">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Programa de Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		<div class="quadro">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Programa de Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		<div class="quadro">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Programa de Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		<div class="quadro">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Programa de Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		<div class="quadro">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Programa de Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		<div class="quadro" style="background-color:cyan;">			<div class="quadro_topo"></div>			<div class="quadro_titulo">Afiliados</div>			<div class="quadro_conteudo">				<a href="afiliados.php" title="Sistema para afiliados">				Webmaster - Ganhe dinheiro oferecendo os serviços z800 a seus clientes.<br />				Oportunidades de ganhos reais. <br /><span class="u">Saiba mais...</span>				</a>			</div>		</div>		</div> <!-- ******************** fim conteudo ************************ --/></body>

[iDexter 0]

Consegui fazer algo parecido utilizando uma Div como area para disposição dos, se posso assim dizer, subDivs,

utilizando seguinte CSS.

.bar{	position: relative;	margin: 0px;	padding: 0px;	height: 17px;	background-color: #9DBCF4;	vertical-align: middle;	float: left;	background-position: left center;	width: 100%;}.divimg{	position:relative;	float: left;	border: 1px outset #000000;	margin: 0px;	padding: 0px;	height: 17px;	width: 40px;}.divtext {	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	color: #000000;	margin: 0px;	padding: 0px;	float: left;	height: auto;	width: auto;}

Utilizando com utilização de JS para criar os elementos na página ficaram ótimo.