Alguem sabe pq o background some quando eu jogo o float left no meu conteudo ?
OBS: dessa maneira o background n some, mas tambem não consigo da float left no meu conteudo. alguem sabe pq ?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>LX Designer</title>
<link rel="stylesheet" href="estiloweb.css">
</head>
<body>
<div id="geral">
<header id="cabecalho">
<img src="topo.jpg">
<p><img src="logo.png"></p>
<menu id="principal">
<ul>
<li><a href="#">Criação de Logotipo</a></li>
<li><a href="#">Criação de Site</a></li>
<li><a href="#">Identidade Visual</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</menu>
<p class="banner1"><img src="baner.jpg"></p>
</header>
<section id="conteudo">
<article id="artigo1">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo2">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
</section>
</div>
</body>
</html>
------------------------css------------------------------------------
*{
margin:0px;
padding: 0px;
list-style: none;
}
body{
background: #012231;
}
#geral{
background: url("fundo.jpg");
width: 1024px;
margin:0px auto;
margin-top: 20px;
-webkit-border-radius: 0 0 18px 18px;
-moz-border-radius: 0 0 18px 18px;
border-radius:0 0 18px 18px;
border: 15px solid white;
}
section#conteudo{
width: 340px;
}
menu#principal{
margin-left: 390px;
margin-top: -40px;
}
menu#principal ul li a{
display: block;
float: left;
color:#012231;
padding: 10px;
text-decoration: none;
font: bold 16px arial,sans-serif;
}
menu#principal ul li a:hover{
text-decoration: underline;
}
header#cabecalho p.banner1{
margin-top: 70px;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>LX Designer</title>
<link rel="stylesheet" href="estiloweb.css">
</head>
<body>
<div id="geral">
<header id="cabecalho">
<img src="topo.jpg">
<p><img src="logo.png"></p>
<menu id="principal">
<ul>
<li><a href="#">Criação de Logotipo</a></li>
<li><a href="#">Criação de Site</a></li>
<li><a href="#">Identidade Visual</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</menu>
<p class="banner1"><img src="baner.jpg"></p>
</header>
<section id="conteudo">
<article id="artigo1">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo2">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
</section>
</div>
</body>
</html>
------------------------css------------------------------------------
*{
margin:0px;
padding: 0px;
list-style: none;
}
body{
background: #012231;
}
#geral{
background: url("fundo.jpg");
width: 1024px;
margin:0px auto;
margin-top: 20px;
-webkit-border-radius: 0 0 18px 18px;
-moz-border-radius: 0 0 18px 18px;
border-radius:0 0 18px 18px;
border: 15px solid white;
}
section#conteudo{
width: 340px;
}
menu#principal{
margin-left: 390px;
margin-top: -40px;
}
menu#principal ul li a{
display: block;
float: left;
color:#012231;
padding: 10px;
text-decoration: none;
font: bold 16px arial,sans-serif;
}
menu#principal ul li a:hover{
text-decoration: underline;
}
header#cabecalho p.banner1{
margin-top: 70px;
}
Leonardo Xavier
Curtidas 0
Respostas
Marcelo Pastore
21/08/2014
Olá Leandro, me passa as imagens, quero tentar te ajudar
marcelopastorese@gmail.com
marcelopastorese@gmail.com
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Bom, eu testei aqui e colocar float:left no section#conteudo{ e o background não some
GOSTEI 0
Marcelo Pastore
21/08/2014
O seu aparece assim Ronaldo?
[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140821-134636.jpg[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140821-134636.jpg[/img]
GOSTEI 0
Leonardo Xavier
21/08/2014
Olá amigo , enviei p vc , e expliquei pelo email a dúvida e oqeu esta acontedendo, Obrigado !!!
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
O seu aparece assim Ronaldo?
[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140821-134636.jpg[/img]
[img]http://arquivo.devmedia.com.br/forum/imagem/323571-20140821-134636.jpg[/img]
Correto, o background é essa cor AZUL e isso não some com o float:left.
GOSTEI 0
Leonardo Xavier
21/08/2014
Ronaldo pra mim o background some ,oque acontecec parece que a borda sobi , e toda essa parte de conteudo fica pra fora ...
GOSTEI 0
Leonardo Xavier
21/08/2014
Não mais o blackground não e essa cor azul, essa cor azul ela fica fora do meu id="geral", ce coloquei uma imagem de fundo que seria uam tetura de papel amassado dentro do meu id geral q some.
GOSTEI 0
Leonardo Xavier
21/08/2014
Não mais o blackground não e essa cor azul, essa cor azul ela fica fora do meu id="geral", ce coloquei uma imagem de fundo que seria uam tetura de papel amassado dentro do meu id geral q some.
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Ah, você ta falando o background do #geral ?
#geral{
background: url("fundo.jpg");
width: 1024px;
margin:0px auto;
margin-top: 20px;
-webkit-border-radius: 0 0 18px 18px;
-moz-border-radius: 0 0 18px 18px;
border-radius:0 0 18px 18px;
border: 15px solid white;
}
GOSTEI 0
Leonardo Xavier
21/08/2014
Olha como some se vc repara tem uma textura amassada, essa textura era pra ficar , em todo o onteudo pra baixo, mais eu dano float left ela sobe e so fica la emcima.[img]http://arquivo.devmedia.com.br/forum/imagem/369903-20140821-140106.jpg[/img]
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Pode explicar porque você quer usar o float:left no #conteudo ? Não vi a necessidade.
GOSTEI 0
Leonardo Xavier
21/08/2014
Eu não coloquei floar :left no conteudo, eu coloquei no artigo , são 4 artigos, eu coloquei float left pra um ficar ao lado do outro certo ?
GOSTEI 0
Leonardo Xavier
21/08/2014
[img]http://arquivo.devmedia.com.br/forum/imagem/369903-20140821-140752.jpg[/img]
GOSTEI 0
Leonardo Xavier
21/08/2014
Ronaldo , e assim que eu quero que fique, deixa eu explicar p vc , quando eu coloco pro float do artigo venha pra esqueda essa textura some, fica la emcima e o text ofica no fundo azul . Entendeu ?
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Certo, e pelo que vi na sua imagem acima conseguiu. Correto ?
GOSTEI 0
Leonardo Xavier
21/08/2014
Não, rs . consegui mais de uma forma que eu não queria.
Oque eu fiz, eu coloquei uma seção pra cada artigo, então agora tenho 4 seções e 4 artigos.E no meu idGeral eu coloquei uma altura para o meu background, do q esse e problema eu não queria estabelecer uma alura para ele, eu queria que o background se repitisse , e eu pudesse adicionar o quanto de conteudo mais pra baixo eu quizesse, saco ?
Oque eu fiz, eu coloquei uma seção pra cada artigo, então agora tenho 4 seções e 4 artigos.E no meu idGeral eu coloquei uma altura para o meu background, do q esse e problema eu não queria estabelecer uma alura para ele, eu queria que o background se repitisse , e eu pudesse adicionar o quanto de conteudo mais pra baixo eu quizesse, saco ?
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Tente o seguinte:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>LX Designer</title>
<style>
*{
margin:0px;
padding: 0px;
list-style: none;
}
body{
background: #012231;
}
#geral{
background: url("fundo.jpg");
width: 1024px;
margin:0px auto;
margin-top: 20px;
-webkit-border-radius: 0 0 18px 18px;
-moz-border-radius: 0 0 18px 18px;
border-radius:0 0 18px 18px;
border: 15px solid white;
float:left;
}
section#conteudo{
width: 96%;
height:100%;
float:left;
border:1px solid red;
padding:20px;
}
.artigo{
width:300px;
float:left;
}
menu#principal{
margin-left: 390px;
margin-top: -40px;
}
menu#principal ul li a{
display: block;
float: left;
color:#012231;
padding: 10px;
text-decoration: none;
font: bold 16px arial,sans-serif;
}
menu#principal ul li a:hover{
text-decoration: underline;
}
header#cabecalho p.banner1{
margin-top: 70px;
}
</style>
</head>
<body>
<div id="geral">
<header id="cabecalho">
<img src="topo.jpg">
<p><img src="logo.png"></p>
<menu id="principal">
<ul>
<li><a href="#">Criação de Logotipo</a></li>
<li><a href="#">Criação de Site</a></li>
<li><a href="#">Identidade Visual</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</menu>
<p class="banner1"><img src="baner.jpg"></p>
</header>
<section id="conteudo">
<article id="artigo1" class="artigo">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo2" class="artigo">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4" class="artigo">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
<article id="artigo4" class="artigo">
<img src="ban.jpg">
<h2>Sobre</h2>
<p>Lois simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
</article>
</section>
</div>
</body>
</html>
GOSTEI 0
Marcelo Pastore
21/08/2014
Olá amigo , enviei p vc , e expliquei pelo email a dúvida e oqeu esta acontedendo, Obrigado !!!
Respondido!!! abraço.
GOSTEI 0
Leonardo Xavier
21/08/2014
[img:descricao=I não foi não, todo o id foi pra esquerda, nen centralizado ele fico, e o float n entro nos artigos]http://arquivo.devmedia.com.br/forum/imagem/369903-20140821-143013.jpg[/img]
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Bom, você deve posicionar agora a sua div #geral com o margin-left, e diminuir o width do artigo e aumentar o width do conteudo para que possam caber mais de 1 artigo em 1 linha;
GOSTEI 0
Leonardo Xavier
21/08/2014
[img:descricao=Ronaldo, antes ele n esta indo pq vc colocou classe no artigo mais era id, consegui alinha eles, so que agora ele n esta centralizado no mei oda pagina !!]http://arquivo.devmedia.com.br/forum/imagem/369903-20140821-143655.jpg[/img]
GOSTEI 0
Leonardo Xavier
21/08/2014
Caraca agora que confundiu, vc coloco float left no meu geral, ele foi pra esquerda , so que se eu tiro o float, ele volto pro meio , so que some a textura e n fica alinhado, sabe oque esta acontecendo Ronaldo ?
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Vou explicar com calma:
1 - Coloquei float:left na classe artigos, o que faz com que todos os artigos sejam "jogados" pra esquerda;
2 - Porém os artigos estão dentro do #conteudo, então este também precisa estar com float:left , e isso que fiz;
3 - Porém o #conteudo está dentro do #geral que também precisa estar com float:left;
Estando tudo com float;left você percebeu que ficou colado na tela, então você precisa arredar o #geral para a direita afim de centralizar o conteúdo.
Mas levando para outro assunto, se fosse você eu criava a estrutura aqui http://www.layoutit.com/ e só colocava seu design, assim seu site fica até responsivo. Pense nisso !
1 - Coloquei float:left na classe artigos, o que faz com que todos os artigos sejam "jogados" pra esquerda;
2 - Porém os artigos estão dentro do #conteudo, então este também precisa estar com float:left , e isso que fiz;
3 - Porém o #conteudo está dentro do #geral que também precisa estar com float:left;
Estando tudo com float;left você percebeu que ficou colado na tela, então você precisa arredar o #geral para a direita afim de centralizar o conteúdo.
Mas levando para outro assunto, se fosse você eu criava a estrutura aqui http://www.layoutit.com/ e só colocava seu design, assim seu site fica até responsivo. Pense nisso !
GOSTEI 0
Leonardo Xavier
21/08/2014
Ronaldo , ok , compreendo ??
Esse site q vc me envio e relacionado a que ? vc precisa se registrar ??
nunca tinha visto este, pode me explicar oque se trata ?
Sou nono na area de web, mas to aos pocuso conseguindo resolver, to pegando progamação agora!!so quee e muita coisa pra se saber
Esse site q vc me envio e relacionado a que ? vc precisa se registrar ??
nunca tinha visto este, pode me explicar oque se trata ?
Sou nono na area de web, mas to aos pocuso conseguindo resolver, to pegando progamação agora!!so quee e muita coisa pra se saber
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
Você tem que ir com calma, você primeiro tem que estudar CSS mais a fundo, pois esse seu problema é apenas falta de entendimento de como posicionar as DIV's na sua página. Enfim, se você não quiser perder tempo com isso, o layoutit constrói o layout pra você (apenas a estrutura) e pronto, você já vai ter o CSS e as div's geradas, apenas irá aplicar sua lógica.
GOSTEI 0
Leonardo Xavier
21/08/2014
a ta obrigado camarada , vlw mesmo vou estudar....
GOSTEI 0
Ronaldo Lanhellas
21/08/2014
a ta obrigado camarada , vlw mesmo vou estudar....
De nada ,boa sorte.
GOSTEI 0