Ir para conteúdo

POWERED BY:

Arquivado

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

Siquinelli

Problemas com estrura de divs para esse layout...

Por , em Desenvolvimento frontend

Recommended Posts

Siquinelli    0

Siquinelli
Postado

Recentemente eu peguei um site para desenvolver apenas o código, mas sou iniciante em tableless e to apanhando um bucado para um site aparentemente simples. segue abaixo layout original qual tenho que seguir o mais fielmente possível:

 

layout original

Imagem Postada

 

Aqui o link de como esta ficando:

http://www.sitedogustavo.com.br/sites/juliano/

 

Aqui o link para quem quiser baixar direto o conteudo que tenho pronto até agora:

http://www.sitedogustavo.com.br/sites/juli...ml_e_estilo.zip

 

A minha dúvida esta em como estruturar da melhor maneira as divs, lembrando que as próximas páginas terão praticamente a mesma estrutura.

 

Espero ter conseguido ser claro, qualquer dúvida estou as ordens. Enquanto isso vou estudando mais um pouco. Se for do interesse do fórum, assim que estiver tudo pronto e devidamente comentado posso colocar o site para download para quem como eu esta começando estudar tableless.

 

 

um abraço e bom final de semana.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kikitten    0

Kikitten
Postado

Eu fiz assim, e também fiz algumas modificações pq você tava usando imagens nas divs.

 

Mas ainda to começando também.

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>WarfieldTurf - escrever mais conteúdo sobre o assunto abordado nessa página</title><style type="text/css">body { 	margin:0px; 	background-image:url(http://www.sitedogustavo.com.br/sites/juliano/images/Background.jpg);	background-attachment:fixed;	 }#center {	margin:0 auto;	margin-top:20px;	width:530px;	padding:0px;	}	#top {	padding:15px 20px 0px 200px;	background: no-repeat url(http://www.sitedogustavo.com.br/sites/juliano/images/TopOrange.gif) bottom right;		}	#banner{ background: url(http://www.sitedogustavo.com.br/sites/juliano/images/Banner.jpg);	height:230px;	width:530px; 	}	#conteudo_about {	height:150px;	padding:5px 30px 10px 80px;	margin-top:0px;	background:#FFF url(http://www.sitedogustavo.com.br/sites/juliano/images/abaut_esquerda.jpg) no-repeat 15px 5px;	}#img {background:#FFF;	  height:160px;	  padding-left:80px;}p {	font-family:Arial, Helvetica, sans-serif;	font-size:10px;	font-weight:400;	}h1{	font-family:Geneva, Arial, Helvetica, sans-serif; 	font-size:14px;	color:#996600;	}		/* um exemplo de como utilizar imagens com css  */		a.prosseguir {		background: white url(seta.gif) top left no-repeat;		}#box_azul {background:url(http://www.sitedogustavo.com.br/sites/juliano/images/BoxAzul.gif) no-repeat;		   width:240px;		   height:108px;		   float:left;}	#note_pad {background:url(http://www.sitedogustavo.com.br/sites/juliano/images/NotePad.jpg);		   width:174px;		   height:160px;		   float:right;}</style></head><body><div id="center"><!-- center é a div que conterá as demais divs desta página -->		<div id="top"><!-- top é a do texto laranja no topo das páginas -->		</div><!-- fim de banner -->	<div id="banner"><!-- banner é a div banner de cada página -->		</div><!-- fim de banner -->	  <div id="conteudo_about"> 	<p>Established for over 30 years, Warfield turf is a family run business that prides itself on providing a quality produtc and 		service with a friendly to all our customers.</p>		<p>All our turf grown with turf fields in Warfield (near Braknell) and Wargrave, alongside the river thames. We also supply locally screened topsoil.</p>		<p>We Haverst all year round (weather permitted) and aim for the highest standards from preparation, seeding regular mowing, rolling, feeding and havesting in order to suit your requirements, using all the modern day machinery.</p>		   	</div><!-- fim de conteudo about -->					<div id="img">				  <div id="box_azul"></div>								<div id="note_pad"></div></div>				</div><!-- fim de center --></body></html>

Mas parece que o problema mesmo é pq essa div conteudo tem padding do lado esquerdo e direito e a soma das larguras das imagens dava 414... seu conteudo tinha 530-100-50=380... as imagens não iam caber... mas o note pad tb não ia ficar no canto como voce queria... ele ia obedescer ao padding.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Siquinelli    0

Siquinelli
Postado

kikitten, valeu pela ajuda. Fiz mais uma alteração, buscando colocar as #not_pad e #box_azul dentro da #conteudo_about, para quem quando o conteúdo aumente, a #conteudo_about creça junto. Para resolver o problema do padding do lado esquerdo eu o retirei, e adicionei uma class com pading_rigth para obter o mesmo efeito. Mas o conteudo do #conteudo_about nao faz o div #conteudo_about crescer jutno. :/ vou colar o código que alterei.

 

estilo:

body {     display:table;    margin:0px;     background-image:url(images/Background.jpg);    background-attachment:fixed;}#center {   display:table;    margin:0 auto;    margin-top:20px;    width:530px;    padding:0px;}    #top {    padding:15px 20px 0px 200px;    background: no-repeat url(images/TopOrange.gif) bottom right;}    #banner {     background: url(http://www.sitedogustavo.com.br/sites/juliano/images/Banner.jpg);    height:230px;    width:530px;}    #conteudo_about {	    height:190px;    padding:5px 0px 10px 80px;    margin-top:0px;    background:#FFF url(images/abaut_esquerda.jpg) no-repeat 10px 5px;}		#img {    background:#FFF;    height:160px;    padding-left:80px;}#box_azul {	background:url(images/BoxAzul.gif) no-repeat  0px 30px;	width:240px;	height:158px;	float:left;}    #note_pad {	background:url(images/NotePad.jpg);	width:174px;	height:160px;	float:right;}p {    display:table;    font-family:Arial, Helvetica, sans-serif;    font-size:10px;    font-weight:400;}	h1{    font-family:Geneva, Arial, Helvetica, sans-serif;     font-size:14px;    color:#996600;}	.padding_right {padding-right:50px;}
xhtml:
<body><div id="center"><!-- center é a div que conterá as demais divs desta página -->        <div id="top"><!-- top é a do texto laranja no topo das páginas -->        </div><!-- fim de banner -->    <div id="banner"><!-- banner é a div banner de cada página -->        </div><!-- fim de banner -->      <div id="conteudo_about">     <p class="padding_right">Established for over 30 years, Warfield turf is a family run business that prides itself on providing a quality produtc and         service with a friendly to all our customers.</p>        <p class="padding_right">All our turf grown with turf fields in Warfield (near Braknell) and Wargrave, alongside the river thames. We also supply locally screened topsoil.</p>        <p class="padding_right">We Haverst all year round (weather permitted) and aim for the highest standards from preparation, seeding regular mowing, rolling, feeding and havesting in order to suit your requirements, using all the modern day machinery.</p>                     <div id="box_azul"></div>                                <div id="note_pad"></div>               </div><!-- fim de conteudo about -->                    </div><!-- fim de center --></body>
Valeu mesmo kikitten!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kikitten    0

Kikitten
Postado

Bom eu fiz agora de duas formas... você escolhe qual prefere

 

<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body {	display:table;	margin: 0 auto;	background-image:url(http://www.sitedogustavo.com.br/sites/juliano/images/Background.jpg);	margin-bottom: 20px;}#center {margin: 0 auto;margin-top:20px;width:530px;padding:0px;}#top {padding:15px 20px 0px 200px;background: no-repeat url(http://www.sitedogustavo.com.br/sites/juliano/images/TopOrange.gif) bottom right;}#banner {background: url(http://www.sitedogustavo.com.br/sites/juliano/images/Banner.jpg);height:230px;width:530px;}#conteudo_about'>http://www.sitedogustavo.com.br/sites/juliano/images/Banner.jpg);height:230px;width:530px;}#conteudo_about {height:300px;padding:5px 0px 11px 80px;margin-top:0px;background:url(http://www.sitedogustavo.com.br/sites/juliano/images/abaut_esquerda.jpg) left no-repeat;background-color:#FFFFFF;}#img {background:#FFF;height:160px;padding-left:80px;}#box_azul {background:url(http://www.sitedogustavo.com.br/sites/juliano/images/BoxAzul.gif) no-repeat;background-color:#FFFFFF;width:240px;height:108px;float:left;}#note_pad {background:url(http://www.sitedogustavo.com.br/sites/juliano/images/NotePad.jpg);width:174px;height:160px;float:right;}#footer {height:20px; 		 text-align:center; 		 background-color:#FFFFFF;		 font-family:Arial, Helvetica, sans-serif;		 font-size:12px;		 clear:both;}p {display:table;font-family:Arial, Helvetica, sans-serif;font-size:10px;font-weight:400;}h1{font-family:Geneva, Arial, Helvetica, sans-serif;font-size:14px;color:#996600;}.padding_right {padding-right:50px;}</style></head><body><div id="center"><!-- center é a div que conterá as demais divs desta página --><div id="top"><!-- top é a do texto laranja no topo das páginas --></div><!-- fim de banner --><div id="banner"><!-- banner é a div banner de cada página --></div><!-- fim de banner --><div id="conteudo_about"><p class="padding_right">Established for over 30 years, Warfield turf is a family run business that prides itself on providing a quality produtc and service with a friendly to all our customers.</p><p class="padding_right">All our turf grown with turf fields in Warfield (near Braknell) and Wargrave, alongside the river thames. We also supply locally screened topsoil.</p><p class="padding_right">We Haverst all year round (weather permitted) and aim for the highest standards from preparation, seeding regular mowing, rolling, feeding and havesting in order to suit your requirements, using all the modern day machinery.</p><div id="box_azul"></div><div id="note_pad"></div></div><!-- fim de conteudo about --><div id="footer">About Us | Products | Laying Turf | Gallery | Place Order & Contact Us | Links</div></div><!-- fim de center --></body></html>

Outro jeito bem diferente

 

<!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=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#geral {width:530px;		margin: 0 auto;		background-color:#FFFFFF;}#topo {background: url(http://www.sitedogustavo.com.br/sites/juliano/images/TopOrange.gif) bottom right no-repeat;	   height:20px;	   width:530px;	   margin: 0 auto;}#banner {clear:both;		 background: url(http://www.sitedogustavo.com.br/sites/juliano/images/Banner.jpg) no-repeat;		 height:230px;}#about {float:left; 		width:75px;		height:200px;		background: url(http://www.sitedogustavo.com.br/sites/juliano/images/abaut_esquerda.jpg) no-repeat center;		background-color:#FFFFFF;		padding-top:20px;}#conteudo {float:right; 		   width:455px;		   background-color:#FFFFFF;}#footer{clear:both; 		text-align:center;		font-family:Arial, Helvetica, sans-serif;		font-size:12px;		height:20px;		padding: 8px 0px 8px 0px;}body {	background-image: url(http://www.sitedogustavo.com.br/sites/juliano/images/Background.jpg);	margin-top: 20px;	margin-bottom: 20px;}.padding_right {padding-right:50px;}p {display:table;font-family:Arial, Helvetica, sans-serif;font-size:10px;font-weight:400;}#main {background-color:#FFFFFF;}img {vertical-align:top;}</style></head><body><div id="topo"></div><div id="geral">      <div id="banner"></div>    <div id="main">	<div id="about"></div>	<div id="conteudo">	  <p class="padding_right">Established for over 30 years, Warfield turf is a family run business that prides itself on providing a quality produtc and service with a friendly to all our customers.</p>  <p class="padding_right">All our turf grown with turf fields in Warfield (near Braknell) and Wargrave, alongside the river thames. We also supply locally screened topsoil.</p>  <p class="padding_right">We Haverst all year round (weather permitted) and aim for the highest standards from preparation, seeding regular mowing, rolling, feeding and havesting in order to suit your requirements, using all the modern day machinery.</p>  <div id="img"><img style="margin-right:41px;" src="http://www.sitedogustavo.com.br/sites/juliano/images/BoxAzul.gif" width="240" height="108" /><img src="http://www.sitedogustavo.com.br/sites/juliano/images/NotePad.jpg" width="174" height="160" /></div>	</div>  </div>  <div id="footer">About Us | Products | Laying Turf | Gallery | Place Order & Contact Us | Links</div></div></body></html>

:P

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