pb d'affichage

Caliméro431 · 26 Septembre 2005

:gueule: j'ai un bête soucis avec mon site. Voilà, je l'ai conçu en 800*600, et je voudrais que la page soit centrée quand on l'affiche en 1024. Pour l'instant, elle est alignée à gauche, ce n'est pas très esthétique...

petite précision: il s'agit d'un site concu avec photoshop pour le découpage des images, puis dreamweaver.

merci d'avance pour votre aide!!!

CarGoZ · 26 Septembre 2005

Je pense que un liens vers ton site nous serait utile ...

+++

Caliméro431 · 26 Septembre 2005

Je pense que un liens vers ton site nous serait utile ...

+++

<{POST_SNAPBACK}>

le site est pour l'instant en accès restreint, pas possible donc de faire un lien. J'ai visité le tien. Eh bien en fait, il suffit d'imaginer ta propre page alignée à gauche, car la tienne, elle est centrée!!! comment as tu fait???

au niveau structure, ma page est en fait une imbrication de calques.

AntiStatic · 26 Septembre 2005

Salut !

au niveau structure, ma page est en fait une imbrication de calques.

tu veux dire en XHTML et CSS2 ? Parce que si c'est le cas tu as juste à ajouter comme style pour le body :

body {
text-align : center;
margin : 0px auto 0px auto;
}

Par contre du coup après ca, tout les textes de ta page seront centrés. Donc il faudra que tu répère les DIVS enfant de premier niveau du body et que tu leur repasse un text-align : left ; biensur s'il doivent être alignés à gauche !

CarGoZ · 26 Septembre 2005

il suffit d'imaginer ta propre page alignée à gauche, car la tienne, elle est centrée!!! comment as tu fait???

Eh bien la structure de ma page se presente comme ceci:

<div id="all">
<div id="header">
</div>
<div id="gauche">
</div>
<div id="centre">
</div>
<div id="footer">
</div>
</div>

le fait que tout soit centré sans que les textes le soit c'est que:

"all" est definit avec une largeur de 80%

et a un margin-left de 10% .

Voila je sait pas si c'est très académique mais sa marche bien.

J'espère que ca va t'aider ...

+++

herisson · 26 Septembre 2005

au niveau structure, ma page est en fait une imbrication de calques.

<{POST_SNAPBACK}>

salut,

je ne sais pas si tu utilises le mot calques pour les <div>

pour ton problème de centrage une des astuces les plus répandues est la suivante :

<body>
<div id="page">
ici tu mets tout le contenu de ton body actuel
</div><!-- fin du div#page -->
</body>

cela va permettre d'adapter la taille des "marges" entre ta version 800*600 et un affichage en 1024

ensuite dans la page style.css tu mets

div#page 
{
width:600px; /* ça donne la "boite" #page de la taille de ta résolution actuelle */
margin: 1em auto; /* 1em de marge en haut et en bas, marges automatiques et identiques de chaque coté */
}

normalement avec ça ta page actuelle est centrée quelque soit la résolution de l'écran (en css tu peux mettre une couleur ou une image pour habiller les "bouts de body" qui encadre ta "page actuelle 800*600"

modifie ton code en commentant tes modifications pour les supprimer si tu n'obtiens pas l'effet souhaité...

mais une url serait quand même plus simple pour t'aider (là je sais pas ce que t'as comme imbrication d'éléments ni comme réglages en css)

Bon courage

Caliméro431 · 28 Septembre 2005

en fait, voici le code de ma page. J'ai essayé vos conseils, mais ca n'a pas marché...

<HTML>
<HEAD>
<TITLE>site</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (site.psd) -->
<STYLE TYPE="text/css">
<!--

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:34px;
	height:525px;
}

#index-02 {
	position:absolute;
	left:34px;
	top:0px;
	width:131px;
	height:88px;
}

#index-03 {
	position:absolute;
	left:165px;
	top:0px;
	width:431px;
	height:88px;
}

#index-04 {
	position:absolute;
	left:596px;
	top:0px;
	width:83px;
	height:88px;
}

#index-05 {
	position:absolute;
	left:679px;
	top:0px;
	width:121px;
	height:88px;
}

#index-06 {
	position:absolute;
	left:34px;
	top:88px;
	width:131px;
	height:26px;
}

#index-07 {
	position:absolute;
	left:165px;
	top:88px;
	width:151px;
	height:26px;
}

#index-08 {
	position:absolute;
	left:316px;
	top:88px;
	width:68px;
	height:26px;
}

#index-09 {
	position:absolute;
	left:384px;
	top:88px;
	width:131px;
	height:26px;
}

#index-10 {
	position:absolute;
	left:515px;
	top:88px;
	width:38px;
	height:26px;
}

#index-11 {
	position:absolute;
	left:553px;
	top:88px;
	width:32px;
	height:26px;
}

#index-12 {
	position:absolute;
	left:585px;
	top:88px;
	width:139px;
	height:36px;
}

#index-13 {
	position:absolute;
	left:724px;
	top:88px;
	width:76px;
	height:437px;
}

#index-14 {
	position:absolute;
	left:34px;
	top:114px;
	width:551px;
	height:1px;
}

#index-15 {
	position:absolute;
	left:34px;
	top:115px;
	width:551px;
	height:9px;
}

#index-16 {
	position:absolute;
	left:34px;
	top:124px;
	width:153px;
	height:23px;
}

#index-17 {
	position:absolute;
	left:187px;
	top:124px;
	width:398px;
	height:373px;
}

#index-18 {
	position:absolute;
	left:585px;
	top:124px;
	width:139px;
	height:67px;
}

#index-19 {
	position:absolute;
	left:34px;
	top:147px;
	width:153px;
	height:14px;
}

#index-20 {
	position:absolute;
	left:34px;
	top:161px;
	width:153px;
	height:15px;
}

#index-21 {
	position:absolute;
	left:34px;
	top:176px;
	width:153px;
	height:15px;
}

#index-22 {
	position:absolute;
	left:34px;
	top:191px;
	width:153px;
	height:15px;
}

#index-23 {
	position:absolute;
	left:585px;
	top:191px;
	width:139px;
	height:23px;
}

#index-24 {
	position:absolute;
	left:34px;
	top:206px;
	width:153px;
	height:16px;
}

#index-25 {
	position:absolute;
	left:585px;
	top:214px;
	width:139px;
	height:24px;
}

#index-26 {
	position:absolute;
	left:34px;
	top:222px;
	width:153px;
	height:16px;
}

#index-27 {
	position:absolute;
	left:34px;
	top:238px;
	width:153px;
	height:24px;
}

#index-28 {
	position:absolute;
	left:585px;
	top:238px;
	width:139px;
	height:24px;
}

#index-29 {
	position:absolute;
	left:34px;
	top:262px;
	width:153px;
	height:21px;
}

#index-30 {
	position:absolute;
	left:585px;
	top:262px;
	width:139px;
	height:21px;
}

#index-31 {
	position:absolute;
	left:34px;
	top:283px;
	width:153px;
	height:26px;
}

#index-32 {
	position:absolute;
	left:585px;
	top:283px;
	width:139px;
	height:26px;
}

#index-33 {
	position:absolute;
	left:34px;
	top:309px;
	width:153px;
	height:15px;
}

#index-34 {
	position:absolute;
	left:585px;
	top:309px;
	width:11px;
	height:188px;
}

#index-35 {
	position:absolute;
	left:596px;
	top:309px;
	width:128px;
	height:216px;
}

#index-36 {
	position:absolute;
	left:34px;
	top:324px;
	width:153px;
	height:17px;
}

#index-37 {
	position:absolute;
	left:34px;
	top:341px;
	width:153px;
	height:22px;
}

#index-38 {
	position:absolute;
	left:34px;
	top:363px;
	width:153px;
	height:84px;
}

#index-39 {
	position:absolute;
	left:34px;
	top:447px;
	width:153px;
	height:27px;
}

#index-40 {
	position:absolute;
	left:34px;
	top:474px;
	width:153px;
	height:1px;
}

#index-41 {
	position:absolute;
	left:34px;
	top:472px;
	width:153px;
	height:22px;
}

#index-42 {
	position:absolute;
	left:34px;
	top:497px;
	width:562px;
	height:28px;
}

#index-43 {
	position:absolute;
	left:0px;
	top:525px;
	width:800px;
	height:75px;
}

-->
</STYLE>
<!-- End ImageReady Styles -->
</HEAD>
<BODY STYLE="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (site.psd) -->
<DIV ID="index-01">
	<IMG SRC="images/index_01.gif" WIDTH=34 HEIGHT=525 ALT="">
</DIV>
<DIV ID="index-02"> <a href="http://www.defense.gouv.fr/sites/defense/"><IMG SRC="images/index_02.gif" ALT="" WIDTH=131 HEIGHT=88 border="0"></a> 
</DIV>
<DIV ID="index-03">
	<IMG SRC="images/index_03.gif" WIDTH=431 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-04">
	<IMG SRC="images/index_04.gif" WIDTH=83 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-05">
	<IMG SRC="images/index_05.gif" WIDTH=121 HEIGHT=88 ALT="">
</DIV>
<DIV ID="index-06"> <a href="index.html"><IMG SRC="images/index_06.gif" ALT="" WIDTH=131 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-07"> <a href="6rg.htm"><IMG SRC="images/index_07.gif" ALT="" WIDTH=151 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-08"> <a href="5cir.htm"><IMG SRC="images/index_08.gif" ALT="" WIDTH=68 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-09">
	<IMG SRC="images/index_09.gif" WIDTH=131 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-10">
	<IMG SRC="images/index_10.gif" WIDTH=38 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-11">
	<IMG SRC="images/index_11.gif" WIDTH=32 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-12">
	<IMG SRC="images/index_12.gif" WIDTH=139 HEIGHT=36 ALT="">
</DIV>
<DIV ID="index-13">
	<IMG SRC="images/index_13.gif" WIDTH=76 HEIGHT=437 ALT="">
</DIV>
<DIV ID="index-14">
	<IMG SRC="images/index_14.gif" WIDTH=551 HEIGHT=1 ALT="">
</DIV>
<DIV ID="index-15">
	<IMG SRC="images/index_15.gif" WIDTH=551 HEIGHT=9 ALT="">
</DIV>
<DIV ID="index-16">
	<IMG SRC="images/index_16.gif" WIDTH=153 HEIGHT=23 ALT="">
</DIV>
<DIV ID="index-17"> 
  <p>Le site est actuellement en construction.</p>
  <p>Rubriques disponibles:</p>
  <ul>
    <li>le 6e régiment du génie</li>
    <li>la 5e CIR (en partie)</li>
    <li>chant</li>
    <li>insigne</li>
    <li>téléchargements</li>
    <li>journées découvertes</li>
  </ul>
</DIV>
<DIV ID="index-18">
	<IMG SRC="images/index_18.gif" WIDTH=139 HEIGHT=67 ALT="">
</DIV>
<DIV ID="index-19">
	<IMG SRC="images/index_19.gif" WIDTH=153 HEIGHT=14 ALT="">
</DIV>
<DIV ID="index-20">
	<IMG SRC="images/index_20.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>
<DIV ID="index-21">
	<IMG SRC="images/index_21.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>
<DIV ID="index-22">
	<IMG SRC="images/index_22.gif" WIDTH=153 HEIGHT=15 ALT="">
</DIV>
<DIV ID="index-23">
	<IMG SRC="images/index_23.gif" WIDTH=139 HEIGHT=23 ALT="">
</DIV>
<DIV ID="index-24"> <a href="chant.htm"><IMG SRC="images/index_24.gif" ALT="" WIDTH=153 HEIGHT=16 border="0"></a> 
</DIV>
<DIV ID="index-25">
	<IMG SRC="images/index_25.gif" WIDTH=139 HEIGHT=24 ALT="">
</DIV>
<DIV ID="index-26"> <a href="insigne.html"><IMG SRC="images/index_26.gif" ALT="" WIDTH=153 HEIGHT=16 border="0"></a> 
</DIV>
<DIV ID="index-27">
	<IMG SRC="images/index_27.gif" WIDTH=153 HEIGHT=24 ALT="">
</DIV>
<DIV ID="index-28"> <a href="jdecouverte.htm"><IMG SRC="images/index_28.gif" ALT="" WIDTH=139 HEIGHT=24 border="0"></a> 
</DIV>
<DIV ID="index-29"> <a href="telecharg.htm"><IMG SRC="images/index_29.gif" ALT="" WIDTH=153 HEIGHT=21 border="0"></a> 
</DIV>
<DIV ID="index-30">
	<IMG SRC="images/index_30.gif" WIDTH=139 HEIGHT=21 ALT="">
</DIV>
<DIV ID="index-31"> <a href="telecharg.htm"><IMG SRC="images/index_31.gif" ALT="" WIDTH=153 HEIGHT=26 border="0"></a> 
</DIV>
<DIV ID="index-32">
	<IMG SRC="images/index_32.gif" WIDTH=139 HEIGHT=26 ALT="">
</DIV>
<DIV ID="index-33"> <a href="telecharg.htm"><IMG SRC="images/index_33.gif" ALT="" WIDTH=153 HEIGHT=15 border="0"></a> 
</DIV>
<DIV ID="index-34">
	<IMG SRC="images/index_34.gif" WIDTH=11 HEIGHT=188 ALT="">
</DIV>
<DIV ID="index-35"><a href="http://www.reserves.terre.defense.gouv.fr/index-frames.html"><img src="images/logoERT.gif" width="126" height="29" border="0"></a> 
</DIV>
<DIV ID="index-36"> <a href="telecharg.htm"><IMG SRC="images/index_36.gif" ALT="" WIDTH=153 HEIGHT=17 border="0"></a> 
</DIV>
<DIV ID="index-37">
	<IMG SRC="images/index_37.gif" WIDTH=153 HEIGHT=22 ALT="">
</DIV>
<DIV ID="index-38">
	<IMG SRC="images/index_38.gif" WIDTH=153 HEIGHT=84 ALT="">
</DIV>
<DIV ID="index-39">
	<IMG SRC="images/index_39.gif" WIDTH=153 HEIGHT=27 ALT="">
</DIV>
<DIV ID="index-40">
	<IMG SRC="images/index_40.gif" WIDTH=153 HEIGHT=1 ALT="">
</DIV>
<DIV ID="index-41"> <IMG SRC="images/index_41.gif" WIDTH=153 HEIGHT=29 ALT=""> 
</DIV>
<DIV ID="index-42">
	<IMG SRC="images/index_42.gif" WIDTH=562 HEIGHT=28 ALT="">
</DIV>
<DIV ID="index-43"> <IMG SRC="images/index_43.gif" ALT="" WIDTH=800 HEIGHT=75 border="0"> 
</DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Edit modérateur: prière d'utiliser le marquage adéquat sur le forum pour encadrer de très longs morceaux de code (codebox)

Modifié 28 Septembre 2005 par Dudu

Dudu · 28 Septembre 2005

Salut,

En théorie, il est totalement déconseiller d'abuser des position:absolute car cela peut perturber l'affichage sur certains navigateurs. Un ou deux élements peuvent à la limite se servir de ce type de positionnement en faisant gaffe.

Là, TOUS les éléments son placés de cette manière donc ce n'est pas demain la veille que tu vas te dépatouiller de tes soucis d'affichage, désolé.

Revois le code ta page et abandonne ImageReady pour faire du code HTML. ImageReady est un logiciel de création d'images, pas un logiciel web

En plus force est de constater qu'il produit un code hautement dégueulasse.

PS: les copié-collés sauvages de code en pleine page sont à éviter pour des questions évidentes de lisibilité, j'ai modifié ton message pour entourer le code par des tags {codebox}. Merci.

Caliméro431 · 29 Septembre 2005

le pb, c'est que je n'ai aucune connaissance pour éditer moi même le code HTML. j'utilise Dreamweaver, est ce qu'il y aurait des modifications simples à faire pour résoudre ce pb??

NorSeb · 30 Septembre 2005

Salut,

Il doit bien y avoir la possibilité de center le site avec Dreamweaver !

Ceci dit, apprendre les bases du html est à la portée de tout le monde... A condition de prendre un peu de temps, d'avoir un bon bouquin et un éditeur de texte.

Tu y trouveras par exemple la balise <center> (à moins qu'elle ne soit pas valide W3C ??)

Dudu · 30 Septembre 2005

Tu y trouveras par exemple la balise <center> (à moins qu'elle ne soit pas valide W3C ??)

Elle ne l'est pas

Caliméro431 · 6 Octobre 2005

bon, eh bien après tout ca, j'ai tout essayé, et je n'arrive toujours pas à centrer ma page!!!

je me suis même mise à la programmation, j'ai appris pas mal de trucs. J'ai oublié une précision importante: je débute dans tout ce qui est programmation, du coup, je ne mets peut être pas les bons codes aux bons endroits...

dans tous les cas: faut il que je revoie la conception de ma page? si oui, comment m'y prendre? coller les images dans un tableau sous Dreamweaver? j'ai essayé, et il y a des espaces horiz et vertic entre chaque image, ca ne marche pas...

plizzz.... HELP!! je dois rendre mon site prochainement.

une futur ex-webmaster en détresse.

Connexion

pb d'affichage

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter