Fórum Preciso de ajuda com um problema no meu codigo. #553120

04/05/2016

0

Front-end

Após fazer algumas varias aulas de html, css e um pouco de js, fui criar um site para testar oque eu tinha aprendido.

Acontece que criando um site One Page, com a intenção de criar varias faixas (paralax), chegou um ponto que adicionei uma section e quando coloquei o valor de heigth na ultima section, começou a abrir espaços em branco na parte de cima da pagina e entre algumas section's.

Agradeceria muito se alguém pudesse me ajudar, pois ninguém nasce sabendo né, e se não perguntamos, é pior ainda.

Aqui esta o link dos arquivos, são super leves !!!

https://mega.nz/#!O4hkSBoa!wkSz_GcnHJ0RqR9DYQRgmwluThbkjQDQzkSTCp2MNds
Dalton Fuentes

Dalton Fuentes

Responder

Post mais votado

05/05/2016

$("#banner").css({"height":$(window).height() + "px"});


tenta modificar para

$("#banner").css({"height":'500px'});
ou pra alguma altura que atenda...

a foto que eu falei foi a do teclado que tem no site pois meu site nao puxa isso e fica tudo em branco e nao da pra diferenciar :)

espero ter ajudado :)

Marlon Gera

Marlon Gera
Responder

Gostei + 1

Mais Posts

04/05/2016

William

Dalton por gentileza não duplique tópicos, você colocou nesse post a mesma dúvida https://www.devmedia.com.br/forum/sou-iniciante-preciso-tirar-uma-duvida/553118.

Estou cancelando o post do link!
Responder

Gostei + 0

04/05/2016

Marlon Gera

Poderia postar somente o código ao invés de colocar para download?
Seria mais pratico para todos...
Responder

Gostei + 0

04/05/2016

Dalton Fuentes 

<!doctype html lang="pt-br">
<html>
<head>
    <meta charset="utf-8">
    <title>Volcano | Marketing Digital</title>
  
	<link rel="stylesheet" href="_css/index.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
	<script src="_js/script.js"></script>
</head>

<body>

	<section id="bannercima">
        <section id="cabecalho">    
            <header>
                <nav>
                    <ul class="snip1135">
                        <li class="current"><a href="#" data-hover="Agência">Agência</a></li>
                        <li><a href="#" data-hover="Serviços">Serviços</a></li>
                        <li><a href="#" data-hover="Portfólio">Portfólio</a></li>
                        <li><a href="#" data-hover="Clientes">Clientes</a></li>
                        <li><a href="#" data-hover="Contato">Contato</a></li>
                    </ul>
                </nav>                
                    <img id="logo" src="_imagens/logo-volcano-menu-branco.png">
            </header>        
        </section>    
            <section id="banner">            
            </section>        
	</section>
    
    <section id="corpo">     
        <section id="agencia">
                    <p align="center" class="testep">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam tempus nulla a rutrum auctor.<br> Nulla luctus fermentum tincidunt.<br> Curabitur consectetur vel orci sit amet lacinia.<br> Morbi sit amet euismod augue, sit amet vestibulum nibh.<br> Vestibulum eros ante, scelerisque placerat molestie eu, tempus vel nisi.<br> Pellentesque eleifend erat tellus, et congue eros tincidunt non.<br> Cras semper sodales erat, quis suscipit elit ornare faucibus.<br> In volutpat orci in tortor dignissim ornare. Sed imperdiet interdum maximus.<br> Ut id ipsum id enim gravida aliquet ultrices nec turpis.<br> Donec semper auctor purus vel sagittis.<br> Curabitur quis ligula congue, suscipit lectus in, venenatis massa.</p>
        </section>
                
        <section id="serviços">
                    <p align="center" class="testep">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nullam tempus nulla a rutrum auctor.<br> Nulla luctus fermentum tincidunt.<br> Curabitur consectetur vel orci sit amet lacinia.<br> Morbi sit amet euismod augue, sit amet vestibulum nibh.<br> Vestibulum eros ante, scelerisque placerat molestie eu, tempus vel nisi.<br> Pellentesque eleifend erat tellus, et congue eros tincidunt non.<br> Cras semper sodales erat, quis suscipit elit ornare faucibus.<br> In volutpat orci in tortor dignissim ornare. Sed imperdiet interdum maximus.<br> Ut id ipsum id enim gravida aliquet ultrices nec turpis.<br> Donec semper auctor purus vel sagittis.<br> Curabitur quis ligula congue, suscipit lectus in, venenatis massa.</p>
        </section>
                
        <section id="port">
        </section>       
	</section>            
    
    

</body>
</html>


*{
	margin: 0;
	padding: 0;
	font-family: helvetica;
}

section#bannercima {
	width: 100%;
	position: relative;
	}
	
section#banner{
	width: 100%;
	background-image: url(../_imagens/bg2.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
	}

header{
	position: absolute;
	width: 100%;
	height: 85px;
	background-color: transparent;
	-webkit-transition: background-color .5s;
	}

nav{
	display: table;
	float: right;
	margin: auto;
	margin-top: 70px;
	margin-right: 120px;
	height: 40px;
	-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

/* MENU .NIP1135 */

.snip1135 {
  font-family: 'Raleway', Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 13.5px;
}
.snip1135 * {
  box-sizing: border-box;
}
.snip1135 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.2em;
  padding: 0;
}
.snip1135 a {
  padding: 0.5em 0;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  letter-spacing: 1px;
  text-decoration: none;
}

.snip1135 a:before,.snip1135 a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}
.snip1135 a:before {
  bottom: 0;
  display: block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: #e54d26;
}
.snip1135 a:after {
  left: 0;
  top: 0;
  padding: 0.5em 0;
  position: absolute;
  content: attr(data-hover);
  color: #ffffff;
  white-space: nowrap;
  max-width: 0%;
  overflow: hidden;
}
.snip1135 a:hover:before,.snip1135 .current a:before {
  opacity: 1;
  width: 100%;
}
.snip1135 a:hover:after,.snip1135 .current a:after {
  max-width: 100%;
}

/* LOGO VOLCANO */

img#logo{
	float:left;
	display: block;
	margin-left: 90px;
	margin-top: 50px;
	-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

/* SECTION CORPO */
/* SECTION CORPO */
/* SECTION CORPO */
/* SECTION CORPO */
/* SECTION CORPO */

section#corpo {
	width: 100%;
	position: relative;
	}

#agencia {
	width: 100%;
	height: 500px;
	background-color: #00FF1D;
	}

.testep {
	float: left;
	margin-top: 125px;
	width: 100%;
	}
	
#serviços {
	width: 100%;
	background-color: #00FFF3;
	height: 500px;
	}
	
#port {
	width: 100%;
	background-color: #909090;
	height: 500px;
	}


$(document).ready(function(){
	"use strict";

	$("#banner").css({"height":$(window).height() + "px"});

	var flag = false;
	var scroll;

	$(window).scroll(function(){
		scroll = $(window).scrollTop();

		if(scroll > 300){
			if(!flag){
				$("#logo").css({"margin-top": "15px"});
				
				$("nav").css({"margin-top": "35px"});

				$("header").css({"background-color": "#606060", "position": "fixed"});
				flag = true;
			}
		}else{
			if(flag){
				$("#logo").css({"margin-top": "50px"});
				
				$("nav").css({"margin-top": "70px"});

				$("header").css({"background-color": "transparent", "position": "absolute"});
				flag = false;
			}
		}


	});

});
Responder

Gostei + 0

04/05/2016

Marlon Gera

eai mano... blz?

tenta modificar isto aqui para ver se seria estes espaços que você quer retirar?

#agencia {
    width: 100%;
    height: 230px;
    background-color: #00FF1D;
    }
 
.testep {
    float: left;
    margin-top: 10px;
    width: 100%;
    }
     
#serviços {
    width: 100%;
    background-color: #00FFF3;
    height: 230px;
    }
     
#port {
    width: 100%;
    background-color: #909090;
    height: 230px;
    }
Responder

Gostei + 0

05/05/2016

Dalton Fuentes

Marlon, modifiquei mas não adiantou, aqui estão as imagens dq acontece, isso acontece depois que o heigth do #port passa de 10px;
É como se tivesse um limite, e a partir desse limite começa a dar esse espaço.

Erro 1

erro 2
Responder

Gostei + 0

05/05/2016

Marlon Gera

ei mano... a imagem não aparece pra mim por isto não sabia qual o espaço era... pode enviar a imagem para poder acertar aqui para você?
Responder

Gostei + 0

05/05/2016

Dalton Fuentes

Estou tentando enviar a foto mas diz "nao foi possivel fazer o envio da imagem".

Por isso mandei pelo link:

https://uploaddeimagens.com.br/imagens/erro_site-jpg--2


https://uploaddeimagens.com.br/imagens/erro_2_site-jpg
Responder

Gostei + 0

06/05/2016

Dalton Fuentes

Marlon, funcionou perfeitamente !

Corrigiu todos os problemas relacionado aos espaços em branco. Usava $("#banner").css({"height":$(window).height() + "px"}); para que o banner ficasse sempre com o height total da tela, mas achei uma outra forma.

Dai to usando:

#banner {
min-height : 100%;
min-width : 100%;
max-height : 100%;
max-width : 100%;
}

e apaguei o Js desse banner. Problemas solucionados, muito obrigado Marlon !!
Responder

Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar