Aplicando as margens

Hudson Barbosa · Fevereiro 20, 2011

Olá meus amigos. Estou estudando (X)HTML e CSS, sendo assim estou contruindo uma pequeno site, quase tudo pronto, porém dividir este em quatro seções com o Div.

Um div para o cabeçalho, outro para a página principal, um div para uma barra lateral direita (usei o float, para flutuação deste div) e um outro div para o rodapé. Desta maneira, tentei aplicar margens ao div "principal" e ao div da "barra lateral", através da CSS, porém quando atualizo a página, a separação apartir das margens, resultando em duas colunas não acontece (quando era pra acontecer), consigo criar bordas para a "barra lateral", mas não quero isso, quero criar duas colunas. Segue marcações da CSS e da marcação XHTML. Por favor, uma mãozinha.

MARCAÇÃO CSS:

body {
    background-color: #b5a789;
    font-family: Georgia, "Time New Roma", Times, serif;
    font-size: small;
    margin: 0px;
}
    
#cabeçalho {
    background-color: #675c47;
    margin: 10px;
    height: 108px;
}

#principal {
    background: #efe5d0 url (figuras/background.gif) top left;
    font-size: 105%;
    padding: 15px;
    margin: 0px 330px 10px 10px;

}

#barralateral {
    background: #efe5d0 url (figuras/background.gif) bottom right;
    font-size: 105%;
    padding: 0px 15px 0px 15px;
    margin: 0px 10px 10px 10px;
    width: 280px;
    float: right; 
}

#rodape {
    background-color: #675c47;
    color: #efe5d0;
    text-align: center;
    padding: 15px;
    margin: 25px 0px 10px 0px;
    font-size: 90%;
    clear:right;
}

h1 {
    font-size: 120%;
    color: #954b4b;
}

.slogan {

    color: #954b4b;
}

.titulograos  {
    text-align: center;
    line-height: 1.8em;
}

a:link {
    color: #b76666;
    text-decoration: none;
    border-bottom: thin dotted #b76666;
}

a:visited {
    color: #675c47;
    text-decoration: none;
    border-bottom: thin dotted #675c47;
}

MARCAÇÃO (X)HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml1" lang="en" xml : lang="en">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Café Starbuzz</title>
        <link type="text/css" rel="stylesheet" href="starbuzz.css" />
    </head>
    

<body>
<div id="cabeçalho">
    <img src="figuras/header.gif" alt="Imagem do cabeçalho do Café Starbuzz" />
</div>

<div id="barralateral">
        <p class="titulograos">
            <img src="figuras/bag.gif" alt="Sacola da Máquina de Grãos" /><br />
            FAÇA SEU PEDIDO ONLINE com a: <a href="formulario.html">Máquina de Graõs</a>
            </br>
            
            <span class="slogan"><br />
            RÁPIDO<br />
            FRESCO<br />
            NA SUA PORTA <br />
            </span>
            
        <p>
            Por que esperar? Você pode fazer seu pedido de nossos melhores cafés diretamente na Internet como nossa nova Máquina de Grãos
            automática. Como funciona? Basta clicar no link da Máquina de Grãos, inserir seu pedido e, nos bastidores, seu café será torrado,
            moídos (se você quiser), empacotado e enviado para sua casa.
        </p>
</div>


<div id="principal">

    <h1>CAFÉ DE QUALIDADE, CAFÉINA DE QUALIDADE</h1>
    <p>
        No Café Starbuzz, somos dedicados a satisfazer a todas as suas necessidades de caféina através de novos cafés e chás de qualidade. É claro
        que queremos que você tome uma ótima xícara de café e tenha uma grande experiência com o café, mas somos a única empresa que monitora e
        otimiza os níveis de caféina. Portanto, dê uma passada aqui e encha sua xícara, ou faça um pedido on-line através de nosso formulário da nova
        Máquina de Grãos e obtenha o café Starbuzz de qualidade que você sabe que atenderá aos seus padrões de cafeína.
    </p>
    
    <p>
        Nós mencionamos <em>caféina</em>? Começamos a custear os rapazes que fazem uma pesquisa maravilhosa no <a href="http://buzz.headfirstlabs.com"
        title="Leia tudo sobre caféina no Buzz (em inglês)">Converse sobe Caféina.</a> Se você quiser saber as últimas novidades sobre café e outros
        produtos da caféina, dê uma paradinha e faça uma visita a eles.
    </p>

    <h1>NOSSA ESTÓRIA</h1>

    <p>"Um homem, um plano, um grão de café". Ok., isso não é um palíndrimo, mas resultou em uma xícara de café maravilhosa. O CEO do 
        Starbuzz é um homem, e você já conhece seu plano: um Starbuzz em cada esquina.
    </p>

    <p>
        Em apenas alguns anos ele executou esse plano e hoje você desfruta do Starbuzz em quase todos os lugares. E, é claro, a maior notícia
        do ano é que Starbuzz associou-se aos leitores do Use a Cabeça para colocar o Café na Web, e a sua página está crescendo rapidamente
        e ajudando a satisfazer as necessidades de caféina de um novo grupo de clientes.
    </p>
    
    <h1>BEBIDAS DO CAFÉ STARBUZZ</h1>
    
    <p>
        Temos uma grande variedade de bebidas de caféina no Starbuzz, incluindo nossos <a href="bebidas.html#casa" title="Mistura da Casa">Mistura da Casa</a>,
        <a href="bebidas.html#arabico" title="Café Arábico">Café Arábico com Leite</a>, 
        
        <a href="bebidas.html#cappuccino" title="Cappuccino">Cappuccino</a> e o favorito de nossos clientes, o
        
        <a href="bebidas.html#chai" title="Mistura da Casa">Chá Chai</a>.
    </p>
    
    <p>
        Também oferecemos uma grande variedade de graõs de café, inteiros ou moídos, para que você os leve para casa. Peça seu café, inteiros ou 
        moídos, para que você os leve para casa. Peça seu café hoje usando nossa <a href="formulario.html" title="Máquina de Grãos">Máquina de Grãos</a> online, 
        e leve a experiência do Café Starbuzz para casa.
    </p>

</div>


<div id="rodape">
    © 2006 Café Starbuzz
    <br />
    Todas as marcas registradas que aparecem neste site pertencem a seus respectivos proprietários.
</div>


</body>
</html>

Editado Fevereiro 22, 2011 por _Vinny_
Adicionar [code].

_Vinny_ · Fevereiro 25, 2011

Como assim criar duas colunas? Você já tem duas colunas na página.

Entrar

Aplicando as margens

Pergunta

Hudson Barbosa

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

_Vinny_

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades