Bonjour,
Je cherche a faire un mise en page un peu particulière:
Voici le HTML:
et le CSS:
En gros ce que je voudrais c'est afficher dans mon corps des div(albumpan) sur 2 colonnes.
Les div albumpan sont eux meme composés de 2 colonnes :
- une image (albumpic)
- une description (albumintro)
L'affichage des albumpan est a priori bien géré car j'obtiens le résultat que je veux. Lorsque j'enlève la propriété "display:inline" de albumpan les albums s'affichent les uns en dessous des autres.
Mais ce que je voudrais c'est les afficher sur 2 colonnes.
Force est de constater que c'est pas avec le "display:inline" que j'y arriverai ou alors j'ai oublié autre chose.
J'espère que vuos comprenez le problème et que vous pourrez le solutionner !
Merci d'avance.
PS:
Je joins une capture de l'affichage sans le display:inline, au final je voudrais que les 2 blocs album soient cote à cote
Modifié par hyunkle64 (08 Mar 2012 - 10:52)
Je cherche a faire un mise en page un peu particulière:
Voici le HTML:
<div id="corps">
<div id="albumpan">
<div id="albumpic"></div>
<div id="albumintro">
<h2>How The West Was Won</h2>
2003
</div>
</div>
<div id="albumpan">
<div id="albumpic"></div>
<div id="albumintro">
<h2>Led Zeppelin I</h2>
1969
</div>
</div>
</div>
et le CSS:
#corps {
width: 750px;
border: 1px solid #aaa;
background-color: #fff;
margin: 10px -10px 0px -10px;
padding: 10px 10px 20px 10px;
}
#albumpan {
width: 315px;
min-height:80px;
background-color: #fff;
margin: 10px -10px 0px -10px;
padding: 10px 10px 20px 10px;
[#red]display:inline;[/#]
}
#albumpic{
width:64px;
height:64px;
float:left;
background-image:url('album/default.png');
background-position: center center;
background-repeat: no-repeat;
border:solid 1px #bbb;
display:block;
}
#albumintro{
float:right;
display:block;
width:240px;
}
#albumintro h2{
font-size:12px;
font-weight:bold;
margin-bottom:10px;
text-transform: uppercase;
}
En gros ce que je voudrais c'est afficher dans mon corps des div(albumpan) sur 2 colonnes.
Les div albumpan sont eux meme composés de 2 colonnes :
- une image (albumpic)
- une description (albumintro)
L'affichage des albumpan est a priori bien géré car j'obtiens le résultat que je veux. Lorsque j'enlève la propriété "display:inline" de albumpan les albums s'affichent les uns en dessous des autres.
Mais ce que je voudrais c'est les afficher sur 2 colonnes.
Force est de constater que c'est pas avec le "display:inline" que j'y arriverai ou alors j'ai oublié autre chose.
J'espère que vuos comprenez le problème et que vous pourrez le solutionner !
Merci d'avance.
PS:
Je joins une capture de l'affichage sans le display:inline, au final je voudrais que les 2 blocs album soient cote à cote
Modifié par hyunkle64 (08 Mar 2012 - 10:52)