28172 sujets

CSS et mise en forme, CSS3

Position relative : petit problème

Bonsoir,

Je me tourne vers vous car j'ai un petit problème. Sur ma page j'ai plusieurs paragraphes, chacun en position relative avec comme attribut 'top' un nombre négatif tel que -100, ..

Alors en bas de page j'ai évidemment de l'espace vide qui se crée. Comment pourrais-je simplement supprimer cet espace vide ?

Merci d'avance,
Bonne soirée.
Maxime.
Salut,

Lunthear a écrit :
Comment pourrais-je simplement supprimer cet espace vide ?
En n'utilisant pas de valeur négative ! Smiley lol

Tu as une page en ligne ?
Non désolé pas de page en ligne, mais bon je dois faire en position relative car les éléments s'empilent un peu les uns sur les autres ..

Et comme mon contenu est centré je ne peux utiliser une position absolue Smiley decu

Merci d'avoir répondu mais y aurait-il une autre solution plus efficace que de retirer les négatifs ? =D
Ok voici l'extrait de code :

<p class="perso1">Texte<span style="color: #ef4a34;">Texte</span></p>
<p class="perso2">Texte<span style="color: #ef4a34;">Texte</span></p>
<p class="perso5">Texte<span style="color: #ef4a34;">Texte</span></p>
<p class="perso3">Texte<span style="color: #ef4a34;">Texte</span></p>
<p class="perso4">Texte<span style="color: #ef4a34;">Texte</span></p>



p.perso1  {
	width: 325px;
	height: 114px;
	padding: 50px 0 0 5px;
	background: url('images/perso1.png') no-repeat right;
	position: relative; 
	top: 0px; 
	right: -50px; 
	text-align: left;
}

p.perso2  {
	width: 286px;
	height: 48px;
	padding: 110px 20px 0 0;
	background: url('images/perso2.png') no-repeat left;
	position: relative; 
	top: -150px; 
	right: 150px; 
	text-align: right;
}

p.perso5  {
	width: 271px;
	height: 68px;
	padding: 90px 5px 0 0;
	background: url('images/perso5.png') no-repeat left;
	position: relative; 
	top: -200px; 
	right: -150px; 
	text-align: right;
}

p.perso3  {
	width: 330px;
	height: 95px;
	padding: 65px 0 0 10px;
	background: url('images/perso3.png') no-repeat left;
	position: relative; 
	top: -180px; 
	right: -100px; 
	text-align: left;
}

p.perso4 {
	width: 328px;
	height: 66px;
	padding: 90px 10px 0 0;
	background: url('images/perso4.png') no-repeat left;
	position: relative; 
	top: -450px; 
	right: 50px; 
	text-align: right;
}


Merci d'avance Smiley smile
Ah oui d'accord... le plus simple me semble effectivement le positionnement absolu. Pour ce qui est du fait que le site soit centré il suffit que le conteneur des paragraphes soit positionné (typiquement avec un position:relative;).

Le seul problème est qu'en cas d'agrandissement de la police le conteneur ne suivra pas (mais c'est déjà le cas puisque tu as déjà donné des dimensions à chacun des paragraphes).
Modifié par Heyoan (22 Mar 2009 - 22:29)
Bonjour,

Ca ce n'est pas un problème car les textes mis sont fixe Smiley smile
Par contre je ne comprends pas très bien ta solution pour centrer.
Car si la définition d'écran est plus grande avec un relative je vois pas comment centrer le contenu .. :S

Merci d'avance,
Bonne journée.
Maxime.
Lunthear a écrit :
Par contre je ne comprends pas très bien ta solution pour centrer.
Eh bien je suppose que la phrase "mon contenu est centré" signifie que tes paragraphes sont enfants ou descendants d'un DIV conteneur centré. Il suffit donc de positionner ce dernier (typiquement avec un position:relative) pour que tes paragraphes en position:absolute se réfèrent à lui et pas aux bords de l'écran.

Lire le Guide de survie du positionnement CSS.
Sujet clos
Aller à