Div avec un en-tête

Je veux créer un <div> qui a une étiquette/en-tête affichée en majuscules. Le <div> est 250px large.Div avec un en-tête

À l'intérieur du <div>, je vais placer un autre <div> qui contiendra des contrôles. Ce <div> intérieur devrait être aligné center et l'extérieur <div> devrait augmenter automatiquement sa hauteur pour s'adapter à la hauteur des contrôles.

L'extérieur <div> et l'intérieur <div> doivent avoir une bordure.

Est-ce possible avec CSS?

Source

2009-12-29 ScG

Avez-vous déjà trouvé dehors? J'ai mis en place une démo de ma réponse pour que vous puissiez vérifier. Si ce n'est pas ce que vous attendiez, veuillez fournir plus d'informations. http://pastebin.me/42c81f55638f9adf9a4d614cac207db7 –

Je ne sais pas ce que vous demandez, mais peut-être que cela vous aidera?

<!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> 
     <title>example</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <style> 
      div#wrapper { display:block; width:250px; height:auto; margin:auto; padding:0; border:1px solid #F00; } 
      div#wrapper h1 { text-transform:uppercase; text-align:center; } 
      div#controls { display:block; width:100%; height:100px; margin:0; padding:0; border:1px solid #000; text-align:center; } 
      div#controls a { display:inline; margin:0 5px; line-height:100px; } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <h1>header</h1> 
      <div id="controls"> 
       <a href="#">control</a> 
       <a href="#">control</a> 
       <a href="#">control</a> 
      </div> 
     </div> 
    </body> 
</html>

Source

2009-12-29 07:16:17

Vous voulez dire comme ça?

<style type="text/css"> 
    .panel { width: 250px; padding: 5px; border: 1px solid #666; } 
    .panel h1 { margin: 0 0 5px; padding: 0; text-transform: uppercase; } 
    .panel .content { padding: 5px; border: 1px solid #666; } 
</style> 
<div class="panel"> 
    <h1>Title</h1> 
    <div class="content"> 
     ... controls ... 
    </div> 
</div>

Source

2009-12-29 07:20:02

Div avec un en-tête

Répondre

Questions connexes