28173 sujets

CSS et mise en forme, CSS3

[résolu] Texte décalé dans un div et problème de plans

Salut,

Je commence à me faire mon nouveau portfolio, et deux problèmes me font face. Edit : le premier est résolu.

Le premier, c'est que j'ai un texte dans un div d'une largeur définie et d'une hauteur libre, avec un padding de 30px, et que ce texte ne respecte pas le padding à droite. Et bizarrement, quand je réduis la largeur de mon div, il le respecte peu à peu (d'abord moins que demandé, puis entiérement).

Le second, c'est que j'ai une image en png que je voulais afficher en "second plan", derrière le texte, et que si Firefox le fait automatiquement, IE le place devant le texte, ce qui est relativement génant...


J'ai uploadé tout ça sur www.le-coin-de-sandwich.com/mr.sandwich et voici mon code :

CSS :
body{
	background-color:#FFF;
	font-family:verdana;
	color:#000;
	font-size:13px;
	font-weight:bold;
}


/*  BODY BACK */

	#top{
		background:url("design/top.jpg");
		width:950px;
		height:48px;
	}

	#middle{
		background:url("design/ligne.jpg") repeat-y;
		width:950px;
		min-height:420px;
	}

	#bottom{
		background:url("design/bottom.jpg");
		width:950px;
		height:48px;
	}
	

/*  BODY TEXT */

	#txt{
		width:881px;
		margin-left:35px;
	}
	
	#top-txt{
		background:url("design/top-txt.png");
		width:881px;
		height:4px;
	}

	#middle-txt{
		background:url("design/ligne-txt.png") repeat-y;
		width:881px;
		padding:30px;
	}

	#bottom-txt{
		background:url("design/bottom-txt.png");
		width:881px;
		height:4px;
	}

	
/* ARBRE */

	#arbre{
		background:url("design/arbre.png");
		width:372px;
		height:422px;
		margin-top:-412px;
	}


XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	  
<html xml:lang="fr" lang="fr" xml?ns="http://www.w3.org/1999/xhtml"> 

	<head>
		<title>Mr. Sandwich</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	
	<body>
		
		<object type="application/x-shockwave-flash" data="design/header.swf" width="950" height="170">
			<param name="movie" value="design/header.swf" />
		</object>

		<div id="top"></div>
		<div id="middle">
			<div id="txt">
				<div id="top-txt"></div>
				<div id="middle-txt">
					[ texte ]
				</div>
				<div id="bottom-txt"></div>	
			</div>
		</div>
		<div id="bottom"></div>
		<div id="arbre"></div>
	</body>

</html>


Voila voila, si vous pouvez me donner un coup de pouce Smiley smile
Modifié par Mr. Sandwich (25 Oct 2007 - 18:19)
Pourquoi tand de balise ? pourquoi ne pas faire une seul balise pour ton div qui va contenir le texte ? ce serais plus simple a gerer, a positionner et moins lourd en code je pense. Sachant que si different style doivent etre appliquer au texte, il y a toujours les class.

je verrais plus un truc du genre :

#text {
position: relative;
width :881px;
height:auto;
border:solid;  /*si tu veux une bordure autour*/
border-color: #FFFFFF; /*couleur de la bordure en blanc*/
padding: 30px; /*padding de 30px tout autour*/
text-align:justify;
background:#101010 /*code couleur bidon a mettre ta couleur bleu de fond*/
}


heu a adapter biensur la largeur je suis pas sur et peut etre que le positionnement sera a revoir...

Je ne suis pas un expert, mais je vais suivre le sujet pour voir eventuellement mes erreurs et si mes suggestions etaient bonne ou pas.

edit : j'oublier apres revisionnage du site, jouer sur l'opacité du background Smiley lol
Modifié par Ankart (24 Oct 2007 - 23:16)
a écrit :
Pourquoi tand de balise ? pourquoi ne pas faire une seul balise pour ton div qui va contenir le texte ?
Parce que ce n'est pas du CSS pur mais des images. Si tu regardes bien, le bord de mon cadre est flou, et je ne peux pas donner un bord pareil en CSS.
J'ai donc un div pour le haut du cadre, un pour le contenu (l'image originale fait 1 pixel de hauteur et est répétée en y), et un div pour le bas du cadre.

Cela dit, si c'est la seule solution, ce sera pas très grave non plus.
une solution en 2 images suffit alors...

1 image pour le chapeau et 1 pour le corps et le bas

j'ai deja fait ca pour un menu


div#cadre {
position:absolute;
left:25px;
top:130px;
width:202px;
padding-top:12px;
background:url(img/hautbleu.jpg) left top no-repeat;
}

div#bloccadre {
background:url(img/basbleu.jpg) left bottom no-repeat;
padding-bottom:12px;
}


plus qu'a adapter Smiley smile
Bonjour,

Tu n'as pas du donner le padding au bon élément.
essaye:
	
#middle-txt{
background:url("design/ligne-txt.png") repeat-y;
width:881px;
}

#middle-txt p{
padding: 30px;
}

avec ton texte compris entre <p> et </p>
Nickel ça marche, merci.

Donc il reste mon problème de plans dans IE... Quelqu'un aurait une idée ?
J'ai essayé z-index, mais ça change absolument rien.

Edit : en recherchant sur le forum, j'ai trouvé. En fait le z-index fonctionne, il suffit de préciser à l'élément qu'il est en position relative (ou absolue, mais il faut entrer le paramètre "position", quoi).

Voila donc mon code :

	#txt{
		width:881px;
		margin-left:35px;
		position:relative;
		z-index:2;
	}

[...]

	#arbre{
		background:url("design/arbre.png");
		width:372px;
		height:422px;
		margin-top:-412px;
		position:relative;
		z-index:1;
	}


Je suis d'ailleurs étonné, car j'avais lu que les chiffres fonctionnaient dans l'ordre inverse (plus le chiffre est petit, plus le plan est proche du premier plan), mais là ça marche, alors je vais pas me poser de question.

Voila voila, merci encore pour le texte décalé Smiley smile
Modifié par Mr. Sandwich (25 Oct 2007 - 19:05)
Sujet clos
Aller à