28172 sujets

CSS et mise en forme, CSS3

[Résolu] Images en superposition

Bonjour,
Je travaille pour un mini site et je cale sur un problème de mise en page qui paraîtra sûrement ridicule aux spécialistes…
Le site se compose d'un élément central avec du texte et image, là pas de problème, sur lequel vient se poser deux éléments noirs à droite qui dépassent (voir image jointe) et là rien ne va plus… Smiley decu
je n'arrive pas à les positionner. J'ai essayé pour le logo de faire un positionnement fixe… sans succès. Étant novice Smiley confused en codage je fais appel à vos lumières… merci d'avance ! !! !

upload/45675-modelept.gif
En speed, tu pourrais faire quelque chose dans ce principe :

<div id="wrap">
	<div id="droite">
		<div id="logo">
			Ton logo
		</div>
		<div class="contenu">
			<h1>Titre du contenu</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum nisl non nulla rhoncus convallis. Praesent accumsan mattis metus varius porta. Nulla facilisi. Ut non mauris ut neque lobortis posuere. Vivamus aliquet, magna sit amet ultrices faucibus, sem neque iaculis leo, at vehicula turpis metus in arcu. Maecenas egestas sagittis felis, at convallis lorem imperdiet id. Nunc id diam ut sapien interdum euismod. Sed eget sapien id nisl faucibus aliquam.</p>
			<p>Aliquam lorem mauris, posuere commodo vestibulum nec, accumsan a orci. Aliquam eget tortor risus. Donec at tellus eu neque sodales hendrerit. Duis tristique, nunc vitae congue euismod, lorem velit pulvinar ipsum, quis sagittis lectus metus in diam. Proin nibh libero, vehicula quis auctor et, varius et nibh. Donec egestas, arcu non euismod convallis, est neque viverra eros, non auctor odio urna ac erat. Vivamus velit purus, sollicitudin sit amet molestie quis, commodo non purus. Suspendisse in odio vel lacus suscipit ultricies et et elit. Curabitur pretium placerat odio, at tempor lectus fermentum nec. Vestibulum commodo augue nec velit condimentum eget luctus turpis sagittis. Fusce ultrices leo egestas mauris lobortis fermentum. Quisque nisi felis, eleifend at varius a, facilisis ut neque.</p>
		</div>
	</div>
	<div id="centre">
		Ton contenu au centre
	</div>
</div>


Avec ça comme CSS :

		div#wrap
		{
			width:960px; /* Mettre la taille que tu souhaites */
			margin:auto;
			position:relative;
			border:1px solid red;
			height:100%;
		}

		div#centre
		{
			width:840px; /* Mettre la taille que tu souhaites*/
			height:400px;
			margin:auto;
			border:1px solid pink;
		}

		div#droite
		{
			position:absolute;
			width:200px; /* Mettre la taille que tu souhaites*/
			height:100%;
			right:0;
			top:0;
			border:1px solid purple;
		}

		div#droite div#logo
		{
			width:100%;
			height:200px;
			background:url(../chemin/logo) 0 0 no-repeat;
			border:1px solid yellow;
		}

		div#droite div.contenu
		{
			background:#000;
			width:100%;
		}

		div.contenu p 
		{
			color:#FFF;
			line-height:21px;
		}


Je garantis pas que ça soit au top, mais c'est une piste à explorer... bon courage !
Modifié par SuperMerguez (30 Jul 2012 - 12:26)
Quand on peut rendre service Smiley cligne

PS : le username féminin incite souvent à donner un coup de main... pauvre nerd que je suis XD
Sujet clos
Aller à