28172 sujets

CSS et mise en forme, CSS3

[Résolu] Positionner texte sur bloc div contenant un arrière

bonjour,
je galère depuis ce matin pour positionner correctement mon bloc texte à l'intérieur d'un bloc ayant la propriété css background-image.
Normalement ça devrait le faire avec les marges intérieures non ?


Capture> upload/46796-capture.jpg 


body {
	width: 100%;
	height: 100%;
	margin: 0; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #555;
	
}
img {
	border: none;
}
.header {
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 999999;
	color: #FFFFFF;
	opacity: 0.8;
	border-radius: 30px;
}
.box {
	z-index: 999999;
	position: absolute;
	width: 800px;
	height: 500px;
	color: #FFF;
	background-image: url(../img/test.png);
	background-repeat: no-repeat;
	top: 50%;
	left: 50%;
	text-align: left;
	margin-top: -250px;
	margin-right: -400px;
	margin-bottom: -250px;
	margin-left: -400px;
	padding-top: 70px;
	padding-bottom: 50px;
	padding-right: 200px;
	padding-left: 40px;

}
.box h2 {
	color: #FFFFFF;
	font-size: large;
	text-transform: capitalize;
}
.footer {
	z-index: 5;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 42px;
	width: 100%;
	background-color: #000000;
	moz-opacity: 0.7;
	opacity: 0.7;
	filter: alpha(opacity=70);
	color: #FFF;
}
.bg_pattern {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: transparent url(../img/pattern.png) repeat top left;
	z-index: 2;
}





<div class="box">
  <h2>TITRE</h2>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>


Merci pour toute aide Smiley smile
Modifié par zena12 (15 Jan 2013 - 15:12)
Si ton bloc d'arrière-plan correspond à toute l'image de ton screenshot, c'est normal que le texte ne s'aligne pas comme tu le désire: le cadre dans lequel tu veux intégrer le texte est "artificiel", ce n'est pas un élément html, donc le texte n'a aucune raison de s'aligner dedans.
Si tu veux résoudre le problème, tu as deux solutions:
-Soit tu créé 3 blocs imbriqués: La photo d'arrière-plan, le cadre par dessus, et le texte encore par-dessus.
.background {
	background:url('photo.png');
	width:800px;
	height:500px;
}

.cadre {
	background:url('cadre.png');
	width:400px;
	height:400px;
	padding:10px;
}

.cadre h2 {
	text-align:left;
}

<div class="background">
	<div class="cadre">
		<h2>Mon texte</h2>
	</div>
</div>

-Soit tu garde le même schéma, deux blocs imbriqués: mais tu rajoute un important padding-right sur le bloc d'arrière-plan.
.background {
	background:url('photo.png');
	width:800px;
	height:500px;
	padding:10px 210px 10px 10px;
}

.cadre h2 {
	text-align:left;
}

<div class="background">
	<h2>Mon texte</h2>
</div>
J'espère que c'est assez clair Smiley ohwell
Modifié par xXjujo002Xx (16 Jan 2013 - 11:36)
salut xXjujo002Xx,

en fait l'image en arrière plan est géré par un script java qui la change à chaque clic sur un des boutons du menu navigation. (Fullscreen background slider - Jquery)
Le problème se trouve au niveau de mon bloc contenu (.box) dans lequel j'arrive à placer mon texte en haut, en bas, à gauche comme je le veux sans problème en jouant avec les padding sauf pour la droite ou le bloc texte ne réagit pas.
Quand je vire l'arrière plan "test.png" du bloc (qui a les même dimensions que celui ci), tout redevient normal...
merci encore pour ton aide
As-tu tenu compte de la compensation des dimensions:
Sans padding:
div {
width:100px;
height:100px;
}

Avec padding:
div {
width:90px;
height:90px;
padding:5px;
}


Il faut toujours (sauf pour ie) soustraire le padding aux dimensions originales de la div.
dsl du retard, semaine chargée... en regardant minutieusement la page, j'avais laissé trainer quelques éléments html que j'avais oubliés d'effacer. Maintenant j'arrive à déplacer mes blocs comme je veux... merci encore pour ton intervention, j’apprécie !
Modifié par zena12 (17 Jan 2013 - 21:05)
Sujet clos
Aller à