[Ajuda] CSS

M

_M4st1c_

Power Member
Tenho este codigo html:

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

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

        <div class="padded">
            
            <h1>&Aacute;rea de Projecto </h1>
            <p>Site para &Aacute;rea de Projecto 08/09, o trabalho consiste em prevenir/ensinar as pessoas a lidarem mais facilmente com os Hacker&acute;s e a Pirataria.</p>
            <p>&nbsp;</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&eacute;dia</h1>
        <ul>
            <li><a href="index.html">V&iacute;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&aacute;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>&Aacute;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">&copy; 2006 <a href="index.html">Website.com</a>. Valid <a href="[URL]http://jigsaw.w3.org/css-validator/check/referer[/URL]">CSS</a> &amp; <a href="[URL]http://validator.w3.org/check?uri=referer[/URL]">XHTML</a></span>
        
         <span class="right"><a href="[URL]http://[/URL]">Website template</a> by <a href="http:/">Arcsin</a></span>
        
        <div class="clearer"><span></span></div>

    </div>

</div>

</body>

</html>
Código CSS
Código: 
/*
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
 
Inicie sessão ou registe-se para poder participar.
Back
Topo