28172 sujets

CSS et mise en forme, CSS3

Monter une div dans la page

Bonjour a tous j'aimerais remonter ma div contenant le mot assistance technique plus haut mais je n'arrive pas.
Voici une capture d'ecran du probleme upload/35012-Servicesma.png

et le code html
<section id="main">
				<div  class="imagemain"><img src="webroot/images/who_we_are.png" alt="whoweare" /></div>
			
				<div class="identifiant"><h2>Assistance technique </h2></div>
					<p class="pmain">Lorem ipsum dolor sit amet, consectetur adipisicing 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>
				</section>



et le css
#main{
	background:#edebe7;s
	border-top: 1px solid #FAFAFA;
	box-shadow: 0 1px 2px #a6a098;
	border-radius:4px;
	padding:20px 25px;
	margin:50px 0 25px 0;
}
 .identifiant{
	font-weight:bold;
	background: #F2F2F2;
	border-top: 1px solid #FAFAFA;
	border-bottom: 1px solid #C7C7C7;
	text-align: center;
	padding: 0 5px;
	margin:0;
	position:relative;
	float:right;
	height: 39px;
	width:500px;
	line-height: 7px;
}

.pmain{
	font-size:20px;
}

j'espere que j'ais été clair
Modifié par ronytexasranger (12 Dec 2011 - 16:18)
Modérateur
Bonjour,

Place ta div en absolute
position:absolute;
top:0px;
right:0px


Ou alors applique
float:left;

a ta div ET a ton image. (d'ailleur plutot que de faire une div autour de ton image tu peux directement appliquer la class a la balise image: <img class:"maclasse" etc/>)
Hello,

Tu devrais mettre ta div .imagemain en float: left et ajoutet une div clear: both après ta div identifiant.

En gros :

<div  class="imagemain"><img src="webroot/images/who_we_are.png" alt="whoweare" /></div>
<div class="identifiant"><h2>Assistance technique </h2></div>
<div class="clear"></div>
<p>...</p>



 .identifiant{
   float: right; 
}
.imagemain {
   float: left; 
}

.clear { 
   clear: both; 
}
Modérateur
Ah tiens, Smiley murf ça soulève une question pour toi hchtot :

En faisant se succéder deux div, un en float:left; et l'autre en float:right; ils se placent quand même sur la même ligne ?

Merci
Oui, le premier sera aligné à gauche et le deuxième à droite. Essaye ce bout de code puis remplace ensuite float: right par float: left, tu verras la différence :


<!doctype html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	.left { float: left; width: 50px; height: 50px; border: 1px red solid; }
	.right { float: right; width: 50px; height: 50px; border: 1px lime solid; }
	</style>
</head>
<body>
	
	<div class="left"></div>
	<div class="right"></div>
	
</body>
</html>

Modifié par hchtot (12 Dec 2011 - 17:32)
Modérateur
Ok ok. J'utilisais déjà float mais je croyais qu'un seul alignement (droite ou gauche) n'était possible sur la meme ligne. Merci beaucoup ! Smiley biggrin
Sujet clos
Aller à