Ir para conteúdo

POWERED BY:

Arquivado

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

cassiano óliver

Meu 1º site em tableless...

Por , em Desenvolvimento frontend

Recommended Posts

cassiano óliver    1

cassiano óliver
Postado

o 1º problema é em relação aos navegadores, está diferente no FF e no IE...

 

o 2º é que não consigo ajeitar a DIV do rodapé, nao fica embaixo das 2 DIV (esquerda e direita)

acompanhem nas imagens...

 

IE

INTERNET EXPLORER

 

FF

FIREFOX

 

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Documento sem título</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link href="css.css" rel="stylesheet" type="text/css"></head><body><!-- DIV PRINCIPAL --><div id="site"><!-- DIV TOPO --><div id="topo"><img src="imagens/topo.jpg" id="ImgTopo"/><img src="imagens/menu.jpg" id="ImgMenu"></div>	<!-- DIV ESQUERDA -->	<div id="DivEsq">		<h2>Quanto custa?</h2>		Faça aqui um orçamento sem compromisso e saiba por quanto fica o investimento para sua empresa ou site pessoal.		<h2>Ferramentas</h2>		Abaixo a relação das ferramentas que utilizo para desenvolver meus projetos:<br>		<ul>			<li>Adobe Dreamweaver CS3</li>			<li>Adobe Fireworks CS3</li>			<li>Adobe Flash CS3</li>			<li>Adobe Photoshop CS3</li>			<li>PHP / MySql</li>			<li>CSS</li>			<li>XML</li>		</ul>	</div>		<!-- DIV DIREITA -->	<div id="DivDir">		<h2>Tenha o seu você também!</h2> 		   <p><img src="imagens/templates.jpg" id="ImgCapa"/><blockquote>Agora ficou muito fácil ter</blockquote>seu 				   site na internet, com uma interface amigável, aqui lhe proporcionamos grande comodidade no desenvolvimento do		   seu website, de maneira rápida e prática, sem se preocupar com questões técnicas.		   <blockquote>Expanda as barreiras de negócio</blockquote> da sua empresa, torne a experiência on-line dos		   seus clientes única, e ainda promova a sua marca.		   Com criatividade e sempre buscando oferecer a melhor solução para os clientes, estou atento para todas as		   fases do processo de criação de websites, apresentando projetos de desenvolvimento e planejamento de		   comunicação digital específicos para cada caso.		   Tenho a preocupação em esclarecer a meus clientes quanto à viabilidade, retorno sobre o investimento e		   desafios que os projetos trazem.		   </p>	</div>		<!-- DIV RODAPE -->	<div id="rodape">teste teste teste teste teste teste teste teste teste teste teste teste teste teste </div></div></body></html>

 

CSS

/* CSS Document */* {	margin: 0;	padding: 0;}body {	background-attachment: scroll;	background-image: url(imagens/bg.jpg);	background-repeat: repeat-x;	background-position: left top;	font-family: "Trebuchet MS", Arial, Tahoma;	font-size: 11px;	color: #444444;	font-weight: normal;}h2 {	font-size: 170%;	color: #075986;	margin-top: 5px;	margin-bottom: 5px;}ul {	list-style-image: url(imagens/marcador.gif);	margin-top: 10px;	margin-left: 15px;}ul li {	font-family: "Trebuchet MS", Arial, Tahoma;	font-size: 11px;	color: #003366;	font-weight: normal;	margin-top: 2px;}blockquote {	padding-left: 30px;}#site {	width: 500px;	height: 510px;	background-color: #FFFFFF;	position: absolute;	left: 50%;	margin-left: -250px;}#topo {	width: 496px;	margin-left: 2px;	margin-top: 2px;}#DivEsq {	width: 175px;	height: 326px;	margin-left: 3px;	float: left;}#DivDir {	background-image: url(imagens/bg_conteudo.gif);	width: 304px;	height: 326px;	margin-right: 3px;	padding-left: 15px;	float: right;	text-align: left;}#ImgTopo {	border: 0;	width: 496px;	heigth: 120px;}#ImgMenu {	border: 0;	margin-top: 2px;	width: 496px;	height: 37px;}#ImgCapa {	border: 0;	width: 104px;	height: 120px;	padding-left: 5px;	float: right;}#Qcusta {	width: 180px;	padding-left: 5px;	padding-right: 5px;}#ferramentas {	width: 180px;	padding-left: 5px;	padding-right: 5px;	padding-top: 10px;}#dir {	width: 308px;	float: right;}#ferramentas h2 {	font-size: 20px;	color: #003399;	margin-top: 5px;	margin-bottom: 8px;}#Qcusta h2 {	font-size: 20px;	color: #003399;	margin-top: 5px;	margin-bottom: 8px;}#ico1 {	border: 0;	width: 29px;	height: 30px;	margin-right: 5px;	vertical-align: middle;	}#ico2 {	border: 0;	width: 29px;	height: 30px;	margin-right: 5px;	vertical-align: middle;	}#rodape {	display: inline-table;	padding-top: 20px;	padding-left: 10px;	height: 40px;	float: left;

 

onde estou errando???

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Olá meu caro cassiano óliver. Bom, veja se resolve o problema... Substitua linha indicada:

#rodape {	[s]display: inline-table;[/s] http://forum.imasters.com.br/public/style_emoticons/<#EMO_DIR#>/seta.gif clear: both;	padding-top: 20px;	padding-left: 10px;	height: 40px;	float: left;}
Acredito também que você deverá especificar uma largura (width) à sua div rodape para que funcione corretamente... Qualquer coisa, volte a postar!

 

Obs.: Só não consegui ajudar "por completo" porque eu não entendi direito como deverá ficar essa sua div rodape... Ela ocupará toda a extensão do layout ou vai ter uma largura mais ou menos como mostrado na imagem do IE?

Compartilhar este post

Link para o post
Compartilhar em outros sites

cassiano óliver    1

cassiano óliver
Postado

exatamente, ocupando toda a largura do layout...a sua modificação funcionou perfeitamente...só nao consegui resolver ainda os problemas com espaços, no IE ta certinho...mas no FF, já nao digo o msm hahaha

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

exatamente, ocupando toda a largura do layout...a sua modificação funcionou perfeitamente...só nao consegui resolver ainda os problemas com espaços, no IE ta certinho...mas no FF, já nao digo o msm hahaha

Opa! Primeira parte resolvida! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif Mas não tem como disponibilizar um link? Pois dessa forma poderia acessar no IE e no FF pra ver o que acontece e tals... Mas me indique exatamente o local do erro (ou os locais)...Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

cassiano óliver    1

cassiano óliver
Postado

aki...

não tenho ainda pra poder olhar diretamente no browser, mas está aí nas imagens...

IE 6 e IE 7, ta certinho...

FF 2 é que não ta legal os espaçamentos..

 

IE

INTERNET EXPLORER

 

FF

FIREFOX

 

aparentemente são 3 probleminhas...

 

1º - A lista na parte esquerda

2º - O fundo da parte direita

3º - O rodapé

 

vo ver se consigo publicar hj...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Bom, pelo menos o menu já posso adiantar o que está acontecendo... No seu CSS, você tem a seguinte declaração:

{	margin: 0;	padding: 0;}
Para contornar isso, talvez seja necessário removê-la e, após isso, não esquecer de declarar estas duas propriedades onde realmente tiver necessidade de eliminar os espaços...

 

Ok? E fico no aguardo então de um link pra visualizar melhor os problemas e tentar encontrar uma solução para os outros itens citados... Abraço!

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