1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

[Ajuda] CSS

Discussão em 'Web Development' iniciada por _M4st1c_, 26 de Maio de 2009. (Respostas: 1; Visualizações: 581)

  1. _M4st1c_

    _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:

    [​IMG]

    Obrigada
     
  2. _M4st1c_

    _M4st1c_ Power Member

    Como isto:

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

Partilhar esta Página