Bonjour,
Je voudrai mettre mon site en 2 colonnes, ça le fait bien ais dès lors que j'essai de changer la taille de la colonne "aside", ça fait n'importe quoi.
Mon code est le suivant :
HTML :
[code]
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<title>Music City Grid</title>
<!--[if lt IE9]>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"
</script>
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<article>
<header>
<img src="images/header.jpg" alt="Music City Grid" title="Music City Grid ">
<div id="logo"><a href="index.php"><img src="images/logo.png" alt="Music City Grid - Accueil" title="Music City Grid - Accueil"></a></div>
<div id="slogan">+++ Toute l'info sur le son UNDERGROUND +++</div>
<nav>
<ul>
<li><a href="albums-mois.php" alt="L'album du mois" title="L'album du mois">Album du mois</a></li>
<li><a href="best-of.php" alt="Le Best-of" title="Le Best-of">Best of</a></li>
<li><a href="contrib.php" alt="Contribuez, donnez des sous" title="Contribuez, donnez des sous">Contribuez</a></li>
</ul>
</nav>
</header>
<!-- DEBUT contenu centre de la page -->
<section class="album">
<h1>ALBUM DU MOIS</h1>
<img src="images/artiste-mois.jpg" alt="Album du mois" title="Album du mois ">
<h2> - SUPER GUITAR BAND - <span class="label">Heils Hammer Music</span></h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.<br>
Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par</p><br>
<h3>L'avis de la rédac</h3>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p><br>
<div id="achats">
<ul class="cell">
<p class="achat">ACHETER LE DISQUE</p>
<li><a href="http://www.fnac.com" target="_blank"><img src="images/logo-fnac.png" alt="Acheter à la FNAC" title="Acheter à la FNAC"></a></li>
<li><a href="http://www.amazone.com" target="_blank"><img src="images/logo-amazone.jpg" alt="Acheter chez AMAZONE" title="Acheter chez AMAZONE"></a></li>
<li><a href="http://www.itunes.com" target="_blank"><img src="images/logo-itunes.jpg" alt="Acheter sur iTunes" title="Acheter sur iTunes"></a></li>
</ul>
</div>
</section>
<aside>
<h1>PROCHAINES SORTIES</h1>
<h3>DATE DE SORTIE</h3>
<h2>ALBUM - Giédré</h2>
<img src="images/sortie-album-1.jpg" alt="Giédré - Je suis grosse et moche" title="Giédré - Je suis grosse et moche">
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
<h1>PROCHAINES SORTIES</h1>
<h3>DATE DE SORTIE</h3>
<h2>ALBUM - Didier Super</h2>
<img src="images/sortie-album-2.jpg" alt="Didier Super - Monde de merde" title="Didier Super - Monde de merde">
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</p>
<div id="newsleter">
<form action="#" method="post">
<fieldset><legend>Abonnez-vous à la newsletter</legend>
<label for="email"></label>
<input type="text" id="email" name="email">
<input type="submit" NAME="nom" VALUE=" Envoyer ">
<input type="reset" NAME="nom" VALUE=" Annuler ">
</fieldset>
</form>
</div>
</aside>
<hr>
<h1>A ECOUTER D'URGENCE</h1>
<section class="players">
<audio></audio>
<audio></audio>
<audio></audio>
</section>
<!-- FIN : contenu centre de la page -->
<hr>
<footer>
<ul>
<li><a href="http://www.twitter.com" target="_blank"><img src="images/logo-twitter.png" alt="Twitter" title="Twitter"></a></li>
<li><a href="http://www.facebook.com" target="_blank"><img src="images/logo-facebook.png" alt="Facebook" title="Facebook"></a></li>
<li><a href="http://www.pinterest.com" target="_blank"><img src="images/logo-pinterest.png" alt="Pinterest" title="Pinterest"></a></li>
</ul>
</footer>
</article>
</body>
</html>
[/code]
Mon CSS :
[code]
* { margin: 0; padding: 0; outline: 0; }
body {
font-family: arial, helvetica, sans-serif;
color: #000;
background-image: url(../images/fond.jpg);
background-repeat:repeat;
}
article {
max-width:906px;
margin: auto;
}
/* HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER */
div[id="logo"] {
margin: -100px 0 0 25px;
}
div[id="slogan"] {
margin: -87px 0 0 300px;
}
/* NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV NAV */
nav ul { /* fond du menu */
float:right;
position: relative;
top: 9px;
left: 0px;
width: 288px;
height: 23px;
padding-top: 0px;
background-color : #FFA200;
border: 1px solid #000;
}
nav ul hover {
background-color : red;
}
nav ul li + li { /* espacement entre les textes du menu */
margin-left: 40px;
}
nav ul li:first-child { /* Bouton "Album du mois" */
margin-left: 10px;
}
nav ul li { /* alignement horizontal des textes du menu */
display: inline-block;
}
nav ul li a { /* paramétrage des textes du menu */
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000;
text-decoration: none;
}
/* GENERALITE GENERALITE GENERALITE GENERALITE GENERALITE GENERALITE */
h1 {
font-family: arial, helvetica, sans-serif;
font-size: 24px;
color: #000;
}
h2 {
font-family: arial, helvetica, sans-serif;
font-size: 18px;
color: #000;
}
h3 {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: #555;
}
.label {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
font-style:italic;
color:#c70000;
}
p {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: #000;
}
.cell {
display: table-cell;
}
li {
text-decoration: none;
}
/* SECTION album du mois SECTION album du mois SECTION album du mois */
section.album {
float:left;
display: table;
width: 546px;
height: 155px;
margin: 80px 0 0 25px;
}
section.album h2 {
margin: -25px 0 25px 0;
padding-left: 120px;
background-color: #fff;
opacity:0.5;
}
section.album p {
text-align: justify;
}
section.album h3 {
margin-bottom: 10px;
}
ul.cell{
border: 1px dotted #ccc;
text-align: center;
width: 546px;
height: 8px;
}
section.album li {
display: inline-block;
margin: 10px 0 10px 20px;
}
section p.achat {
padding: 10px 0 0 10px;
}
/* ASIDE ASIDE ASIDE ASIDE ASIDE ASIDE ASIDE ASIDE ASIDE ASIDE */
aside {
margin-top: 80px;
}
aside img{
float:left;
}
fieldset {
border-radius: 10px 10px 10px 10px;
width: 300px;
padding: 10px;
border: 1px, solid #FFA200;
}
input {
vertical-align: top;
}
[/code]
Merci d'avance pour votre aide.
