A voir également:
- Bloc div HTML
- Editeur html - Télécharger - HTML
- Bloc-notes (windows) - Télécharger - Traitement de texte
- Code bloc - Télécharger - Langages
- Br html ✓ - Forum Webmastering
- Div c++ - Télécharger - Langages
7 réponses
Tu peux le faire en CSS.
Tu met
Tu remplace ### par ce que tu veux.
Dans la feuille de style:
Tu remplace #valeur# par une valeur numérique qui correspondra à ta largeur. Les deux div ayant le même class="" auront la même largeur.
Toutefois, si tu veux une largeur non fixe, tu peux remplacer #valeur#px par #valeur#% en ayant un pourcentage à la place (j'ai jamais testé personnellement, donc je sais pas ce que ça peu donner). Je vois en tout cas pas comment faire autrement.
Tu met
<div class="###">
Tu remplace ### par ce que tu veux.
Dans la feuille de style:
div.###{width:#valeur#px;}
Tu remplace #valeur# par une valeur numérique qui correspondra à ta largeur. Les deux div ayant le même class="" auront la même largeur.
Toutefois, si tu veux une largeur non fixe, tu peux remplacer #valeur#px par #valeur#% en ayant un pourcentage à la place (j'ai jamais testé personnellement, donc je sais pas ce que ça peu donner). Je vois en tout cas pas comment faire autrement.
Jorge
sa existe pas une instruction qui lui dirait de copier la valeur que prend le bloc voisin, comme sa il s ajuste en fonction de l'autre ...
enfaite c un block qui fait office de menu et l autre de corps, je me ss inspirer du siteduzero :p mais voila j aimerai que le menu s ajuste en fonction du corps
salut
tu as essayé de faire un width en % ou dans le genre ,
avec un margin auto ou center machin truc , dsl je n ai plus ouvert une page de code depuis un an :) trop occupé
tu as essayé de faire un width en % ou dans le genre ,
avec un margin auto ou center machin truc , dsl je n ai plus ouvert une page de code depuis un an :) trop occupé
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
moi je vois un truc du genre
<div id="corps">
<div class="menu"></div]
<div class="xxxx"></div>
</div]
dans le css
un float left du menu et un réglage en % des deux .class
le div corps si besoin un réglage de la même maniére
de ce que je comprend , tu veux avoir deux bloc de même largeur suivant la résolution de l'écran?
essais de faire un 47% en gros , évite les 50 % qui peuvent être mal interprétés par IE suivant si tu as un bord etc..
Mais oui pose ton code ici
<div id="corps">
<div class="menu"></div]
<div class="xxxx"></div>
</div]
dans le css
un float left du menu et un réglage en % des deux .class
le div corps si besoin un réglage de la même maniére
de ce que je comprend , tu veux avoir deux bloc de même largeur suivant la résolution de l'écran?
essais de faire un 47% en gros , évite les 50 % qui peuvent être mal interprétés par IE suivant si tu as un bord etc..
Mais oui pose ton code ici
Donc voila le HTML et y a le CSS qui suit :
<!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>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="../style.css">
</head>
<body>
<div id="en_tete">
<img src="../image/b.jpg" alt="Banniere du site">
</div>
<div id="menu">
<ul class=style_lien_menu>
<li><a href="www.google.be">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">-Lien</a></li>
</ul>
</div>
<div id="corps">
<h1 class="titre">Accueil</h1>
<img class="image_grande"src="../image/JO_Atlanta_1996_-_Boxe.jpg"alt="JO Atlanta 1996">
</div>
</body>
</html>
------------------------------------------------------
Le CSS :
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: black;
}
/* L'en-tête */
#en_tete
{
width: 700px;
height: 100px;
margin-bottom: 10px;
margin-left: 90px;/*Pour que la banniere soit alignee avec le corps*/
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
background-color: #B60000;
border: 2px solid white;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
overflow:auto;
}
.style_lien_menu{
margin-left:6px;
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
}
.titre{
text-align:center;
font-family: Arial;
}
.image_grande{
width: 300px;
align:center;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: white;
background-color: #B60000; /* Une couleur de fond pour le corps */
border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #FF0000;
}
<!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>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" rel="stylesheet" href="../style.css">
</head>
<body>
<div id="en_tete">
<img src="../image/b.jpg" alt="Banniere du site">
</div>
<div id="menu">
<ul class=style_lien_menu>
<li><a href="www.google.be">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">- Lien</a></li>
<li><a href="page1.html">-Lien</a></li>
</ul>
</div>
<div id="corps">
<h1 class="titre">Accueil</h1>
<img class="image_grande"src="../image/JO_Atlanta_1996_-_Boxe.jpg"alt="JO Atlanta 1996">
</div>
</body>
</html>
------------------------------------------------------
Le CSS :
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-color: black;
}
/* L'en-tête */
#en_tete
{
width: 700px;
height: 100px;
margin-bottom: 10px;
margin-left: 90px;/*Pour que la banniere soit alignee avec le corps*/
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
background-color: #B60000;
border: 2px solid white;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
overflow:auto;
}
.style_lien_menu{
margin-left:6px;
font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif;
list-style-type: none;
}
.titre{
text-align:center;
font-family: Arial;
}
.image_grande{
width: 300px;
align:center;
}
#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: white;
background-color: #B60000; /* Une couleur de fond pour le corps */
border: 2px solid white; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: underline;
color: #000000;
}
a:active {
text-decoration: none;
color: #FF0000;
}