28255 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)
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
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 à