Bloc div HTML
Jorge
-
Jorge -
Jorge -
Bonjour,
enfaite j ai 2 blox div l'un a cote de l autre et j'aimerai que les 2 soit de taille égale, mais il ne faut pas une taille fixe et je ne sais pas comment faire, qulqun a t il une idee ?
enfaite j ai 2 blox div l'un a cote de l autre et j'aimerai que les 2 soit de taille égale, mais il ne faut pas une taille fixe et je ne sais pas comment faire, qulqun a t il une idee ?
Configuration: Windows XP Internet Explorer 7.0
7 réponses
-
Tu peux le faire en CSS.
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. -
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é -
-
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 -
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;
} -
