Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lukz

Sidebar não sobe completamente

Recommended Posts

Boa madrugada galera...

 

Seguinte, estou desenvolvendo um layout com dois blocos (um em cima do outro) e uma side bar na direita.

 

Porém a side não sobe completamente até o topo.

Fiz um esqueminha rápido para melhorar a compreensão de vcs.

http://img406.imageshack.us/img406/5199/esquema.jpg

 

E vou postar apenas o código css, pois o xhtml tenho

certeza de que está bem estruturado, além de eu usar include...

E não há nada de mais.. apenas alguns h1, h2 e parágrafos.

 

Aguardo a ajuda de vocês. Abração!

 

* {
	margin: 0;
	padding: 0;
	list-style: none;
}

html, body {
	height: 100%;
}

* html #tudo {
        height: 100%;
}

h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
	color: #000;
}

body {
	background: url(../images/bg_bdy.jpg) #FBB042 top repeat-x;
}

#menu {
	background: url(../images/bg_menu.jpg) repeat-x top;
	width: 100%;
	height: 77px;
}

/**************************************
MENU
**************************************/
.lavaLamp {
    position: relative;
    height: 77px; width: 780px;
    padding: 15px;
   /* overflow: hidden; */
	margin: 0 auto;
}

    .lavaLamp li {
        float: left;
        list-style: none;
    }

        .lavaLamp li.back {
            background: url("../images/lava.gif") no-repeat right -28px;
            width: 5px; height: 30px;
            z-index: 8;
            position: absolute;
			margin-top: 8px;
        }
            .lavaLamp li.back .left {
                background: url("../images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 7px;
            }

        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: Captalize;
            font:12px Tahoma, Arial, Verdana;
            color: #000; outline: none;
            text-align: center;
            height: 30px; top: 15px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 20px;
        }

		.lavaLamp li a:hover {
			color: #FF3399;
			}

/**************************************
WRAPPER & TOPO
**************************************/

#wrapper {
	width: 780px;
	margin: 0 auto;
	position: relative;
}

#topo {
	width: 780px;
	height: 300px;
	background: #fff url(../images/rnd_topo.jpg) no-repeat bottom;
}

#topo img {
	float: right;
	margin: 55px 55px 20px 0;
	width: 240px;
	}

#topo h1 {
	background: url(../images/topo_esq.jpg) no-repeat center;
	width: 246px;
	height: 247px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	float: left;
	margin: 20px 0px 0px 70px;
	}

.limpa {
	clear: both;
}


#rodape {
	background: #FF9900 url(../images/bg_rodape.jpg) no-repeat top;
	width: 780px;
	height: 78px;
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 0;
}

#rodape img {
	margin: 0;
	padding: 0;
	float: right;
	border: 0;
}

#rodape p.politica {
	font:11px Arial, Verdana, Tahoma;
	color: #FFF;
	float: left;
	margin: 30px 0 0 20px;
	width: 300px;
	height: 20px;
	line-height: 25px;
}

#rodape .visitantes {
	font:11px Arial, Verdana, Tahoma;
	color: #000;
}

#rodape #developer p {
	font:11px Arial, Verdana, Tahoma;
	color: #FFF;
}

#rodape #developer {
	float: right;
	margin: 40px 30px 0 0;
	}

#bemvindo {
	background: #FFF url(../images/bemvindo_baixo.jpg) no-repeat bottom;
	width: 514px;
	height: 264px;
	margin: 8px 0 0 0;
	float: left;
}

#bemvindo img {
	position: relative;
	top: 0;
}

#bemvindo h1 {
	font: 49px Arial, Tahoma, Verdana;
	color: #FF0000;
	letter-spacing: -5px;
	font-weight: 500;
	margin: 0 0 0 20px;
}

#bemvindo p {
	font: 11px Arial, Tahoma, Verdana;
	color: #000;
	margin: 0 0 0 20px;
	line-height: 18px;
	width: 433px;
}

#bemvindo a {
	font:bold 11px Arial, Tahoma, Verdana;
	color: #333;
	float: right;
	margin-right: 40px;
	margin-top: 15px;
	text-decoration: underline;
}

#bemvindo a:hover {
	font:bold 11px Arial, Tahoma, Verdana;
	color: #333;
	float: right;
	margin-right: 40px;
	margin-top: 15px;
	text-decoration: none;
}

#contato img {
	position: relative;
	top: 0;
}

#contato {
	background: #FFF url(../images/bemvindo_baixo.jpg) no-repeat bottom;
	width: 514px;
	height: 170px;
	float: left;
	margin-top: 10px;
	margin-right: 0;
}

#content {
	height: 100%;
	width: 780px;
}

#contato h1 {
	font: 35px Arial, Tahoma, Verdana;
	color: #85B200;
	letter-spacing: -5px;
	font-weight: 500;
	margin: 0 0 0 20px;
	text-transform: uppercase;
	float: left;
	width: 250px;
}

#contato p.ligue {
	font: 16px Arial, Tahoma, Verdana;
	color: #FF6600;
	margin: 0 0 0 20px;
	float: left;
}

span.email {
	font: 16px Arial, Tahoma, Verdana;
	color: #CC3366;
	float: left;
	margin-top: 5px;
}

span.email a {
	font:bold 16px Arial, Tahoma, Verdana;
	color: #CC3366;
	text-decoration: underline;
}

span.email a:hover {
	font:bold 16px Arial, Tahoma, Verdana;
	color: #CC3366;
	text-decoration: none;
}

#contato img.envelope {
	float: right;
	top: -50px;
	right: 10px;
	}

#sidebar {
	width: 255px;
	height: 437px;
	float: right;
	background: #FFF url(../images/baixo_side_home.gif) no-repeat bottom;
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pô, pela lógica e pelo meu teste seu código CSS tá certo. Faz assim: teste em todos os browsers que você tiver, pra ver se não é problema no qual você usa, se estiver errado em todos, apenas coloque margin-top: -100px; ou mais pixels, até ficar legal. Acho que é problema no HTML, não sei... mas faça isso. Até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.