28172 sujets

CSS et mise en forme, CSS3

Bonjour,

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
upload/30129-demo.png
Modifié par hyunkle64 (08 Mar 2012 - 10:52)
Modérateur
Bonjour, tout d'abord remplace tes id par des class. Un id est unique, il doit y en avoir un seul par page!

Ensuite si le second élément vient en dessous, ce que ton premier est effectivement en block, mais que tu as omis de le mettre en flottant à gauche. (float: left).

Ensuite ta mise en page n'est pas particulière, mais touche aux bases du positionnement en css.
Il faut prendre le temps de (re)voir les bases: http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html