Espaço vazio criando rolagem.

Bruno Eris · Julho 31, 2013

Pessoal, estou com um problema que não tô conseguindo resolver..

Eu ainda estou estudando html e css e tava treinando construindo um site pra minha tia da escola dela.

Problema é que, fica um espaço criando rolagem em branco, coloco todos os elementos e ao invés de terminar ali, fica como se tivesse outros elementos abaixo, sendo que não tem.

Tentarei colocar ele em uma hospedagem free pra vcs olharem se for o caso.

Bru_ce · Julho 31, 2013

Posta seu HTML e seu CSS.

Bruno Eris · Agosto 1, 2013

<!DOCTYPE HTML>

<head>

<!--[if lt IE 9]>

<![endif]-->

<title>Escola Pierre Vigne - A melhor escola para seu filho!</title>

<!-- demo.css contains additional styles used to set up this demo page - not required for the slider

<!-- bjqs.css contains the *essential* css needed for the slider to work

</head>

<body>

</header>

<menu>

<div class="botprincipal"><a href="#">Principal</a></div>

<div class="botnossa"><a href="#">Nossa Escola</a></div>

<div class="botensino"><a href="#">Sistema de Ensino</a></div>

<div class="botcontato"><a href="#">Contato</a></div>

</menu>

</div>

</ul>

</div>

jQuery(document).ready(function($) {

$('#banner-fade').bjqs({

height : 320,

width : 620,

responsive : true,

nexttext : 'Próximo',

prevtext : 'Anterior',

});

</script>

<div class="sistemaweb"><a href="#">Sistema WEB</a></div>

</div>

<div class="selma1"><h2>"O papel da escola, hoje, em relação ao conhecimento, é promover a crítica da informação; é acreditar na possibilidade de provocar as relações entre conhecimentos e entre acontecimentos; é exercitar a consciência através do diálogo, da escrita daquilo que se diferencia do que se pensa, do que se acredita, do que se vive e do que se fala."</h2></div>

<div class="selma2"><h1><a href="http://educareisograndedesafio.blogspot.com.br/" target="_blank">- Selma Costa, Diretora Pedagógica.</a></h1></div>

</div>

<div class="circ1"><a href="#">VOCÊ SABIA?</a></div>

<div class="circ2"><a href="#">ANIVERSARIANTES</a></div>

<div class="circ3"><a href="#">LANCHE SAUDÁVEL</a></div>

</div>

</body>

</html>

*{margin:0; padding:0;}

body {

color:#fff;

font-family: helvetica, verdana, arial, tahoma, sans-serif;

background: url(imagens/bgfaixa1.png) repeat-x;

text-decoration: none;

}

a { outline:0; }

a:link {text-decoration:none}

a:visited {text-decoration:none}

a:active {text-decoration:none}

a:hover {text-decoration:none}

#geral {

color:transparent;

padding:0px;

border-radius:0px;

box-shadow:0 0 0px 0px rgba(0,0,0,0.3);

width:1000px;

margin:0px auto;

}

.imgheader {

position:relative;

top:50px;

}

div.grademenu {

width: 1000px;

height: 40px;

position:relative;

top:0px;

}

.botprincipal a {

font-size: 17px;

color:#fff;

}

div.botprincipal {

color:#fff;

width:160px;

height:40px;

background:#f644e6;

line-height:40px;

border-radius:130px;

text-align:center;

position:relative;

top:50px;

left:50px;

}

div.botprincipal:hover {

background:#6fa9ef;

color:#fff;

border-radius:130px;

}

.botnossa a {

font-size: 17px;

color:#fff;

}

div.botnossa {

color:#fff;

width:160px;

height:40px;

background:#9cca4f;

line-height:40px;

border-radius:130px;

text-align:center;

position:relative;

top:10px;

left:220px;

}

div.botnossa:hover {

background:#6fa9ef;

color:#fff;

border-radius:130px;

}

.botensino a {

font-size: 17px;

color:#fff;

}

div.botensino {

color:#fff;

width:160px;

height:40px;

background:#ecd032;

line-height:40px;

border-radius:130px;

text-align:center;

position:relative;

top:-30px;

left:620px;

}

div.botensino:hover {

background:#6fa9ef;

color:#fff;

border-radius:130px;

}

.botcontato a {

font-size: 17px;

color:#fff;

}

div.botcontato {

color:#fff;

width:160px;

height:40px;

background:#fe9f24;

line-height:40px;

border-radius:130px;

text-align:center;

position:relative;

top:-70px;

left:790px;

}

div.botcontato:hover {

background:#6fa9ef;

color:#fff;

border-radius:130px;

}

/* ########## ########## FIM HEADER E MENU ########## ########## */

/* ############ DEMO.CSS ############### */

#banner-fade,

#banner-slide{

position:relative;

top:-30px; left:0px;

/*margin-bottom: 60px;*/

}

ul.bjqs-controls.v-centered li a{

display:block;

padding:10px;

background:#fff;

color:#000;

}

ul.bjqs-controls.v-centered li a:hover{

background:#6fa9ef;

color:#fff;

}

ol.bjqs-markers li a{

padding:5px 20px;

background:#6fa9ef;

color:#fff;

margin:5px;

}

ol.bjqs-markers li.active-marker a,

ol.bjqs-markers li a:hover{

background: #999;

}

p.bjqs-caption{

background: rgba(255,255,255,0.5);

}

/* ############# FIM DEMO.CSS ############### */

/* ############# BJQS.CSS ############### */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}

li.bjqs-slide{position:absolute; display:none;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}

ul.bjqs-controls.v-centered li a{position:absolute;}

ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}

ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}

ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}

ol.bjqs-markers.h-centered{text-align: center;}

ol.bjqs-markers li{display:inline;}

ol.bjqs-markers li a{display:inline-block;}

p.bjqs-caption{display:block;width:96%;margin:0;padding:3%;position:absolute;bottom:0;}

/* ############# FIM BJQS.CSS ############### */

div.gradeinicio {

width: 1000px;

height: 350px;

position:relative;

top:120px;

}

div.barramatricula {

width: 350px;

height: 250px;

position:relative;

top:-350px;

left:650px;

border: 0px;

text-decoration: none;

}

div.sistemaweb a {

font: 22px helvetica;

/*text-align: right;*/

color:#fff;

position:relative;

top:-367px;

left: 750px;

}

div.blocorosa {

width: 350px;

height: 50px;

background:#f644e6;

position:relative;

top:-330px;

left:650px;

}

div.gradeselma {

width: 1000px;

height: 120px;

position: relative;

top:540px;

}

div.div1 {

border-top:1px solid #CCC;

position: relative;

top:-400px;

}

div.selma1 h2 {

font: 15px helvetica;

float: right;

text-align: justify;

color:#fff;

position:relative;

top:-390px;

}

div.selma2 h1 a {

font: 17px helvetica;

text-align: right;

color:#fff;

position:relative;

top:-395px;

left:730px;

}

div.div2 {

border-top:1px solid #CCC;

position: relative;

top:-380px;

}

div.gradecircus {

/*width: 1000px;

height: 200px;*/

position: relative;

top:160px;

}

.circ1 a{

font-size: 20px;

color:#fff;

}

div.circ1 {

color:#fff;

width:200px;

height:200px;

background:#f645e6;

border-radius:180px;

position:relative;

line-height:195px;

text-align:center;

}

div.circ1:hover {

background:#6fa9ef;

color:#fff;

border-radius:180px;

}

.circ2 a{

font-size: 20px;

color:#fff;

}

div.circ2 {

color:#fff;

width:200px;

height:200px;

background:#9cca4f;

border-radius:180px;

position:relative;

top:-200px;

left:260px;

line-height:195px;

text-align:center;

}

div.circ2:hover {

background:#6fa9ef;

color:#fff;

border-radius:180px;

}

.circ3 a{

font-size: 20px;

color:#fff;

}

div.circ3 {

color:#fff;

width:200px;

height:200px;

background:#ecd032;

border-radius:180px;

position:relative;

top:-400px;

left:540px;

line-height:195px;

text-align:center;

}

div.circ3:hover {

background:#6fa9ef;

color:#fff;

border-radius:180px;

}

.circ4 a{

font-size: 20px;

color:#fff;

}

div.circ4 {

color:#fff;

width:200px;

height:200px;

background:#fe9f24;

border-radius:180px;

position:relative;

top:-600px;

left:800px;

line-height:195px;

text-align:center;

}

div.circ4:hover {

background:#6fa9ef;

color:#fff;

border-radius:180px;

}

andersonseifert · Agosto 1, 2013

Bom tinha um pequeno Errinho troque a que eu editei :

Correto :

.gradecircus {
/*width: 1000px;*/
height: 180px;
position: relative;
top:140px;
}

Errado :

div.gradecircus {
/*width: 1000px;
height: 200px;*/ <-- Voce definiu o tamanho da classe e Comentou ela rsrs .
position: relative;
top:160px;
}

Ve se ajudou !

Bruno Eris · Agosto 1, 2013

Anderson, resolveu no Chrome e no IE, mas no FF continua com o espaço vazio, tem alguma outra ideia?

Obrigado!

andersonseifert · Agosto 2, 2013

Voce tem muita coisa no codigo que nao esta usando, podia dar uma limpeza, muda esse css aqui :

div.gradeselma {
width: 1000px;
height: 120px;
position: relative;
top:340px;
}

Bruno Eris · Agosto 6, 2013

Consegui fazendo uma reescrita na position, com divs pais e filhas, aí resolveu, Obrigado.

andersonseifert · Agosto 7, 2013

Marca como resolvido amigo .

Arquivado

Espaço vazio criando rolagem.

Recommended Posts

Bruno Eris 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bru_ce 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Eris 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andersonseifert 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Eris 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andersonseifert 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno Eris 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

andersonseifert 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Fóruns

Tempo Real

Informação importante