Bonjour,
Tous d'abord je tien a m'escuser car je ne pense pas que mon sujet soit dans le thême approprié mais je vien juste de m'inscrire.
J'ai une question a posé qui est de savoir commen je peut faire pour qu'une DIV puisse s'adapter a la taille du contenu texte de ma DIV.
Je voudrait que la DIV bandeau_3 qui contient la DIV principal_3 puisse s'agrandir en fonction du contenu que je met dans la DIV principal_3 sans changer les proportion de toutes les autres DIV.
Voici le code html:
Code HTML :
<html>
<head>
<!-- LIEN CSS --><link href="style.css" rel="stylesheet" type="text/css">
<title>Partage</title>
<script language="JavaScript">
bouton1 = new Image();
bouton1.src = "images/bouton_php-vert.jpg";
bouton2 = new Image();
bouton2.src = "bouton_bioperl_gris.jpg";
bouton3 = new Image();
bouton3.src = "images/bouton_css_violet.jpg";
bouton4 = new Image();
bouton4.src = "images/bouton_html_cyan.jpg";
bouton5 = new Image();
bouton5.src = "images/bouton_java_bleu.jpg";
bouton6 = new Image();
bouton6.src = "images/bouton_javascript_rouge.jpg";
bouton7 = new Image();
bouton7.src = "images/bouton_perl_rouge.jpg";
</script>
</head>
<body>
<div id="bandeau_1">
<div id="principal_1">
<img src="images/logo_partage.jpg" height="100%" width="45%"></img>
</div>
</div>
<div id="bandeau_2">
<div id="principal_2">
<a href="#" onmouseover="bouton1.src = 'images/bouton_php_rouge.jpg';" onmouseout="bouton1.src = 'images/bouton_php_vert.jpg';"><img src="images/bouton_php_vert.jpg" height="100%" width="70px" align="left" border=0 name=bouton1></a>
<a href="#" onmouseover="bouton3.src = 'images/bouton_css_noir.jpg';" onmouseout="bouton3.src = 'images/bouton_css_pourpre.jpg';"><img src="images/bouton_css_pourpre.jpg" height="100%" width="70px" align="left" border=0 name=bouton3></a>
<a href="#" onmouseover="bouton4.src = 'images/bouton_html_violet.jpg';" onmouseout="bouton4.src = 'images/bouton_html_cyan.jpg';"><img src="images/bouton_html_cyan.jpg" height="100%" width="70px" align="left" border=0 name=bouton4></a>
<a href="#" onmouseover="bouton5.src = 'images/bouton_java_marron.jpg';" onmouseout="bouton5.src = 'images/bouton_java_bleu.jpg';"><img src="images/bouton_java_bleu.jpg" height="100%" width="70px" align="left" border=0 name=bouton5></a>
<a href="#" onmouseover="bouton6.src = 'images/bouton_javascript_bleu.jpg';" onmouseout="bouton6.src = 'images/bouton_javascript_rouge.jpg';"><img src="images/bouton_javascript_rouge.jpg" height="100%" width="70px" align="left" border=0 name=bouton6></a>
<a href="#" onmouseover="bouton7.src = 'images/bouton_perl_vert.jpg';" onmouseout="bouton7.src = 'images/bouton_perl_rouge.jpg';"><img src="images/bouton_perl_rouge.jpg" height="100%" width="70px" align="left" border=0 name=bouton7></a>
<a href="#" onmouseover="bouton2.src = 'images/bouton_bioperl_gris.jpg';" onmouseout="bouton2.src = 'images/bouton_bioperl_violet.jpg';"><img src="images/bouton_bioperl_violet.jpg" height="100%" width="70px" align="left" border=0 name=bouton2></a>
</div>
</div>
<div id="bandeau_3">
<div id="principal_3">
</div>
</div>
<div id="bandeau_4">
<br /><br /><br /><br />
<center>
<font color="white">
<a href="#"><font color="white">Aide</font></a>  -  
<a href="#"><font color="white">Contact</font></a>
</font>
</center>
<div id="principal_4">
</div>
</div>
</body>
</html>
et voici le code css :
Code :
body {
overflow:auto;
}
div#bandeau_1 {
position:absolute;
top:0%;
left:0%;
height:20%;
width:100%;
background:#5EB6DD;
}
div#bandeau_2 {
position:absolute;
top:20%;
left:0%;
height:5%;
width:100%;
background-color:#333641;
}
div#bandeau_3 {
position:absolute;
top:25%;
left:0%;
height:60%;
width:100%;
background-color:#5EB6DD;
}
div#bandeau_4 {
position:absolute;
top:85%;
left:0%;
height:15%;
width:100%;
background-color:#333641;
}
div#principal_1 {
text-align:center;
position:absolute;
top:30%;
height:70%;
width:50%;
min-width:700px;
background-color:white;
;
border-top-left-radius:10px;
border-top-right-radius:10px;
margin-left:25%;
margin-right:25%;
}
div#principal_2 {
position:float;
height:100%;
top:0%;
width:50%;
min-width:700px;
background-color:#333641;
margin-left:25%;
margin-right:25%;
}
div#principal_3 {
position:float;
height:100%;
width:50%;
min-width:700px;
background-color:white;
margin-left:25%;
margin-right:25%;
}
div#principal_4 {
position:absolute;
height:50%;
top:0%;
width:50%;
min-width:700px;
background-color:white;
;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-left:25%;
margin-right:25%;
}
Merci d'avance