28173 sujets

CSS et mise en forme, CSS3

Je n'arrives pas à bien positionner mon bloc depuis la droite...

Bonjour à tous.
J'ai l'impression que je bute sur un problème extrèmement simple, mais bon, j'ai beau regarder tout ce que je peux en tutoriel et messages de forums, je ne comprends pas d'où vient mon problème.

J'essaye de positionner deux phrases, l'une en haut à gauche (dans une "zone1"), l'autre en bas à droite (dans une "zone5") d'un conteneur. Ces phrases sont répétées quatre fois afin d'obtenir un effet de relief et de rappeller les couleurs qui sont dans le reste du site.

J'ai fait le code suivant:
CSS:


* {margin:0;padding:0}

#general {
margin-top:10px;
background-color:#666699;
}

#conteneur {
background-color:#003366;
position:absolute;
height: 600px;
margin-left:5%;
width: 90%;
max-width:1000px;
min-width:700px;
}

#zone1{
width: 100%;
margin-top:20px;
margin-left:3%;
}

#zone5{
width:80%;
margin-top:490px;
margin-left:18%;

}

.ph1, .ph2, .ph3, .ph4 {
position: absolute;
font-style:italic;
font-size:40px;
word-spacing:15px;
font-weight: 900;
letter-spacing:5px;
}

.ph1 {
/*bleu clair*/
padding-left:6px;
padding-top:10px;
color:#6699FF;
z-index:4;
}

.ph2 { 
/*bleu foncé*/
padding-left:1px;
padding-top:12px;
color:#000033;
z-index:2;
}

.ph3 { 
/*jaune*/
padding-left:7px;
padding-top:9px;
color:#FFCC33;
z-index:3;
}

.ph4 {
/*rouge*/
padding-left:1px;
padding-top:10px;
color:#660033;
z-index:1;
}

</style>


html:

<body id="general">

	<div id="conteneur">
		<div id="zone1">
			<div class="ph1">blablabli</div>
			<div class="ph2">blablabli</div>
			<div class="ph3">blablabli</div>
			<div class="ph4">blablabli</div>
</div>
			
		<div id="zone5">
			<div class="ph4">blablabla</div>
			<div class="ph2">blablabla</div>
			<div class="ph3">blablabla</div>
			<div class="ph1">blablabla</div>
		</div>	

	<div>
<div>
</body>


Sur firefox, ça marchait, mais sur explorer, ma "zone 5" était positionnée à l'extérieur du conteneur.

Du coup, je me suis dit que je devrais réécrire la zone 5. Mettre une marge à gauche alors que l'effet voulu est un positionnement par rapport à la droite n'était probablement pas une bonne idée.

alors, j'ai remplacé la zone 5 par:


#zone5{
margin-top:490px;
margin-right:3%;
text-align:right;
width:80%;
}


bon, là ça ne marche plus ni sur firefox, ni sur explorer... ça ne règle rien dans explorer, mais dans firefox, mes phrases se collent à gauche...
J'ai essayé un peu tout ce à quoi j'ai pu penser (mettre un float-right, par exemple) mais je n'arrives à rien. Mon bloc reste collé à gauche. Ce qui m'énerve, d'ailleurs, c'est que intuitivement, je me dit que si en variant mon "margin-left" tel que je le faisais avant, j'arrivais à bouger mes phrases comme je le voulais, alors l'attribut "margin-right" devrait fonctionner de façon symétrique de l'autre côté. J'ai du rater un truc. Et en tout cas mon intuition n'est visiblement pas très bonne...

Bon, désolé pour cette question de newbee, mais j'ai cherché partout et je n'ai pas réussi à comprendre cette histoire.

Cordialement,

Olivier

PS: je ne penses pas avoir de problème de doctype:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Language" content="fr,zh">
<title>test</title>


EDIT du matin:

Je suis parvenu à une solution en usant de méthode barbare... bref, j'hésite à mettre un "résou" parce que c'est franchement du bidouillage. Surtout, je n'arrives pas à clairement me représenter le fonctionnement de mon code...
enfin bref... j'ai introduit une ligne que j'ai appellée "retour" vu qu'elle ramène magiquement mes blocs à la (presque) bonne position. Je pense que ça devrait fonctionner sous IE parce que je suis arrivé avant cela à une apparence très proche de celle que j'avais sous IE:

le html:

<body id="general">

	<div id="conteneur">
		<div id="zone1">
			<div class="ph1">blablabli</div>
			<div class="ph2">blablabli</div>
			<div class="ph3">blablabli</div>
			<div class="ph4">blablabli</div>
</div>
			
		<div id="zone5">
				<span class="retour">blablablaa</span>
                                <div class="ph1">blablabla</div>
				<div class="ph2">blablabla</div>
				<div class="ph3">blablabla</div>
				<div class="ph4">blablabla</div>
		</div>	

	<div>
<div>
</body>


il faut noter le span classe juste avant "ph1". Le bidouillage est vraiment effrayant (ceci dit, il y a 10 jours, je ne savais pas ce qu'était une balise html) vu que je dois rajouter un caractère pour obtenir le décalage souhaité...

pour ce qui est du CSS, j'ai du caché cette ligne (en lui atttribuant une couleur identique au fond) et remonter un peu le tout... Smiley biggol c'est du grand n'importe quoi donc je suis preneur de toute explication mais... ça a l'air de marcher...

modif dans le css:

#zone5{
margin-top:450px;/*relevé de 40px pour compenser la ligne "fantôme"*/
margin-right:3%; /* cette ligne ne sert visiblement à rien, je n'arrives pas à gérer mes lignes grâce à cette propriété*/
text-align:right;
width:auto;
float:right;
}

.retour{
/*voila le code de la ligne fantôme*/
font-style:italic;
font-size:40px;
word-spacing:15px;
font-weight: 900;
letter-spacing:5px;
color:#003366;/*couleur du fond*/
}


EDIT du midi: tout ce bidouillage ne sert à rien: ça ne marche toujours pas sous IE...
Bon, toujours personne pour me donner un avis?
Modifié par OlivierC33 (10 Jan 2008 - 12:28)
Sujet clos
Aller à