Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Frankie Hummel

Como posicionar um título em div

Por , em Desenvolvimento frontend

Recommended Posts

Frankie Hummel    0

Frankie Hummel
Postado

Olá pessoal,

 

Preciso criar um content box já tenho 80% do código pronto porém cada content box preciso inserir um cabeçalho ou título, mas não sei como fazer. Meu código HTML e CSS segue abaixo:

<!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" />
<title>Untitled Document</title>
<style type="text/css">


#verysimplebox{
width: 200px;
height: 200px;
background-color: #FFFFFF;
border: solid 1px #CCCCCC;
padding: 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}

</style>
</head>

<body>
<div id="verysimplebox">Here’s my box</div>
</body>
</html>

Segue imagem do que eu to precisando fazerimagem.jpg

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Você pode usar a propriedade "text-align:center". Mas tanto o titulo quanto o conteúdo serão centralizados. Uma forma que eu faria, seria assim:

 

Resultado: http://jsfiddle.net/rnxn/Q9uzz/1/embedded/result/

<div class = 'simple-box'>
    <header>Here's my Box</header>
    <span class = 'box-content'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Ut varius est sit amet dapibus sodales. 
        Aliquam tincidunt libero nisl. 
    </span>
</div>

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.simple-box {
    width: 300px;
    background #fff;
    border: 1px solid #ccc;
    padding-bottom: 15px;
    border-radius: 8px;
}

.simple-box header,
.simple-box .box-content {
    display: block;
    width: 100%;
}

.simple-box header {
    background: #EBEBEB;
    border-radius: 8px 8px 0 0;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
}

.box-content {
    background: #fff;
    padding: 10px;
}

OPS...

A minha primeira solução mostra uma barra cinza na parte inferior (mas até que ficou bonitinha, rs). Para não mostrá-la e a 'simple-box' ter o corpo todo branco:

 

Resultado: http://jsfiddle.net/rnxn/Q9uzz/2/embedded/result/

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.simple-box {
    width: 300px;
    background #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
}

.simple-box header,
.simple-box .box-content {
    display: block;
    width: 100%;
}

.simple-box header {
    background: #EBEBEB;
    border-radius: 8px 8px 0 0;
    padding: 10px 0;
    text-align: center;
    text-transform: uppercase;
}

.box-content {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 10px 10px 10px 15px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito