Nesta aula foi ensinado a criar uma animação para exibir os mais vendidos e as novidades só que quando clicamos em novidades o titulo fica fora da página, some...
Solucionado
Nesta aula foi ensinado a criar uma animação para exibir os mais vendidos e as novidades só que quando clicamos em novidades o titulo fica fora da página, some...
Olá, Cristiano! Tudo bem?
Você poderia colocar aqui seus códigos para podermos dar uma olhada? =)
Caso você ainda não saiba, pode usar a opção "Inserir código" para colocar trechos de código para melhor visualização. =)
Fábio
Posso sim mas é o mesmo código é igual ao do instrutor...
<!DOCTYPE html>
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
<div class="col-xs-12 col-md-4 thumbnail text-center wow fadeInUp data-wow-delay="1s">
Camisa azul importada por um preço acessível e com pano de qualidade
Avenida Paulista, 1 (43) 3055-4741
Cristiano,
Qual exercício de qual aula exatamente é essa parte?
Use o botão "Inserir código" para colocar seu HTML pois sem ele o browser interpreta a tag.
Abcs
<!DOCTYPE html>
<html>
<head>
<title>Loja Virtual</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css" />
<meta name="viewport" content="width=device-width">
<style>
.navbar-header button {
color: #fff;
}
.fullscreen {
width: 100%;
}
main {
padding-top: 50px;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 20px 0px;
}
.tab-pane {
padding: 10px 10px;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<a href="#home" class="navbar-brand">Caelum</a>
<button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#novidades">Novidades</a></li>
<li><a href="#maisvendidos">Mais Vendidos</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Camisetas<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Masculino</a></li>
<li><a href="#">Feminino</a></li>
<li><a href="#">Infantil</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Digite o que você procura">
</div>
<input type="submit" class="btn btn-default" value="Buscar">
</form>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="img/produto.png" alt="" title="" class="img-responsive img-thumbnail">
</div>
<div class="col-sm-8">
<div class="text-center">
<h1>Camiseta azul importada</h1>
<h3>R$ 190,00</h3>
<a href="#" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-shopping-cart"></span> Comprar</a>
</div>
<div class="row">
<ul class="nav nav-tabs">
<li class="nav">
<a href="#descricao" data-toggle="tab">Descrição</a>
</li>
<li class="nav">
<a href="#informacoes" data-toggle="tab">Informações Técnicas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="descricao">
<p>
Camiseta azul feita em algodão com caimento perfeito proporcionando leveza e conforto nos movimentos.
</p>
<p>
Camiseta meia manga, decote arredondado importado.
</p>
</div>
<div class="tab-pane fade" id="informacoes">
<table class="table table-responsive">
<tbody>
<tr>
<td>Tecido</td>
<td>Algodão</td>
</tr>
<tr>
<td>Tamanhos</td>
<td>P, M, G, GG</td>
</tr>
<tr>
<td>Fabricante</td>
<td>Caelum</td>
</tr>
<tr>
<td>País de Origem</td>
<td>China</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
Avenida Paulista, 1<br>
(43) 3055-4741
</footer>
<script src="js/jquery-2.2.4.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>Cristiano,
Tente trocar a classe navbar-fixed-top para navbar-static-top.
E na regra do main trocar o padding por um margin, com o valor de uns -20px.
Espero ter ajudado,
Abcs!
Ola... infelizmente não ajudou porque o menu que deveria ficar fixo some... e isso não é uma solução concorda... a questão é o posicionamento do titulo NOVIDADES que fica embaixo do menu...
E outra... com essa alteração que você indicou o banner fica com o topo cortado...
Cristiano,
Você tem razão, o static não deixa o menu fixo na parte superior. Estava testando seu código e provavelmente coloquei além disso mais alguma outra regra CSS.
Coloque um padding-top de 90px e um margin-top de -70px no H3 de Novidades. Para não deixar o código poluído demais, recomendo criar uma classe para isso e colocá-la no H3 em questão.
Espero ter ajudado,
Abcs!