Bonjour,
Lorsque je veux redimensionner ma fenêtre, j'ai un problème au niveau de mon tableau et de mon menu, ils ne se redimensionnent pas.
Voici mon code HTML:
Et voici un bout de mon code CSS:
Comment faire pour que mon tableau et mon menu se redimensionnent correctement?
Merci.
Lorsque je veux redimensionner ma fenêtre, j'ai un problème au niveau de mon tableau et de mon menu, ils ne se redimensionnent pas.
Voici mon code HTML:
<div id="main">
<div id="text_border">
...
</div>
<div id="header">
...
</div>
<div id="content">
<div id="leftcontent">
[#red]<ul id="folders">
<li>
<a class="selected" href="produits.html">
<img src="images/folder_icon.png" />
<p id="lien1">Produits</p>
</a>
</li>
<li>
<a href="lieux.html">
<img src="images/folder_icon.png" />
<p id="lien2">Lieux</p>
</a>
</li>
<li>
<a href="medias.html">
<img src="images/folder_icon.png" />
<p id="lien3">Médias</p>
</a>
</li>
</ul>
<div id="operations">
<h3>Opérations en cours</h3>
<table>
<tr>
<td>chardonay.jpg</td>
<td>Uploaded</td>
</tr>
<tr>
<td>riesling.jpg</td>
<td>Uploaded</td>
</tr>
<tr>
<td>sauterne.jpg</td>
<td>58%<td>
</tr>
<tr>
<td>grandcrubrand.jpg</td>
<td>25%</td>
</tr>
<tr>
<td>grandcrufroehn.jpg</td>
<td>12%</td>
</tr>
</table>
</div>[/#]
</div>
<div id="maincontent">
...
</div>
</div>
</div>
Et voici un bout de mon code CSS:
body
{
border: 5px solid ForestGreen;
float: left;
width: 100%;
}
#main
{
width: 75%;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#content
{
float: left;
}
#leftcontent
{
width: 25%;
float: left;
}
ul#folders a
{
text-decoration: none;
color: #2281CF;
}
ul#folders li
{
list-style-type: none;
width: 50%;
margin-bottom: 5px;
}
ul#folders li p
{
float: right;
margin-top: 5px;
margin-bottom: 5px;
}
ul#folders li p#lien1
{
margin-right: 25px;
}
ul#folders li p#lien2
{
margin-right: 57px;
}
ul#folders li p#lien3
{
margin-right: 43px;
}
#leftcontent .selected
{
color: black;
font-weight: bold;
}
ul#folders li img
{
width: 20%;
}
#operations
{
margin-top: 100px;
width: 80%;
}
#operations h3
{
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
height: 30px;
line-height: 30px;
background-color: rgb(32,32,32);
color: white;
margin-left: auto;
margin-right: auto;
}
#operations table
{
width: 100%;
border: 1px solid silver;
}
#operations table, #operations table tr
{
border-collapse: collapse;
border-bottom: 1px solid silver;
}
#operations td
{
padding-right: 0px;
padding-left: 0px;
}
Comment faire pour que mon tableau et mon menu se redimensionnent correctement?
Merci.