Ir para conteúdo

POWERED BY:

Arquivado

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

hugoxan

CSS Banner lateral oculto

Por , em Desenvolvimento frontend

Recommended Posts

hugoxan    0

hugoxan
Postado

Boa tarde pessoal do iMasters.

Sou novato por aqui e pelo que estou vendo tenho muito o que aprender...

 

Sou totalmente inesperiente na area de CSS.

 

Tenho meu site e queria colocar um banner na esquerda e outro na direita. Mas que eles só abram todo o conteudo quando o visitante colocar o mouse em cima de uma pequena aba. e tirando o Mouse ele volte a ser a aba.

 

 

Mais ou menos como no flash desta pagina ( http://files.riacodes.com/flash_sliding-menu/ ), mas em CSS. ja estou a dias a procurar e nao encontro.

 

Seria mais ou menos como tem no site do mundo canibal ( http://mundocanibal.com.br/ ) mas ao inves de ficar colado ao corpo do site teria de ficar colado as laterais e sai de fora para dentro

 

Não faço ideia nem de como iniciar o codigo, por isso preciso de ajuda completa..

 

Desde ja meu muito obrigado. .

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Amigão, fica meio difícil te ajudar.

Pois você não tem um site para mostrar ..

Te aconselho a estudar e ficar fera em HTML + CSS (tableless),

hoje você tem vários meio de estudo na internet, youtube, google, fórum, livros em PDF.

Estude, faça um site e traga sua dúvida novamente, abraços ! :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Fiz algo para você,

Porém estude sobre a propriedades do CSS, FLOAT !

 

CTRL + C / CTRL + V

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.box {
width:400px;
height:400px;
}

#esquerda {
float:left;
background-color:#ff0000;
}

#direita {
float:right;
background-color:#00ff00;
}

.clear {
clear:both;
}

</style>
</head>

<body>
<div id="esquerda" class="box">

</div>
<div id="direita" class="box">

</div>
<div class="clear">

</div>

</body>
</html>

 

Boa Sorte meninão e E S T U D A, nada cai do céu ! :natalbiggrin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

hugoxan    0

hugoxan
Postado

Fico agradecido pela ajuda, ja é meio caminho andado.. agora vou pesquisar a parte da animação para o banner aparecer apenas quando passa o mouse...

 

 

vlw mesmo .... Vou E S T U D A R . pois N I N G U É M nasce S A B E N D O

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito