Webmaster Hub > pb d'affichage

Version complète: sur le forum Webmaster Hub : pb d'affichage

Webmaster Hub > Création et exploitation de Sites Internet > Les fondations d'un site

Caliméro431

lundi 26 septembre 2005 à 15:29

: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

lundi 26 septembre 2005 à 15:57

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

+++

Caliméro431

lundi 26 septembre 2005 à 17:14

CITATION(CarGoZ @ lundi 26 septembre 2005, 15h57)

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

+++

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

lundi 26 septembre 2005 à 17:21

Salut !

CITATION

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 :

CODE

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

lundi 26 septembre 2005 à 17:54

CITATION

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:

CODE

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

lundi 26 septembre 2005 à 18:41

CITATION(Caliméro431 @ lundi 26 septembre 2005, 18h14)

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

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 :

CODE

<body>
<div id="page">
ici tu mets tout le contenu de ton body actuel
</div>
</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

CODE

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

mercredi 28 septembre 2005 à 11:03

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

CODE

<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&eacute;giment du g&eacute;nie</li>
    <li>la 5e CIR (en partie)</li>
    <li>chant</li>
    <li>insigne</li>
    <li>t&eacute;l&eacute;chargements</li>
    <li>journ&eacute;es d&eacute;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)

Dudu

mercredi 28 septembre 2005 à 13:23

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

jeudi 29 septembre 2005 à 16:21

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

vendredi 30 septembre 2005 à 09:19

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

vendredi 30 septembre 2005 à 21:12

CITATION(NorSeb @ vendredi 30 septembre 2005, 10h19)

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

Elle ne l'est pas

Caliméro431

jeudi 6 octobre 2005 à 16:43

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.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.