1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.
  2. Informação: Pela 0:30 desta Sexta-feira (9 de Dezembro, 23:30 de Quinta-feira nos Açores) o Fórum e restantes sites da ZWAME vão estar offline para manutenção durante cerca de 1h30.
    Se necessário faremos actualizações via Twitter e Facebook.
    Remover anúncio

Dúvida com .css [RESOLVIDO]

Discussão em 'Web Development' iniciada por xuxaki, 22 de Julho de 2008. (Respostas: 5; Visualizações: 515)

  1. xuxaki

    xuxaki Power Member

    Boas pessoal,
    não estou muito dentro de desenvolvimento de páginas web, pelo que estou a ter alguma dificuldade em fazer algo, que para muitos é básico... Aqui vai.

    Arranjei um template na web muito simples com: header, left menu, content e right menu. Acontece que não quero o menu da direita para nada, e queria aproveitar o espaço para o content no centro. Depois de algumas alterações, o resultado que obtenho é este:

    [​IMG]

    A lagura está correcta, mas a "caixa de texto" está a repetir, em vez de "fechar" na direita...
    De certo que alguém sabe qual o problema.. Deixo parte do código do ficheiro .css para que possam ver o que estou a fazer mal:

    Código:
    body {
        background-image:url(images/background.gif);
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 0px;
        padding: 0px;
        background-repeat: repeat-x;
        background-color: #000000;
    }
    * {margin: 0px;padding: 0px;}
    p {
        padding: 10px 10px 10px 20px;
        display:block;
        color:#525757;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold
    }
    a {
        color:#6b7272;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-weight: bold;
    }
    #container {
        margin: 0px auto;
        text-align: left;
        width: 860px;
    }
    #header{
        height:304px;
        width:777px;
        background-image:url(images/header.jpg);
        background-repeat: no-repeat;
    }
    #content{
    }
    #left{
        width:192px;
        float:left;
    }
    #middle{
        margin-left:206px;
        margin-right:15px;
        width:622px;     /* ALTERADO POR MIM */
    }
    /*
    #right{
        width:192px;
        float:right;
    }
    */
    /********************* menu ****************************/
    .menuheader{
        width:192px;
        height:37px;
        background-image:url(images/menutop.gif);
        display:block;
    }
    .menucontent{
        width:192px;
        background-image:url(images/menumiddle.gif);
        padding-top:10px;
        background-repeat: repeat-y;
    }.menuheader h3{
        padding: 10px 0px 0px 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
    }
    .menufooter{
        width:192px;
        height:15px;
        background-image:url(images/menubottom.gif);
        display:block;
    }
    .postheader,.menuheader{
        color:#CCCCCC;
        text-transform: uppercase;
    }
    /********************* post ****************************/
    .post{
        margin-bottom:15px;
    }
    .postheader{
        background-image: url(images/posttop.gif);
        background-repeat: repeat-x;
        display: block;
        width:622px;   /* ALTERADO POR MIM */
        height:33px;
    }
    .postheader h1{
        padding: 7px 0px 0px 20px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
    }
    
    .postcontent{
        background-image:url(images/postmiddle.gif);
        background-repeat: repeat-n;
        padding: 20px 0px;
    }
    .postfooter{
        background-image:url(images/postbottom.gif);
        background-repeat: repeat-x;
        display:block;
        width:622px;    /* ALTERADO POR MIM */
        height:15px;
    }
    /********************* header ****************************/
    ...
    /********************* footer ****************************/
    ...
    /********************* menu members *********************/
    ...
    
    Desde já obrigado a quem me souber ajudar.
     
    Última edição: 22 de Julho de 2008
  2. Py_

    Py_ Power Member

    Boas,

    provavelmente o problema é o teu conteúdo não caber dentro da "caixa"
    que definis-te como o fundo do teu container mas se poderes por online ou postar a estrutura em html da página posso-te ajudar...

    Cumps,
    Py_
     
  3. xuxaki

    xuxaki Power Member

    aqui vai o code da pagina em html:

    Código:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title> Ançã LANParty 2008</title>
    </head>
    
    <body>
    <div id="container">
        <div id="header">
            <ul>
                <li><a href="http://www.freewebsitetemplates.com">Join now</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Links</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Login</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Forums</a></li>
                <li><a href="http://www.freewebsitetemplates.com">News</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Download</a></li>
                <li class="last"><a href="http://www.freewebsitetemplates.com">contact</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="left">
                <div class="menu">
                    <div class="menuheader"><h3>Menu</h3></div>
                    <div class="menucontent">
                        <ul>
                            <li><a href="http://www.freewebsitetemplates.com">Home</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Donations</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Downloads</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Feedback</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Shout_Box</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Surveys</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Ventrilo</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Web Links</a></li>
                            <li><a href="http://www.freewebsitetemplates.com">Your Account</a></li>
                        </ul>
                    </div>
                    <div class="menufooter"></div>
                </div>
                <div class="menu">
                <div class="menuheader"><h3>Menu</h3></div>
                    <div class="menucontent">
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
                    </div>
                    <div class="menufooter"></div>
                </div>
            </div>
    
    <!-- estaria aqui a parte do menu direito, mas como já disse, tirei pois não vou precisar. -->
    
            <div id="middle">
                <div class="post">
                    <div class="postheader"><h1>Post title</h1></div>
                    <div class="postcontent">
                        <p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>
                        
                        <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
                        text. This is just a place holder so you can see how the site would look like.</p> 
                        
                        <p>You can remove any link to our websites from this template you're  free to use the template without linking 
                        back to us. Don't want your boss to know you used a free website template ;) .</p>
                        
                        <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
                        
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
                    </div>
                    <div class="postfooter"></div>
                </div>
                <div class="post">
                    <div class="postheader"><h1>Post title</h1></div>
                    <div class="postcontent">
                        <p>Don't forgot to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add at least one free website template daily.</p>
                        
                        <p>This is a template designed by free website templates for you for free you can replace all the text by your own 
                        text. This is just a place holder so you can see how the site would look like.</p> 
                        
                        <p>You can remove any link to our websites from this template you're  free to use the template without linking 
                        back to us. Don't want your boss to know you used a free website template ;) .</p>
                        
                        <p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
                        
                        <p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
                        <p>To find great hosting providers visit <a href="http://www.webhostingzoom.com">Web Hosting Zoom</a></p>
                    </div>
                    <div class="postfooter"></div>
                </div>
            </div>
        </div>
        <div id="footer">
            <ul>
                <li><a href="http://www.freewebsitetemplates.com">Join now</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Links</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Login</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Forums</a></li>
                <li><a href="http://www.freewebsitetemplates.com">News</a></li>
                <li><a href="http://www.freewebsitetemplates.com">Download</a></li>
                <li class="last"><a href="http://www.freewebsitetemplates.com">contact</a></li>
            </ul>
        <span>Copyright © 2006 Call of duty 2. All rights reserved.</span>    </div>    
    </div>
    </body>
    </html>
     
  4. Py_

    Py_ Power Member

    visto que o teu conteudo aparece em <div id="middle"> era lá que devias por a imagem como background e não na classe "menucontent" como parece estar.

    O identificador #right deveria desaparecer uma vez que não é utilizado... Mais ajudas poderei dar logo quando sair do trabalho... lol
     
  5. xuxaki

    xuxaki Power Member

    Não sei se sou eu que estou a perceber tudo mal ou se tu é que não percebeste bem qual o problema :)
    O texto está bem, o fundo é que está mal! Eu quero apenas ter o menu da esquerda e que o texto ocupe a parte central + a parte direita (onde o fundo está mal). Ou seja, a caixa do meio é que deveria esticar mais até caber todo o texto lá dentro. O problema é que a caixa não está a esticar, mas sim a repetir!

    Espero ter sido claro :rolleyes:
     
  6. xuxaki

    xuxaki Power Member

    está resolvido! Não estava relacionado com o .css ou .html, mas sim com a imagem em si, que como é obvio, não esticava... eu é que tinha de a mudar para o tamanho que eu queria!....
    :nocom8le:
     

Partilhar esta Página