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

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 :)
 
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
 
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 :/

bodybox.png


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:
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
 
É 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.
 
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
 
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
 
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:

<body>

<div class="box-container">
 ...
... aqui todo o conteúdo ...
...
</div> <!-- fim box-container -->

</body>
Clicar para expandir...

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:

body{
background-color: #ccc;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 3% 10% 3% 10%;

padding:40px; /* dá algum espaço para o conteúdo da div não se colar à moldura do border */
 padding-right:0px; /* aqui puxamos a barra de scroll da div para junto da border-right do body, pois caso contrário ficaria mal termos o scroll lá no meio*/
-moz-border-radius: 20px;
border-radius: 20px;
border:10px black solid;
}

.box-container {
overflow:auto; /* se quiseres que apareça sempre barra de scroll, então muda para scroll, como tinhas */

padding-right:40px; /* aqui estamos a puxar o conteúdo da div para não ficar colado à barra de scroll. repara que é o mesmo padding que o do body. Se mudares o do body, mudas para igual valor aqui também*/
height:400px; /* esta altura será a que pretenderes para a tua "caixa". Os 400px são só um exemplo*/
}
Clicar para expandir...
 
Última edição:
Inicie sessão ou registe-se para poder participar.
Back
Topo