Artigos PHP DESENVOLVENDO UM SITE TABLELESS COMPLETO COM PHP E MYSQL - parte 2
Ola!

Neste artigo iniciaremos a montagem do conteúdo.

Dentro da DIV cotent_site devemos colocar a DIV topo que deve ter o logotipo e o menu do site.

Nossa estrutura fica assim:

<div class="cotent_site">
    <div class="topo">
    </div>
</div>

Como o topo possui tanto o logotipo quanto o menu, ele deve ter largura total de 955px;

.topo{
width:955px;
float:left;
margin-top:25px;
}

Na div topo coloquei margin-top:25px; para que o logotipo e o menu tenham 25px de margin do topo.

Agora dentro do topo deve-se ser colocado mais duas DIV: a div logotipo e a div menu.

<div class="topo">
     <div class="logotipo">
     </div>
     <div class="menu">
     </div>
</div>

A div logotipo deve ter a largura do logotipo que você deseja colocar, no meu caso o logotipo têm 230px. Então:



O estilo na DIV logotipo ficaria assim:

.logotipo{
width:230px;
float:left;
margin-left:40px;
}

E no código HTML:

<div class="logotipo"><img src="img/logotipo.png" /></div>
<!--Informo o caminho onde esta a imagem. Procure criar uma pasta img para colocar as imagens exemplo: wamp/www/nome_da_pasta_do_site/img-->

Resultado:



Você pode ver que o conteúdo TESTE TESTE está rente ao logotipo, isso se resolve acrescentando a div topo um padding-bottom de 60px;.

.topo{
width:955px;
float:left;
margin-top:25px;
padding-bottom de 60px;
}

Iniciando o MENU...

Para definir a largura do menu, pegamos os 955px de largura do topo e tiramos 280px que é a largura do logotipo(240px + 40px de margin-left), feito isso chegamos em 675px. Como eu não quero que o menu fique muito próximo ao logotipo, coloco margin-left: 40px; e estes 40px diminuo nos 675px restando 635px.

.menu{
width:635px;
float:left;
margin-left:40px;
}

Para a estrutura do código do menu utilizaremos LISTA:

<div class="menu">
    <ul>
        <li>HOME</li>
        <li>EMPRESA</li>
        <li>PRODUTOS</li>
        <li>CLIENTES</li>
        <li>CONTATO</li>
    </ul>
</div>

RESULTADO:



Para resolver o problema dos links que estão na vertical faremos da seguinte maneira.

Acrescente no style.css:

li{
float:left;
}

RESULTADO:


Vamos colocar espaçamento entre os links:

li{
float:left;
padding-left:15px;
padding-right:15px;
}

E também tirar o marcador do LINK:

li{
float:left;
padding-left:15px;
padding-right:15px;
list-style:none;  // tira marcador do link
}

Inciando com a formatação do LINK.

Agora precisamos deixar nosso menu como este proposto no layout inicial:







Acrescentamos no estilo do li:

li{
float:left;
background-color:#BB629A;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
list-style:none;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#FFF;
}

RESULTADO:



Para alinhar o logotipo com o menu acrescente na div do logotipo margin-top:15px :

.logotipo{
width:240px;
float:left;
margin-left:40px;
margin-top:15px;
}

Pronto! Topo do site concluído.

No próximo artigo montaremos o conteúdo das páginas e as notícias.

Ate mais !!

Luzia

__________________________________________________________________________________________

CONTEUDO INDEX.PHP
__________________________________________________________________________________________

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">  -- aqui referencio a folha de estilo que vou utilizar
<title>EXEMPLO SITE COM DIV</title>
</head>
<body>
<div class="content">   
    <div class="cotent_site">
      <div class="topo">
        <div class="logotipo"><img src="img/logotipo.png" /></div><!-- deded-->
        <div class="menu">
        <ul>
        <li>HOME</li>
        <li>EMPRESA</li>
        <li>PRODUTOS</li>
        <li>CLIENTES</li>
        <li>CONTATO</li>
        </ul>
        </div>
      </div>
    </div>
    <div class="rodape">
       <div class="conteudo_rodape">
        rodape
       </div>
    </div>
</div>
</body>
</html>    

ESTILO STYLE.CSS

@charset "utf-8";
/* CSS Document */

BODY{
margin-top:20px;
background-color:#F6F6F6;
}

.content{
float:left;
position:relative;
left: 50%;
margin-left: -475px;
width:955px;
}

.cotent_site{
width:955px;
float:left;
background-image:url(img/background.jpg);
background-repeat:repeat-x;
background-color:#C97BAB;
}

.rodape{
float:left;
bottom: 0;
width:955px;
}

.topo{
width:955px;
float:left;
margin-top:25px;
padding-bottom:60px;
}

.logotipo{
width:240px;
float:left;
margin-left:40px;
margin-top:15px;
}

.menu{
width:635px;
float:left;
margin-left:40px;
}

li{
float:left;
background-color:#BB629A;
padding-left:15px;
padding-right:15px;
padding-top:15px;
padding-bottom:15px;
list-style:none;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#FFF;
}