Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

Problème de mise en forme! Absolute ou center??

https://forums.mozfr.org/viewtopic.php?t=48431

Page 1 sur 1

Problème de mise en forme! Absolute ou center??

Publié : 02 déc. 2006, 20:46
par Simplyme
Bonjour,
Je suis en pleine création de mon site mais j'ai qql problèmes de mise en forme.
Je vous explique avec le code:

Code : Tout sélectionner

<html>
<head>
<title>Background Essai 7slide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {font-family: Georgia, "Times New Roman", Times, serif}
-->
</style>
</head>
<body bgcolor="#ddd69e" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Background Essai 7slide.psd) -->
<table id="Table_01" width="781" height="601" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td colspan="10">
			<img src="images/index_01.jpg" width="341" height="125" alt=""></td>
		<td>
			<img src="images/index_02.jpg" width="439" height="125" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="125" alt=""></td>
	</tr>
	<tr>
		<td colspan="4">
			<img src="images/index_03.jpg" width="153" height="20" alt=""></td>
		<td rowspan="2">
			<img src="images/index_04.jpg" width="1" height="135" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/index_05.jpg" width="95" height="135" alt=""></td>
		<td rowspan="2">
			<img src="images/index_06.jpg" width="1" height="135" alt=""></td>
		<td rowspan="7">
			<img src="images/index_07.jpg" width="91" height="475" alt=""></td>
		<td rowspan="7">
			<div style="background:url(images/index_08.jpg)"; "width=439px;height=475px"> 
			  <p>&nbsp;</p>			  
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
			  <p>&nbsp;</p>
		    </div></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td rowspan="4">
			<img src="images/index_09.jpg" width="34" height="339" alt=""></td>
		<td colspan="2">
			<img src="images/index_10.jpg" width="99" height="115" alt=""></td>
		<td rowspan="4">
			<img src="images/index_11.jpg" width="20" height="339" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="115" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/index_12.jpg" width="2" height="109" alt=""></td>
		<td>
			<img src="images/index_13.jpg" width="97" height="109" alt=""></td>
		<td colspan="5">
			<img src="images/index_14.jpg" width="97" height="109" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="109" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/index_15.jpg" width="99" height="115" alt=""></td>
		<td colspan="5">
			<img src="images/index_16.jpg" width="97" height="98" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="98" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/index_17.jpg" width="2" height="133" alt=""></td>
		<td rowspan="2">
			<a href="contact.html"><img src="images/index_18.jpg" alt="" width="93" height="115" border="0"></a></td>
		<td colspan="2" rowspan="2">
			<img src="images/index_19.jpg" width="2" height="115" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="2">
			<img src="images/index_20.jpg" width="153" height="116" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="98" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/index_21.jpg" width="94" height="18" alt=""></td>
		<td>
			<img src="images/index_22.jpg" width="1" height="18" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="34" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="2" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="97" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="20" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="91" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="439" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Comme vous voyez dans mes codes, j'ai centrer toute ma page afin que la structure du site soit centrer sur n'importe quel serveur net, et mon image index_08 est en background afin de pouvoir y écrire de sur. Le souci c'est que dés que j'écris et que je choisis mon style et font sur cette image en background, mon image entière est décallée de quelques peu vers le bas...?!
J'ai donc pensé à mettre cette image en position "absolute" mais la aussi j'ai qql soucis. Je suis novice et je me demande si les deux options (center + position "absolute") sont comptatible, car sur ma zone de travaille (sur Dreamweaver) l'image en position absolute n'est pas bien centré, par contre sur mon apercu dans le navigateur c'est ok. Sauf que les autres images faisant partie de la structure du site sont décalés.
Quels solutions pour ce problème? Dois-je utiliser la position absolute pour toute mes images de structure et oublié le centrer?
Bref est-ce que qqn pourrait m'aider??
MERCI d'avance!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; SKY13)

Publié : 03 déc. 2006, 16:01
par Mongo Bob
Un problème que je vois, c'est un problème de syntaxe.
Si tu insères le css dans le body avec la balise <style> (compte tenu qu'il vaut mieux le coller dans une feuille de style externe mais tu as le droit de préférer comme ça), cette ligne de code :

Code : Tout sélectionner

div style="background:url(images/index_08.jpg)"; "width=439px;height=475px">
est incorrecte, d'ailleurs tu peux mettre ce que tu veux comme valeurs pour "width" et "height" ton div restera inchangé, la bonne syntaxe css est :

Code : Tout sélectionner

<div style="background:url(images/index_08.jpg);width:439px;height:475px;">
Alors là, par contre, change une valeur et tu vas voir le résultat! Je pense que tu as mélangé une syntaxe de style css et une syntaxe de style html. En style html pur jus, ça donnerait :

Code : Tout sélectionner

<div background="images/index_08.jpg" width="439px" height="475px">
Un espace à la place du ";", un "=" à la place du ":" par rapport à la 2ème ligne. Ci-dessus, pas besoin de la balise html <style> dont l'utilité est d'introduire du css, soit dans le body, soit dans le head, et encore une fois, mieux vaut au bout du compte du css en externe avec <link>.
Il y a 2 ou 3 cas dans le forum en ce moment, de css dans le body avec une syntaxe approximative.
Mais corrige déjà ça et ce sera un début.
Et bon courage!

Publié : 03 déc. 2006, 17:15
par calimo
Mongo Bob a écrit :En style html pur jus, ça donnerait :

Code : Tout sélectionner

<div background="images/index_08.jpg" width="439px" height="475px">
Non non non, pas d'unités pour les attributs HTML :wink:

Non, sincèrement c'est que tu utilises des tableaux qui manifestement n'ont rien à faire ici : ils ne sont pas prévus pour faire de la mise en forme. :roll:

Quand tu utilises les CSS, tu dois absolument oublier cette manie de découper les images : utilises les images les plus grandes possibles pour les mettre en fond, et pas de case de tableaux, mais de grands blocs (si possibles sémantiques, et pour les images avec du contenu, entrées "en dur" dans le HTML avec une balise <img> et un texte alternatif transcrivant le contenu de l'image (attribut alt=""…) ! :wink:


Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firelimace Firefox/2.0

PS : surtout n'oublie pas un bon doctype pour passer en mode de rendu standard :wink:

Publié : 03 déc. 2006, 17:37
par Mongo Bob
calimo a écrit :Non non non, pas d'unités pour les attributs HTML
Damned :evil: j'ai laissé les unités, faut toujours qu'il trouve un truc!
calimo a écrit :Non, sincèrement c'est que tu utilises des tableaux qui manifestement n'ont rien à faire ici : ils ne sont pas prévus pour faire de la mise en forme.
Ceci dit, même sans tableau, il a intérêt à revoir les soucis de syntaxe.

Publié : 03 déc. 2006, 17:47
par calimo
Hé, pas besoin de s'énerver pour si peux :oops:

Effectivement, c'est un tout qu'il faut revoir et améliorer :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firelimace Firefox/2.0

Publié : 03 déc. 2006, 17:53
par Mongo Bob
C'est que j'ai pas trouvé de smiley pour un grommelement alors j'ai pris ce que j'ai trouvé (et pis, je m'énervais contre moi-même).

Publié : 04 déc. 2006, 04:59
par myahoo
Mongo Bob a écrit :C'est que j'ai pas trouvé de smiley pour un grommelement alors j'ai pris ce que j'ai trouvé (et pis, je m'énervais contre moi-même).
Non mais, hein, oh, hé, bon, agroooo, gniiiih, yarf, pfkchtü ! Image

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Publié : 17 déc. 2006, 22:56
par Simplyme
Merci les gars je v essayer d'améliorer donc tt ca demain, en plus j'ai laissé ca en plan pdt un ptit tps, je v avoir du mal à m'y remettre clairement!
Mais merci quand même je vous tiens o courant! ;-)

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SKY13)
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru