18041 sujets

Questions générales et questions de débutants

Taille <div>

Bonsoir à toutes et à tous !

Je rencontre un petit soucis, qui s'apparente à un casse-tête.

Cette page ( http://drfv2.free.fr/15.html ) est composée de deux <div>, l'une appelée "menu", l'autre "centre". Je souhaite arriver à ce que ces deux <div> aient la même largeur. Pour le moment, la <div> "menu" a la largeur de la fenêtre, et s'arrête donc avant la <div> "centre" dans le cas où celle-ci est plus large. Et bien sur, cela ne fait pas très joli.

Auriez-vous une idée pour résoudre ce petit soucis ?

Merci d'avance à celles et ceux qui pourront m'aider !

Frd

Edit : Tellement la tête dans le guidon que j'en oublie le code... Désolé Smiley confused 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Strangers on a train, 3</title>
<link rel="stylesheet" type="text/css" href="drfv2style.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" >
</head>
<body>
<div id="menu">
<a href="http://drfv2.free.fr/14.html" class="lien">Previous</a>   |   <a href="#" class="lien">About</a>   |   <a href="#" class="lien">Links</a>
</div>
<div id="centre">
<img class="main" src="http://drfv2.free.fr/images/drf15.jpg" width="1163" height="642" alt="15" />
</div>
</body>
</html>


Ainsi que le CSS :

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
margin: 0;
padding: 0;
background-color: #999999;
}
#menu {
width: 100%;
background: #333333;
padding: 20px;
border-bottom: 2px solid gray;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
background: #333333;
}
#centre {
margin: 10px;
padding: 10px;
background-color:#999999;
}
#pied {
height: 50px;
background-color:#999999;
}
#video {
width: 640px;
height: 496px;
border : 10px solid #FFFFFF;
}
img.main {
border : 10px solid #FFFFFF;
}
img.titre {
border : 0;
}

Modifié par Frd (09 Dec 2006 - 19:23)
Bonjour,

Le problème vient de la taille de ton image (1163px) qui agrandit forcément le cadre dans lequel il se trouve.

La solution, donc, réduire la taille de ton image à, par exemple, 930px de large.
Merci pour ton aide Benjamin. En effet, cela vient de là Smiley biggrin

Y a-t-il cependant un moyen de parvenir à ce que les deux <div> aient la même largeur, mais en agrandissant la <div> "menu" ? (En dehors de la possibilité d'appliquer à cette dernière le nombre de pixels suffisants pour qu'elle ait cette même longueur)

Edit: En y repensant, diminuer la taille de l'image ne ferait peut-être que "déplacer" le soucis, puisque la <div> "menu" a une largeur différente selon la résolution de l'écran, et peut donc avec une autre résolution, être de nouveau plus petite que l'image (si je ne me trompe pas ?).
Modifié par Frd (09 Dec 2006 - 18:31)
La tête dans le guidon, j'avais mis "width: 100%;" pour que celle-ci parcoure... 100% de la fenêtre. En effet, c'est complètement inutile Smiley confused

Du coup, je suis un peu perdu. Cela veut-il dire que le choix de la balise <div> n'est pas le plus judicieux dans cette circonstance ? J'avoue que mis à part la balise <div>, je ne saurais même pas comment faire pour ajouter de la structure à un document. Du coup, ça me perd un peu là... Smiley confused
Frd a écrit :
Cela veut-il dire que le choix de la balise <div> n'est pas le plus judicieux dans cette circonstance ?
Là en l'occurence, ce n'est en effet pas le choix le plus judicieux: une liste non ordonnée (ul) serait plus indiquée.

Frd a écrit :
J'avoue que mis à part la balise <div>, je ne saurais même pas comment faire pour ajouter de la structure à un document. Du coup, ça me perd un peu là... Smiley confused
C'est bien ce que je pensais: il s'agit d'un problème de fond que tu peux, si tu le désires, résoudre grâce aux nombreux tutoriels et aides en ligne disponbles notamment sur alsacrations et openweb pour ne citer qu'eux. T'aider à résoudre des problèmes mineurs/basiques ne te fera pas beaucoup avancer Smiley cligne
Oh, je suis loin d'être feignant. J'ai des fois tendance à vouloir trop "bricoler" certaines choses.

Donc, une balise <ul> serait mieux indiquée qu'une balise <div>. Merci beaucoup pour ce conseil. Je vais également jeter un coup d'oeil aux tutoriels, et retrousser mes petites manches.

Merci pour ces éléments, je reviendrais d'ici quelques jours avec, je l'espère, un [Résolu] dans mon titre Smiley biggrin
Me revoili, me revoilou.

J'espère que vous avez tous passé un bon week-end Smiley biggrin

Comme me l'a conseillé Benjamin, j'ai donc remplacé la balise <div> par une balise <ul>, et voici ce que cela donne pour le moment :

http://drfv2.free.fr/menu02.html

(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Essai Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style type="text/css">
<!--
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
margin: 0;
padding: 0;
background-color: #999999;
}

#one {
list-style-type: none;
margin: 0;
padding: 0;
}

#one li {
float:left;
margin: 0;
padding: 20px;
background-color: #333333;
border-bottom: 2px solid gray;
}

#centre {
margin: 20px;
padding: 20px;
background-color:#999999;
}

img.main {
border : 10px solid #FFFFFF;
}

-->
</style>
</head>
<body>
<ul id="one">
<li>Previous</li>
<li>Next</li>
<li>About</li>

<li>Links</li>
</ul>
<br/><br/>
<div id="centre">
<img class="main" src="http://drfv2.free.fr/images/drf15.jpg" width="1163" height="642" alt="15" />
</div>
</body>
</html>

)

À titre d'information, voici ce à quoi je souhaite parvenir : (bricolé sans autre forme de procès)

http://drfv2.free.fr/15test.html

J'ai pensé à la limite (serais-je en train de me compliquer la vie ?) à une solution javascript pour récupérer la taille de l'image du bas, et adapter ensuite la taille de l'élément du haut en fonction de celle-ci. Mais j'ai quand même le sentiment que cela serait compliqué.

Cela avance doucement, mais pour le moment je n'ai toujours pas trouvé le moyen d'étaler ce menu sur toute la largeur de la page.
Sujet clos
Aller à