Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera tudo na paz?
Olhando esse tutorial http://chocoladesign.com/ancora-html eu consigo chegar nesse resultado http://chocoladesign.com/wp-content/uploads/2012/07/ancora.html
Tenho duas duvidas com respeito a um site assim:
1ª Como colocar imagens no fundo do site ao invés de deixar apenas as cores?
2ª Como redimensionar para o site abrir em diversos tamanhos de resolução?
Desde já agradeço
:thumbsup:
Então seria uma div com uma imagem, redimensionada... Você gostaria de saber como se "Faz" isso?
Você precisará estudar um pouco sobre design responsivo e media queries.
é interessante você entender como funciona antes de ir tc código.
Estudando essas duas coisas ai você vai conseguir ter uma visão melhor sobre o assunto, boa sorte! :)
Então seria uma div com uma imagem, redimensionada... Você gostaria de saber como se "Faz" isso?
Gostaria de saber como coloco uma imagem ou mais imagens iguais as do exemplo que eu postei.
>
Você precisará estudar um pouco sobre design responsivo e media queries.
é interessante você entender como funciona antes de ir tc código.
Estudando essas duas coisas ai você vai conseguir ter uma visão melhor sobre o assunto, boa sorte! :)
O design responsivo é para dimensionar de acordo com a resolução da tela né?
E o media queries serve para que?
Achei um exemplo muito bom do que eu quero
Então... Para você fazer um Design Responsivo (Seu site se adaptar em todos os dispositivos), é necessario usar Media Queries. Mas como é uma imagem que quer trabalhar você pode trabalhar com porcentagem. Tente assim:
<style>
#fundo_div{
width:100%;
max-width:100%;
background: url('Caminho da URL');
}
</style>
<div id="fundo_div"></div>Tente assim...
Desculpe minha ignorancia, mas não consegui fazer funcionar.
Meu código esta assim:
<!DOCTYPE html>
<head>
<title>ANCORAGEM</title>
<style type="text/css">
body {
font-family: Verdana;
margin: 0;
padding: 0;
text-align: center;
color: #333;
background: #000;
min-width: 940px;
}
#menu{
font-family: Impact, "Arial Black", sans-serif;
color: #696969;
text-transform: uppercase;
font-size: 20px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #000000;
padding: 10px;
padding: .5rem;
margin: 0 0 0px 0;
}
#home {
height: 800px;
width: 100%;
background-color: #1E90FF;
}
#quemsou {
padding-top:0px;
height: 700px;
width: 100%;
background-color: #1C86EE;
}
#contato {
height:915px;
width:100%;
padding-top:0px;
background: #5F9EA0;
}
#creditos {
height:400px;
width:100%;
padding-top:0px;
background: #FFF;
text-color: #000;
}
a:link, a:visited {
color:#696969;
text-decoration: none;
}
a:hover {
color: #CD5C5C;
text-decoration: none;
}
#Titulo{
font-size: 100px;
text-align: center;
padding-top: 20px;
}
</style>
<script type="text/javascript" src="[http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js)"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 300);
return false;
});
}
}
});
});
// ]]></script>
</head>
<body>
<div id=menu>
<a href="#home" >Home</span></a>
<a href="#quemsou">Quem sou</span></a>
<a href="#contato">Contato</span></a>
<a href="#creditos">Créditos</span></a>
</div>
<div id="home">
<div id="Titulo">OI! =D</div>
SEJA MUITO BEM VINDO À PÁGINA TESTE. </br> FEITA PARA FINS DIDÁTICOS.</br></div>
<div id="quemsou">
<div id="Titulo">QUEM SOU</div>
OS SEUS TRABALHOS ENTRAM AQUI!</br>SERIA INTERESSANTE MOSTRÁ-LOS DE UMA FORMA ORGANIZADA.</br>
<a href="#home" >voltar ao topo</span></a>
</div>
<div id="contato">
<div id="Titulo">CONTATO</div>
ENTRE EM CONTATO.</br> QUE TAL UM FORMULÁRIO E OS LINKS PARA AS REDES SOCIAIS? </br>
<a href="#home" >voltar ao topo</span></a>
</div>
<div id="creditos">
<div id="Titulo">CRÉDITOS</div>
Tutorial por <a href="[http://twitter.com/althi](http://twitter.com/althi)">Thiago Almeida</a> no <a href="[http://chocoladesign.com](http://chocoladesign.com)">Choco la Design.</a></br>
jQuery: <a href="[http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js)">[http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js](http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js)</a></br>
<a href="#home" >voltar ao topo</span></a>
</div>
</body>
</html>Então... Como você deseja colocar o fundo? Até meia tela...?
OBS: Respondi a mensagem, vê la.
Posso ver como ficaria com uma imagem meia tela e uma imagem no fundo e só o conteudo se mover
Como faria?
Então... Um exemplo de uma imagem de meia tela, que se redimensiona. OBS: Usei com exemplo um fundo Cinza, mas pode ser uma imagem.
<style>
*{
padding:0;
margin:0;
}
#fundo_div{
width:100%;
max-width:100%;
height:50%;
background: #ccc;
}
</style>
<div id="fundo_div"></div>Seria isso que deseja?
>
Então... Um exemplo de uma imagem de meia tela, que se redimensiona. OBS: Usei com exemplo um fundo Cinza, mas pode ser uma imagem.
<style>
*{
padding:0;
margin:0;
}
#fundo_div{
width:100%;
max-width:100%;
height:50%;
background: #ccc;
}
</style>
<div id="fundo_div"></div>Seria isso que deseja?
Pra mim aparece a mesma coisa...
Em que lugar eu tenho que colocar essa parte do codigo?
seria isso?
>
Pra mim aparece a mesma coisa...
Em que lugar eu tenho que colocar essa parte do codigo?
Então, você tem que englobar no código. Esse exemplo que eu fiz, seria para você criar um arquivo HTML de teste, e ver se era o gostaria...
>
seria isso?
http://codepen.io/dam0/pen/zviHr
Mais ou menos isso mesmo...
Vendo na net achei outro exemplo..... https://www.helpling.com.br/
veja:
http://pt.stackoverflow.com/questions/27303/jquery-navbar-fixed-ap%C3%B3s-efetuar-scroll
A navbar ficará fixa de acordo com o scroll
Já tentou usar background-size:cover; na imagem ?
É só usar método COVER pra redimensionar as imagens.
background-size: cover;
Olá! Então, usando CSS, tente:
body{
Tente assim...