Background com duas imagens de fundo

Escolha Certa · Agosto 17, 2012

Olá amigos,

Sou novo por aqui e também sou novo no mundo da programação. Estou desenvolvendo um site em HTML/CSS e estou com um dúvida que esta tirando meu sono.

Criei esse layout: http://www.escolhac.com.br/cdr .

Agora estou diagramando ele, mas na motagem das imagens de fundo tive muitas dúvidas e não sei se fiz corretamente. Estou enviando o link do conteudo já programado.

http://www.escolhac.com.br/clube

Alguém pode me dizer se estou no caminho certo?

Willian Makoto · Agosto 17, 2012

Faala Escolha Certa;

Cara, eu dei uma olhada muito rápida no código fonte/CSS e você está bem sim!

Parabéns, e boa sorte!

Escolha Certa · Agosto 17, 2012

Olá boa tarde,

Alguém pode me dizer isso acontece?

http://www.escolhac.com.br/clube/

Não consigo fazer o conteundo ir para direita ou esquerda. Ele sempre vai para baixo.

Tenho que fazer o site ficar assim: Layout

Alguém me ajude por favor.

body{ font:normal 13px 'Droid Sans'; color:#615a5a; background:#000000; margin:0 auto; padding:0;}
#body{ background:url(../Imagens/filete_fundo_geral_meio.jpg) center top; width:100%;}
#topo{ background:#0F9; width:100%; height:215px; background-image:url(../Imagens/fundo_topo.jpg);}
#rodape{ background:url(../Imagens/filete_botton.jpg) center top; height:130px; margin-top:20px; padding-top:85px;}

#rede {
width:981px;
height:24px;
margin:auto;
}

#rede a {
float:right;
padding-right:11px;
margin-top:9px;
}

#geral {
background:url(../Imagens/filete_conteudo.jpg) center top repeat-y;
margin-left:-23px;
margin-top:-175px;
z-index:2;
}


#conteudo {
width:981px;
margin:auto;
padding-top:25px;

}

#topoconteudo {
width:981px;
height:93px;
margin-top:-5px;
}

#logo a  {
width:303px;
height:84px;
margin:0;
padding:0;
float:left;
}

#telefone {
width:260px;
height:17px;
float:right;
margin:0;
padding:0;
margin-top:-15px;
}

#telefone p {
font-family:Calibri;
font-size:19px;
color:#852a02;
font-weight:bold;
text-align:right;
}

#menu {
width:651px;
height:38px;
float:right;
background:url(../Imagens/barra_menu.jpg) no-repeat bottom right;
margin-top:53px;
margin-right:1px;
}

#menu ul {
margin:0;
padding:0;
float:right;
margin-right:10px;
}

#menu ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
}

#menu ul li a {
float:right;
display:block;
color:#0a0a0a;
font-size:17px;
text-decoration:none;
font-family:Calibri;
padding:8px 7px 10px 15px;
}

#menu ul li a:hover{
text-decoration:none;
color:#004a69;
}


#slides {width:980px; 
	 height:329px; 
	 margin:0 auto; 
	 overflow:hidden;
}

#conteudohome {	
width:981px;
height:100%;
margin:auto;
background-color:#FFF;
margin-top:11px;
}

#destaque{	
width:950px;
background:#0F3;
margin-right:50px;
padding-left:10px;
padding-top:24px;

}

#destaque img{	
padding-left:5px;

}

#box1 {
width:310px;
height:189;
background:url(../Imagens/box_fundo_o_clube_do_rastreador.png) no-repeat;
margin:0;
padding:0;
padding-left:-10px;
}

#box1 p {
width:271px;
height:151;
overflow:hidden;
padding-top:15px;
padding-left:18px;
text-align:justify;

}


#barra {
width:1px;
height:50px;
background:#666 left;

}

Diéssica · Agosto 17, 2012

Não consigo fazer o conteundo ir para direita ou esquerda. Ele sempre vai para baixo.

Pra criar colunas, você tem que decompôr as divs. Uma na esquerda e outra na direita. Quais são os nomes desses elementos?

É só aplicar

float:right;

float:left;

Com uma largura fixa (width ou pelo menos min-width). :thumbsup:

Escolha Certa · Agosto 18, 2012

Olá Diéssica,

Obrigado por perder um pouco de seu tempo comigo.

Gostaria de mostrar para você que quando eu aplico um

float:left

ou

float:right

, as colunas que eu criei tanto direita como esquerda saem do contendo do site. Não entendo por que isso acontece. Toda estrutura do site está assim. Se eu der o comando float em qualquer div o conteudo sai da div conteudo.

Confira os exemplos:

Sem float:

Com float:left na div colesquerda.

Abaixo segue o HTML:

<body>

<div id="body">
<div id="topo">
	<div id="rede">
		<a href="" target="_blank"><img src="Imagens/icone_twitter.png" alt="Facebook" border="0" align="right" /></a>
		<a href="" target="_blank"><img src="Imagens/icone_facebook.png" alt="Facebook" border="0" align="right" /></a>
	</div>




   </div>






<div id="geral">



<div id="conteudo">

       <div id="topoconteudo">
       		<div id="logo">
       			<a href="#"><img src="Imagens/logomarca.png" alt="Clube dos Rastreadores" border="0" /></a>
              	</div>
               <div id="telefone">
               	<p>+55 31 7811.4901 | 7818.8663</p>
               </div>

               <div id="menu">
               	<ul>
             			<li><a href="#">Home</a></li>
                       <li><a href="#">Quem Somos</a></li>
                       <li><a href="#">Produtos</a></li>
                       <li><a href="#">Diferenciais</a></li>
                       <li><a href="#">Cadastros</a></li>
                       <li><a href="#">Parceiros</a></li>
                       <li><a href="#">Contato</a></li>
                    </ul>
       </div>

   </div>

   <div id="banner">
<div id="slides">

<ul>
   	<li><img src="Imagens/banner_imag_01.jpg" /></li>
       <li><img src="Imagens/banner_imag_02.jpg"  /></li>
       <li><img src="Imagens/banner_imag_03.jpg"  /></li>
</ul>
</div>

</div>



</div>

<div id="conteudohome">
<div id="colesquerda">
<div id="box1">
   	<h1><img src="Imagens/titulo_o_clube_do_rastreador.png" border="0" /> </h1>
       <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
       <div id="botao">
       <a href="#"><img src="Imagens/bt_saiba_mais.png" border="0"/></a>
       </div>
       <div id="barra">
       Teste
       </div>
   </div>
</div>
<div id="coldireita"></div>
</div>


</div>

<div id="rodape">
   <h1> </h1>
   </div>
</div>
</div>
</div>
</body>

Abaixo segue o CSS:

body{ font:normal 13px 'Droid Sans'; color:#615a5a; background:#000000; margin:0 auto; padding:0;}
#body{ background:url(../Imagens/filete_fundo_geral_meio.jpg) center top; width:100%;}
#topo{ background:#0F9; width:100%; height:215px; background-image:url(../Imagens/fundo_topo.jpg);}
#rodape{ background:url(../Imagens/filete_botton.jpg) center top; height:130px; margin-top:20px; padding-top:85px;}

#rede {
width:981px;
height:24px;
margin:auto;
}

#rede a {
float:right;
padding-right:11px;
margin-top:9px;
}

#geral {
background:url(../Imagens/filete_conteudo.jpg) center top repeat-y;
margin-left:-23px;
margin-top:-175px;
z-index:2;
}


#conteudo {
width:981px;
margin:auto;
padding-top:25px;

}

#topoconteudo {
width:981px;
height:93px;
margin-top:-5px;
}

#logo a  {
width:303px;
height:84px;
margin:0;
padding:0;
float:left;
}

#telefone {
width:260px;
height:17px;
float:right;
margin:0;
padding:0;
margin-top:-15px;
}

#telefone p {
font-family:Calibri;
font-size:19px;
color:#852a02;
font-weight:bold;
text-align:right;
}

#menu {
width:651px;
height:38px;
float:right;
background:url(../Imagens/barra_menu.jpg) no-repeat bottom right;
margin-top:53px;
margin-right:1px;
}

#menu ul {
margin:0;
padding:0;
float:right;
margin-right:10px;
}

#menu ul li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
}

#menu ul li a {
float:right;
display:block;
color:#0a0a0a;
font-size:17px;
text-decoration:none;
font-family:Calibri;
padding:8px 7px 10px 15px;
}

#menu ul li a:hover{
text-decoration:none;
color:#004a69;
}


#slides {width:980px; 
	 height:329px; 
	 margin:0 auto; 
	 overflow:hidden;
}

#conteudohome {	
width:981px;
height:100%;
margin:auto;
background-color:#FFF;
margin-top:11px;
}


#colesquerda {
margin:0;
padding:0;
width:345px;
height:291px;
}

#box1 {
       width:310px;
       height:189;
       background:url(../Imagens/box_fundo_o_clube_do_rastreador.png) no-repeat;
       margin:0;
       padding:0;
       padding-left:-10px;

}

#barra {
width:1px;
height:90px;
   background:#666 left;

Entrar

Arquivado

Background com duas imagens de fundo

Recommended Posts

Escolha Certa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Willian Makoto 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Escolha Certa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Escolha Certa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sound Designer

Orientação - Jav + MySql

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante