Problème de disposition et d'arrière plan

Sujet résolu

3 novembre 2006 à 0:38:42

Bonjour,

Je débute en ce moment dans la création de site web et je suis actuellement en train de m'entraîner. Pour vous expliquer mon problème je vous donne cette image.
Image utilisateur

C'est à peu près la base de ma page web. J'ai donc créé deux <div> le premier permet de faire le cadre noir, je lui attribue donc l'arrière plan noir puis je créé le deuxième <div> dans le premier et je lui met la propriété CSS "margin: 15px;". Mais ce dernier <div> ne veut pas s'afficher dans le cadre noir et je n'arrive pas à faire les coins arrondis de ce cadre!

Voilà mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>DVP U&Y</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Black (par défaut)" href="design_black.css" />
<link rel="alternate stylesheet" media="screen" type="text/css" title="Nature" href="design_nature.css" />
</head>
<body>
<div id="en_tete">
<div id="banniere">
</div>
</div>

<div id="menu">
<ul>
<li><a href="index.html" title="Accueil du site DVP U&Y">Accueil</a></li>
<li><a href="downloads.html" title="Page de téléchargements">Téléchargements</a></li>
<li><a href="infos.html" title="Infos sur le site web et l'équipe">Le site</a></li>
</ul>
</div>

<div id="corps">

</div>

<div id="pied_de_page">

</div>
</body>
</html>

Le CSS :

body
{
width: 760px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
}

#en_tete
{
width: 760px;
height: 100px;
background-color: black;
margin-bottom: 20px;
}

#banniere
{
margin: 15px;
background-color: gray;
}

#menu
{
float: left;
width: 140px;
}

#corps
{

}

#pied_de_page
{

}

#menu a
{
color: black;
text-decoration: none;
}

#menu a:hover
{
text-decoration: underline
}

#menu ul
{
list-style-type: none;
}

#menu li:hover
{
list-style-image: url("images/logo_petit.bmp");
}

Comme vous pouvez le voir je n'en suis vraiment qu'au tout début!
Merci de vos réponses

'Titi

3 novembre 2006 à 0:43:51

J'ai pas bien compris ce que tu veux faire, peux-tu être plus clair et précis ?

Je pense que c'est dû au fait que tu ne définies pas de hauteur / largeur au deuxième <div>

Nesk

3 novembre 2006 à 0:54:04

Je vuex simplement créé un cadre (noir

) avec des arrondis mais je ne sait trop comment faire ces arrondis. Dans ce cadre j'en créé un autre (gris) dans lequel j'écrirais mon texte, seulement le cadre ne s'adapte pas à la taille de celui qui est noir alors que j'ai fait un "margin: 15px;".

En fait pour être plus clair je voudrais que les deux cadres s'agrandissent en hauteur au fur et mesure que j'écris du texte, seulement il faut que les deux cadres continuent à avoir la même disposition...

'Titi

3 novembre 2006 à 1:06:11

Alors pour commencer, ton gros block doit avoir une marge intérieur padding: 5px;
Je donne 5px pour exemple après c'est toi qui vois.

Ensuite, à ton deuxième block, tu attribues un margin: auto; pour le centrer à l'intérieur du block noir.

#block_1
{
width: 200px;
border: 2px solid black;
padding: 5px;
background-color: black;
}

#block_2
{
margin: auto;
width: 180px;
border: 2px solid black;
background-color: grey;
padding: 5px;
}

Comme tu peux le remarquer, on ne doit pas attribuer de hauteur, sinon il ne serait plus extensible.

Voilà à quoi ça ressemble :

Image utilisateur

Bien entendu je parle juste des blocks, pas de leur position dans la page.
Et bien entendu, à plus le bla bla augmente, plus les cadres s'allongent.

Nesk

3 novembre 2006 à 10:16:47

Merci j'essaye ça tout de suite

!

EDIT : ça marche

!!! Merci!

Maintenant deuxième question plus simple! Comment je peux faire mes deux arrondis sur le cadre noir? J'ai déjà fait deux arrondis dans deux images pour ensuite les placer sur le cadre noir mais je n'arrive pas à les placer.

Nesk

4 novembre 2006 à 21:21:14

up!