Decalage HTML

Decalage HTML - HTML/CSS - Programmation

Marsh Posté le 05-10-2005 à 13:08:26    

Tout d'abord, bonjour toute la clique,
mon problème devrait surement vous paraitre simplissime, j'expose :
Vu le prix exhorbitant des formations informatique par correspondance, j'ai donc décidé de me lancer dans l'apprentissage du (x)HTML/CSS par moi-même avec l'aide de quelques tutoriaux disponibles à droite à gauche. J'ai donc après quelques "heures" commencé à faire ma première page qui fonctionne à merveille en local.
Seulement, après avoir "mis en ligne" le fameux site, je me rends compte que sur d'autres pc's que le mien, il est completement décalé par rapport à ce que je vois moi sur mon pc. les tableaux ne font plus la même taille, il y a même une barre de défilement horizontale qui s'est rajoutée (dûe au décalage).
J'ai pourtant pris soin de mettre toutes mes 'tailles' en % et non en px.
Je ne sais pas si je me suis bien fais comprendre, mais si oui, tant mieux et merci pour votre aide !
 
 
Changé % en px même resultat


Message édité par XstaZ le 05-10-2005 à 14:21:07

---------------
Respect my authority !
Reply

Marsh Posté le 05-10-2005 à 13:08:26   

Reply

Marsh Posté le 05-10-2005 à 13:22:32    

on va faire simple :  
 
nous ne sommes ni des voyants, ni des mediums, on peut pas deviner ton code. Ici on travail qu'avec du code, alors ca serait bon de nous filer l'adresse de ton site que l'on t'indique tous les defauts que tu as et si tu utilise correctement les xHTML/CSS et JS

Reply

Marsh Posté le 05-10-2005 à 13:33:54    

Pas de souci l'aimable, j'aurai pu deviner :
http://webmaster.concept.ifrance.com/


---------------
Respect my authority !
Reply

Marsh Posté le 05-10-2005 à 14:16:54    

c'est ou ke tu vois du XHTML/CSS dans ton site moi je ne vois ke des table

Reply

Marsh Posté le 05-10-2005 à 14:20:13    

Le CSS:
 
body {
width:70%;
background-color:black;
}
#table1 {
height:400px;
width:850px;
margin-right:120px;
margin-left:200px;
margin-top:30px;
border-color:silver;
border-style:solid;
border-width:1px;
}
.tdliens {
border-color:silver;
}
#tableban {
margin:auto;
margin-left:360px;
margin-bottom:0px;
margin-top:5px;
}
.tdban {
border-color:black;
}
#sign {
margin-top:-35px;
margin-left:450px;
}
.tdsign {
border-color:black;
}
.center {
background-image:url("../image/hcw.gif" );
background-repeat:no-repeat;
background-position:230px 20px;
font-family:verdana, sans-serif;
font-size:80%;
color:silver;
text-align:center;
background-color:transparent;
border-color:silver;
border-style:solid;
border-width:2px;
}
.menul {
margin-left:-35px;
color:silver;
}
td {
font-family:verdana, sans-serif;
font-size:80%;
color:silver;
text-align:center;
background-color:transparent;
border-color:silver;
border-style:solid;
border-width:2px;
}
a {
text-decoration:none;
color:silver;
}
a:hover, a:focus {
text-decoration:none;
color:#6c9997;
}
.LinkN {
color:yellow;
}


---------------
Respect my authority !
Reply

Marsh Posté le 05-10-2005 à 14:21:20    

height:400px;
width:90%;
margin-right:25%;
margin-left:25%;
margin-top:5%;
 
ton table1 c'est à dire ton tableau principal, tu vois les dimensions ??
une page c'est 100%, ici tno tableau fait 90%
mais là tu nous fait du : 90+25+25, on atteint les 140% de largeur, marges externes comprises.
 
le mieux serait plutot de faire ceci :  
margin:5% auto 0%  (haut droite/gauche bas)
 
ca centrera ton tableau.
au passage, j'ai rarement vu des marges (top et bottom) en % lol

Reply

Marsh Posté le 05-10-2005 à 14:31:31    

largeur du tableau table1 + marge gauche du tableau #tableban / taille du body (vu que le body est défini en %)
(850 px +360 px )/ (70%) =
(850+360)/0.70  
= 1210/0.7  
= 1728
 
Et aprés tu t'étones que ton site dépasse alors qu'il lui faut presque 1800 pixels pour s'afficher? Même si t'as tout mis en % dans le html, c'est loin d'être le cas dans le css.

Reply

Marsh Posté le 05-10-2005 à 14:32:09    

ha ben visiblement, il y avait plusieurs défauts dans ton code. :lol:

Reply

Marsh Posté le 05-10-2005 à 14:42:23    

et en plus pourquoi mettre des TABLEAUX alors qu'en CSS c'est réglé en 3 coups de cuillère à pot

Reply

Marsh Posté le 05-10-2005 à 14:54:28    

En effet XstaZ, faire un site (X)Html / CSS ne consiste pas a styliser ses tableaux, ca consiste justement a ne plus en faire.
 
Il faut séparer le fond de la forme : un tableau (<table> ) ne doit etre utilisé que ce pour quoi il a été crée a la base (c est a dire mettre en forme des données, des chiffres etc et non pour organiser une page web).
 
Tu dois garder a l esprit qu une page web doit se construire de maniere semantique est coherente :  
 
Tu veux faire apparaitre un menu ? Utilise une liste ordonnées (<ul> )
Tu veux faire un paragraphe et le placer dans ta page, pas besoin de le mettre dans une cellule de tableau, tu utilise juste un <p> et tu geres son affichage grace a ta css.
 
etc etc etc. Tu verras que tout est plus simple comme ca.
 
La ou tu vas t amuser c est pour faire en sorte que ce que tu programmes aies la meme tronche sur tous les browsers (et la c est une autre histoire :))
 
 

Reply

Marsh Posté le 05-10-2005 à 14:54:28   

Reply

Marsh Posté le 05-10-2005 à 15:04:59    

shurik'n a écrit :

En effet XstaZ, faire un site (X)Html / CSS ne consiste pas a styliser ses tableaux, ca consiste justement a ne plus en faire.
 
Il faut séparer le fond de la forme : un tableau (<table> ) ne doit etre utilisé que ce pour quoi il a été crée a la base (c est a dire mettre en forme des données, des chiffres etc et non pour organiser une page web).
 
Tu dois garder a l esprit qu une page web doit se construire de maniere semantique est coherente :  
 
Tu veux faire apparaitre un menu ? Utilise une liste ordonnées (<ul> )
Tu veux faire un paragraphe et le placer dans ta page, pas besoin de le mettre dans une cellule de tableau, tu utilise juste un <p> et tu geres son affichage grace a ta css.
 
etc etc etc. Tu verras que tout est plus simple comme ca.
 
La ou tu vas t amuser c est pour faire en sorte que ce que tu programmes aies la meme tronche sur tous les browsers (et la c est une autre histoire :))


On dirait un discours que j'ai tenu ya un mois sur un des topics [:petrus75]

Reply

Marsh Posté le 05-10-2005 à 15:23:16    

On tient tous des débats similaires
 
Sur alsacréations y a plein de mises en page en css, et moi j'en ai fait d'autres avec des floats et des colonnes et des memes des galeries d'images. Florent et masklinn en ont fait aussi il me semble. Sans oublier les exemples de scripts JS non intrusifs de gatsu et masklinn, ca fait un bon paquet d'exemples déjà [:pingouino]


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 05-10-2005 à 16:15:46    

rien que dans ce forum doit y avoir une mega source de code, masi bon va les retrouver parmis tout ce bordel

Reply

Marsh Posté le 05-10-2005 à 18:02:31    

Ouaw, on dirait que j'ai encore du boulot alors.
En tout cas merci à vous jvais reprendre à zéro je pense.


---------------
Respect my authority !
Reply

Marsh Posté le 18-01-2006 à 15:43:20    

Bonjour,
 
J'ai également un problème de décalage sur plusieurs pages ainsi que sur l'affichage de certaines photos...
 
mon site: http://www.indopassion.fr.tc
 
problème de décalage sur les pages:
- discographie
- photos
 
Problème d'affichage:
- photos
 
j'ai beau changer la casse, refaire la page etc.. mais y a rien a faire!

Reply

Marsh Posté le 18-01-2006 à 16:21:58    

maogirl > Ton menu est totalement inutilisable pour moi : que des croix rouge à la place des applet java. il faut dire que je n'ai pas installer de version de java sur l'ordi du boulot. J'espéres que tes applets java font des chôses qu'on ne peut pas faire en (x)html/css.
 
Du coup, je peux pas t'aider dessuite, ce soir peut être si d'autres l'ont pas fait avant et si j'ai du temps.

Reply

Marsh Posté le 18-01-2006 à 16:32:10    

Ok sans problème...
 
en fait, j'ai créé le site sur Front Page (je me débrouille pas encore assez pour faire mieux!) et j'ai inséeré des boutons sensitifs que j'ai un peu améliorés...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed