28172 sujets

CSS et mise en forme, CSS3

Placer une image entre deux colonnes

Hello!

Je vous contacte car je n'arrive pas à caler une image entre deux colonnes en responsive. J'aimerai que cette image passe au dessus des deux colonnes et qu'elle dispose d'un habillage. Je vous transmet mon code qui est très simple. Merci d'y avoir jeté un oeil Smiley smile

Je précise que l'élément qui m'interesse est : "blocimageronde" et que je souhaite le caler au dessus de "bloc1" et "bloc2"

Le HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Document sans nom</title>
</head>

<body>

<div class="enssemble1">
	<div class="bloc1"><p>ESSAIS responsive. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    </div>
</div>

<div id="enssemble2">
	
    <div id="blocimageronde"></div>
    
	<div id="bloc2"><p>ESSAIS responsive. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "</p>
    </div>
    
	<div id="bloc3"><p>ESSAIS responsive. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
	</div>
</div>

<div class="enssemble1">
	<div class="bloc1"><p>ESSAIS responsive. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
	</div>
    
</body>
</html>




@charset "utf-8";
/* CSS Document */

.enssemble1{
	background-color:blue;
	height:auto;
	}

#enssemble2{
	height:auto;
	min-height:200px;
	overflow:hidden;
	}

.bloc1{
	background-color:green;
	height:auto;
	}
.bloc1 p{
	margin:0px 30px 0px 30px;
	padding:30px 0 30px 0;
	}
	
#bloc2{
	background-color:none;
	height:auto;
	min-height:200px;
	width:50%;
	float:left;
	margin:-200px auto 0 auto;
	}
	#bloc2 p{
	margin:30px 30px 30px 30px;
	}
	
#bloc3{
	background-color:none;
	height:autopx;
	min-height:200px;
	width:50%;
	float:right;
	z-index:1;
	margin:-200px auto 0 auto;}
	#bloc3 p{
	margin:30px 30px 30px 30px;
	z-index:1;
	}
	
#blocimageronde{
	position:relative;
	background-color: yellow;
	border-radius: 100%;
	height: 150px;
	width: 150px;
	margin:50px auto 0 auto;
	z-index:1;
	left:auto;
	}

Modifié par borg80 (04 Jan 2016 - 12:57)
A ce stade, j'ai positionné mon cercle (image) au milieu des deux colonnes. Cependant, mon texte passe en dessous de l'image... J'ai essayé de les mettre au même niveau avec un 
z-index
, mais rien n'y fait.
Sujet clos
Aller à