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

Ajuda CSS - Criar uma caixa de tamanho fixo que tenha um scroll la dentro

Discussão em 'Web Development' iniciada por DO2, 16 de Agosto de 2012. (Respostas: 10; Visualizações: 2511)

  1. DO2

    DO2 Power Member

    Boas pessoal,

    comecei ontem a criar um portfolio para mim depois de ter passado as ultimas duas semanas a aprofundar os meus conhecimentos de programação web.

    Neste momento criei uma caixa onde meto a minha informação e esta caixa aparece em todas as páginas do portfolio. Contudo o que se passa é que consoante a quantidade de texto que meto dentro da caixa esta aumenta ou diminui de tamanho (neste caso para baixo). Eu queria fazer isto de forma a que tivesse o mesmo tamanho em todas as páginas e caso tivesse demasiado texto para o tamanho definido que fizesse scroll para baixo para se continuar a ler.



    Alguém me pode dar umas luzes de como fazer isto? Se precisarem posso meter partes do código que fiz :)
     
  2. DO2

    DO2 Power Member

    Hum... Sim mais ou menos. Vou ver se consigo fazer o que quero a partir desse código, senão já aqui tento especificar melhor =)

    Obrigado pela dica
     
  3. DO2

    DO2 Power Member

    Bem, não estou a conseguir fazer o que queria.

    Portanto, eu tenho o meu body envolto numa caixa e queria fazer com que todo o "site" ficasse dentro desta caixa, ou seja, à volta não vai haver mais nada. Contudo queria que esta caixa do body tivesse sempre o mesmo tamanho nas várias páginas e nas páginas com mais texto este faria scroll para continuar a ler.

    O meu código para o body e a caixa é o seguinte:

    Código:
    body {    background-color: #ccc;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 3% 10% 3% 10%;
        padding: 40px;
        overflow:scroll;
        overflow-x: hidden; 
        
        -webkit-box-shadow:
            inset #CCC 0 0 0 5px,
            inset #ccc 0 0 0 30px,
            inset #666 0 0 0 10px,
            inset #222 0 0 0 40px,
            inset #000 0 0 0 16px;
        -moz-box-shadow:
            inset #CCC 0 0 0 5px,
            inset #ccc 0 0 0 30px,
            inset #666 0 0 0 10px,
            inset #222 0 0 0 40px,
            inset #000 0 0 0 16px;
        box-shadow:
            inset #CCC 0 0 0 5px,
            inset #ccc 0 0 0 30px,
            inset #666 0 0 0 10px,
            inset #222 0 0 0 40px,
            inset #000 0 0 0 16px;
            
        -moz-border-radius-bottomright: 50px;
        -moz-border-radius-bottomleft: 50px;
        -moz-border-radius-topright: 50px;
        -moz-border-radius-topleft: 50px;
        border-bottom-right-radius: 50px;    
        border-bottom-left-radius: 50px;    
        border-top-right-radius: 50px;    
        border-top-left-radius: 50px;    
    
    
    /*    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;   
        box-sizing: border-box;        */
        
    
    
    }
    
    
    
    Não sei se é suficiente para perceberem :/

    [​IMG]

    Está aqui a imagem de como está o site. Eu queria essa caixa com tamanho fixo, para que o texto extra se visse com o scroll (como podem ver até a parte que meti com text de copyright está a ser tapado pois a caixa não ficou de tamanho fixo.
     
    Última edição: 16 de Agosto de 2012
  4. esaramago123

    esaramago123 Power Member

    Tens de dar uma altura específica à caixa.
     
  5. DO2

    DO2 Power Member

    Com o height certo? Eu tinha feito isso ha pouco. Não sei é como fazer para quando o texto for demasiado para fazer scroll... Pois aquela propriedade do overflow não parece resultar
     
  6. OldMan

    OldMan Power Member

    É essa propriedade do overflow que gere o scroll. Tens é que jogar com a altura, se não definires uma altura a caixa cresce por defeito até onde for preciso, e assim nunca vai ter scroll.
     
  7. DO2

    DO2 Power Member

    Pois, eu entendo, mas ja meti um determinado valor para a altura e meti bastante texto. O que acontece é que o texto simplesmente continua passando fora da caixa que fiz :S
     
  8. esaramago123

    esaramago123 Power Member

    Tens de mostrar o html também.
     
  9. DO2

    DO2 Power Member

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    <link href="estilos.css" rel="stylesheet" type="text/css" />
    <title>xxxx xxxxxx Portfolio - Education</title>
    </head>
    
    
    <body>
    
    
    <div class="headerBox">
    	<h1 class="header">xxxxx xxxxxxxx Portfolio</h1>
        <div id="navcontainer">
        <ul>
        	<li>Education | </li>
            <li>Interests | </li>
            <li>Works and Projects | </li>
            <li>Contacts</li>
        </ul>
        </div>
        <div class="clear"></div>
    </div>
    <h2 id="descriptionHeader">Education</h2>
    
    
    <div id="infoPlacement">
    <dl>
        <dt>High School</dt>
            <dd>xxxxxx yyyyyyyyyy zzzzzzzzzz, Portugal							</dd>
    
    
        <dt>College</dt>
        	<dd>University of Lisbon's Faculty of Sciences</dd>
            <dd>xxxx xxxxxx xyyyyyyyyyyyy</dd>
        <dt>Languages</dt>
            <dd>Portuguese as natural language</dd>
            <dd>zzzzzzzzzz zzzzzzzzzzzzz zzzzzzzzz</dd>
        	<dd>Obtained the First Certificate of English and Certificate of Advanced English from the British Council</dd>
    
    
    </dl>
    </div>
    
    
    <p>
    Obtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British CouncilObtained the First Certificate of English and Certificate of Advanced English from the British Council
    </p>
    <p id="copyright">
    This website and its content is copyright of xxxxx xxxxxxx - © xxxxx xxxxxxx 2012. All rights reserved.</p>
    </body>
    </html>
    
    
    
    Está aqui o HTML que estou a usar para uma das páginas. Peço desculpa por ocultar a informação, mas sou um bocado "supersticioso" quanto a divulgar informação e dados pessoais em fórums alheios :) Esse paragrafo que meti no final é para ver se fica dentro da caixa e se faz scroll
     
  10. Mutsu

    Mutsu Power Member

    Haverá outras possibilidades, claro, mas vê lá esta que me surgiu.

    No HTML acrescentas uma div, imediatamente depois do body, que incluirá todo o teu conteúdo do site. Eu dei-lhe o nome de box-container.
    O body fará uma moldura e essa div vai fazer o scroll:

    Quanto ao CSS, fiz maiores mudanças. Posso estar enganado, mas não me parece que precises de usar o box-shadow para o que estavas a querer fazer. Simplesmente o elemento border fará o que pretendes com muito menos código:

     
    Última edição: 17 de Agosto de 2012

Partilhar esta Página