• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

J4m3s007

[Ajuda] CSS

4 mensagens neste tópico

Tenho este codigo html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content="description"/>
<meta name="keywords" content="keywords"/>
<meta name="author" content="author"/>
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<title>Hacker´s e Pirataria</title>
</head>

<body>

<div class="container">

<div id='header'>
      <embed src='http://www.effectgenerator.com/1.0.6/EffectMovie.swf' width='839' height='150' loop='false' allowscriptaccess='always' flashvars='id=175509' play='true' pluginspage='http://www.adobe.com/go/getflashplayer' quality='high' type='application/x-shockwave-flash' wmode='opaque' scale="noborder"/>  
</div>
    <div class="main_right">

        <div class="padded">
            
            <h1>Área de Projecto </h1>
            <p>Site para Área de Projecto 08/09, o trabalho consiste em prevenir/ensinar as pessoas a lidarem mais facilmente com os Hacker´s e a Pirataria.</p>
            <p> </p>
      </div>

    </div>

    <div class="subnav">

        <h1>Projecto</h1>
        <ul>
            <li><a href="index.html">pellentesque</a></li>
            
            <li><a href="index.html">sociis natoque</a></li>
            <li><a href="index.html">semper</a></li>
            <li><a href="index.html">convallis</a></li>
        </ul>

        <h1>Multimédia</h1>
        <ul>
            <li><a href="index.html">Vídeos</a></li>
            <li><a href="index.html">Imagens</a></li>
            <li><a href="index.html">semper</a></li>
            <li><a href="index.html">sociis natoque</a></li>
        </ul>

        <h1>Diários de Bordo </h1>
        <ul>
            <li><a href="index.html">sociis natoque</a></li>
            <li><a href="index.html">magna sed purus</a></li>
            <li><a href="index.html">tincidunt</a></li>
            <li><a href="index.html">consequat molestie</a></li>
        </ul>

    </div>
        
    <div class="main">

        <div class="padded">

            <h1>Área de Projecto 08/09 </h1>
            <p class="meta">October 24th, 2006 by Duis porttitor</p>

            <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

            <blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>
            
            <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>

            <p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
            </p>


            <h1>Adipiscing</h1>
            <p class="meta">September 31st, 2006 by Mauris</p>

            <p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>

            <ul>
                <li>Tristique</li>
                <li>Aenean</li>
                <li>Pretium</li>
            </ul>

            <p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>
                
        </div>

    </div>
    
    <div class="clearer"><span></span></div>

    <div class="footer">
        
         <span class="left">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML</a></span>
        
         <span class="right"><a href="http://">Website template</a> by <a href="http:/">Arcsin</a></span>
        
        <div class="clearer"><span></span></div>

    </div>

</div>

</body>

</html>

Código CSS

/*
Template name: Dark Ritual
Release date: 2006-11-06
Description: Tribal-style three column layout.
Author: Viktor Persson

This template is licensed under a Creative Commons Attribution 2.5 License:
*/

/* standard elements */
* {
    margin: 0;
    padding: 0;
}

a {color: #682;}

a:hover {color: #9A6;}

body {
    background: #333 url(img/bg.gif);
    color: #333;
    font: normal 62.5% "Lucida Sans Unicode",sans-serif;
    margin: 3% 0;
}

p,ul {
    padding-bottom: 1em;
}

ul {margin-left: 1.2em;}

li {list-style: none;}
.main li {list-style-image: url(img/li.gif);}

h1 {font-size: 1.2em;}

blockquote {
    background: #FFF;
    border-bottom: 1px solid #EEE;
    border-top: 1px solid #EEE;
    color: #333;
    display: block;
    font-size: 0.9em;
    margin-bottom: 1.2em;
    padding: 6px 12px;
}
blockquote p {padding: 3px 0;}

h1,h2,h3 {color: #994;}

/* misc */
.clearer {clear: both;}
.main_right .padded {padding: 6px 2px 6px 16px;}
.main .padded {padding: 18px 24px;}
.meta {font-size: 0.8em; color: #666;}
.left {float: left;}
.right {float: right;}

/* structure */
.container {
    font-size: 1.2em;
    background: url(img/bgcontainer.gif) repeat-y;
    margin: 0 auto;
    width: 840px;
    border: 12px solid #222;
}

/* header */
.header {
    float: left;
    width: 640px;
    background: url(img/header.png) no-repeat;
    font: normal 2.4em Verdana,sans-serif;
    line-height: 150px;
    text-align: center;    
}

/* structure */
.top {
    background: #222;
    color: #DDD;
    float: left;
    font: normal 1.4em Verdana;
    height: 50px;
    text-align: center;
    width: 639px;
}
.subnav {
    float: left;
    width: 160px;
}
.main {
    float: left;
    width: 480px;
}
.main_right {
    float: right;
    width: 200px;
    color: #CCC;
}

/* sub-navigation */
.subnav h1 {
    background: #222;
    color: #FFE;
    font: bold 1.1em Verdana,sans-serif;
    line-height: 24px;
    padding-left: 8px;
}
.subnav ul {margin: 0; padding: 0;}
.subnav li {
    border-bottom: 1px solid #696755;
    list-style: none;
}
.subnav li a {
    background: #89866F;    
    color: #111;
    display: block;
    padding: 8px 0 8px 12px;
    width: 148px;
    text-decoration: none;
}
.subnav li a:hover {
    background: #9C997C;
    color: #000;
}

/* footer */
.footer {
    background: url(img/bgfooter.gif) repeat-x;
    color: #CCC;
    font-size: 0.9em;
    line-height: 39px;
    width: 100%;
    text-align: center;
}
.footer .left,.footer .right {padding: 0 16px;}
.footer a {color: #EEE;}
.footer a:hover,.footer .right a:hover {color: #FAFCB0;}
.footer .right, .footer .right a {color: #949474;}

O que eu queria era passara o rato e abrir uns separadores para o lado como demostra a figura:

futatf.jpg

Obrigada

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Como isto:

http://divitodesign.com/dd-articles/vertical-css-menu/

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

boas

se procurares no google por menu dropdown aparecem-te menus desse genero ja feitos...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

boas

se procurares no google por menu dropdown aparecem-te menus desse genero ja feitos...

boas

se procurares no google por menu dropdown aparecem-te menus desse genero ja feitos...

Já estou farto de procurar e nao encontro nada que se encaixe aqui.

:S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora