Ir ao conteúdo
  • Cadastre-se
Entre para seguir isso  
jcvilanova

Posicionamento de divs e outros objetos no site

Recommended Posts

Galera, fiz um layout da minha pagina no Photoshop pra tentar implementar com HTML e Css pra que fique igual. Como disse, estou iniciando. A estrutura é dividida em 4 Divs (superior, lateral esquerda, principal e rodapé). Dentro de cada uma das Divs lateralesquerda e principal eu quero colocar outras Divs pra que possa colocar na lateral e no centro um slide de texto e imagens. É o que aparecera na primeira pagina (index). Ja a segunda pagina (cadastro) os slides sumirao e surgirao tres botões de cadastro que ficarao por sobre a Div Principalcentro, porém, na forma como esta nesse lay out. Acontece que nao consigo posicionar os botões como no layout. A intenção é conseguir entender esse posicionamento, pra depois conseguir colocar as funçoes de cada botao, para que cada um deles abra um formulario do lado. 

Gostaria de saber o que está errado neste código, tanto na pagina Cadastro quanto no CSS. As cores sao apenas para fins de estudo, depois colocarei as cores conforme o layout. 

Será se vocês poderiam me ajudar ?

 

Esse é o codigo HTML

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/Estilo.css" media="screen"/>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/mudacor.js"></script>
<title>Css</title>
</head>
<body>
<div id="conteudo">
    <div id="header">
    <ul> 
        <li><a href="Home.html">Home</a></li>
        <li><a href="Quemsomos.html">Quem Somos</a></li>
        <li><a href="Parceiros.html">Parceiros</a></li>
        <li><a href="Portifólio.html">Portifólio</a></li>
        <li><a href="Contato.html">Contato</a></li>
        <hr size=2 width=662 >
        </ul>
    <h1> MEU HEADER</h1>
    <p id="slogandoheader"> Meu Slogan Aqui</p>
    </div>
    <div id="barralateral">
            <div id="barlateralcentro">
                <h2> Barra Lateral</h2>
            <p> esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta é minha primeira div esta éprimeira div</p>
        
                </div>
        
    </div>
    <div id="principal">
        <h2> Principal</h2>
        <button class="btnclientes"> Clientes </button>
        <button class="btnparticipantes"> Participe </button>
        <button class="btnparceiros"> Parceiros </button>
        <div id="barprincipalcentro">
    </div>
        
        
        
        </div>
        </div>
     <div id="rodape">
        <h3 id="sloganroda"> Aqui Fica o Meu Rodapé </h3>
    <a id="teste" href="#">... Mudar ... </a>
     
     </div>   
    </div>    
</body>
</html>


 

 

E aqui o CSS

@charset "utf-8";
/* CSS Document */
    
#conteudo {
    border: 1px solid red;
    height:900;
    margin:0 auto;
    background:url(Plano-de-Fundo.png)
}
h2 { margin:0 auto;
}
h1 { margin:0 auto;
}
#header {
    margin: 20px 0px 0 15px;
    padding: 11px;
    height: 120px;
    background-image: url(Logo_pre.png), -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(39,122,191,1.00)),color-stop( 100% , rgba(255,0,0,0.09)));
    background-image: url(Logo_pre.png), -webkit-linear-gradient(179deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
    background-image: url(Logo_pre.png), linear-gradient(271deg,rgba(39,122,191,1.00) 0%,rgba(255,0,0,0.09) 100%);
    background-repeat: no-repeat;
    }
    
#slogandoheader {
    margin:200px 100;
    
    }
#barralateral {
   background-color: #FFFBF0;
    width: 250px;
    height:380px;
    padding:11px;
    float:left;
    
        
}
#barlateralcentro {
    background-color: #F00;
    position:relative;
    float: left;
    margin: 50 10 50 10;
        width: 230px;
    height:250px;
    padding:11px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#principal {
    background-color: #FF5;
    position:relative;
    padding-left:11px;
     width: 1000px;
     height:402px;
    float:left;
    margin-right:0;
    
   }

   
   #barprincipalcentro {
    background-color: #f41b08;
    position:relative;
    margin: 11px 120px 0 190px;
        width: 600px;
    height:250px;
        padding-top:20px;
    padding-left:11px;
    padding-right:15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
 #botaocliente {
    background-color: #458ead;
    position:absolute;
    margin: 0px 0px 200px 100px;
        width: 70px;
    height:50px;
    padding-top:20px;
    padding-left:11px;
    padding-right:15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#botaoparticipantes {
    background-color: #458ead;
    position:relative;
    margin: 0px 0px 100px 280px;
        width: 70px;
    height:50px;
        float:left;
        padding-top:20px;
    padding-left:11px;
    padding-right:15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#botaoanuncie {
    background-color: #458ead;
    position:relative;
    margin: 0px 0px 300px 20px;
        width: 70px;
    height:50px;
        float:left;
        padding-top:20px;
    padding-left:11px;
    padding-right:15px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#rodape { 
  background-color:black;
  color: white;
    clear:both;
  padding:11px;
    }
ul {
    position:absolute;
    top: 100px right:50px;
    float:right; 
    left:400px;;    }
ul li {
    list-style-type: none;
    display: inline;
    padding: 5px 5px 5px 40px;
    text-decoration: none;
    font-family: "Trebuchet MS", Arial, Helvetica, Sans Serif;
    font-size: 12px;
    color: #3FC;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-image: -webkit-gradient(linear, 100.00% 50.87%, 0.00% 49.13%, color-stop( 0% , rgba(255,255,255,0.02)),color-stop( 55.96% , rgba(16,103,159,0.54)),color-stop( 95.34% , rgba(243,244,245,0.44)));
    background-image: -webkit-linear-gradient(179deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
    background-image: linear-gradient(271deg,rgba(255,255,255,0.02) 0%,rgba(16,103,159,0.54) 55.96%,rgba(243,244,245,0.44) 95.34%);
}
    ul li a {
        list-style-type: none;
        text-decoration: none;
        color:#000;
    
    }
    hr {
        color:#999;
        }
.btnclientes {
    height: 70px;
    width: 120px;
    font-family: arial;
    font-size:14px;
    position:absolute;
    margin: 250px 0px 250px 220px;
    text-transform: uppercase;
    font-weight: 700;
    border:none;
    padding:10px;
    cursor: pointer;

}
.btnparticipantes {
    height: 70px;
    width: 120px;
    font-family: arial;
    font-size:14px;
    position:absolute;
    margin: 250px 0px 350px 360px;
    text-transform: uppercase;
    font-weight: 700;
    border:none;
    padding:10px;
    cursor: pointer;
}
.btnparceiros {
    height: 70px;
    width: 120px;
    font-family: arial;
    font-size:14px;
    position:absolute;
    margin: 250px 0px 350px 500px;
    text-transform: uppercase;
    font-weight: 700;
    border:none;
    padding:10px;
    cursor: pointer;
}

pagina 2.jpg

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
Entre para seguir isso  





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×