Problème de mise en page HTML

**Deallyra** · 15/05/2007, 11h43

Bonjour,

J'ai un problème assez peu commun à mon égard avec une bête mise en page.
Je n'arrive pas à faire tenir ma page dans la fenêtre (il reste l'ascenseur habituel à droite de l'écran alors que j'ai mit ma table principale en 100%) et... mes images jouent au yoyo...
Elles s'agrandissent, rapetissent... Du moins...Les images du menu. J'ai gagné un contour rouge sur trois de mes cinq boutons de menu...
Bref, c'est pas la joie et je n'arrive pas à le débugger...

C'est ma page V_page_haut.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<html>
	<head> <!-- Début En-tête-->
		<title>Site sur lequel je travaille		</title>
		<link rel = "stylesheet" type = "text/css" href = "Style/Feuille_De_Style.css"/> <!--Appel de la feuille de style-->
		<meta http-equiv = "content-type" content = "text/html; charset=ISO-8559-1"/> <!--Rendre de manière lisible toute les caractères accentués et spéciaux-->
	</head> <!-- Fin En-tête-->
	<body> <!-- Début Corps de la page-->
		<table class = "table_global" cellspacing = "0" cellpadding = "0">
			<tr class = "tr_logo">
			    <img src = "Logo2.GIF" alt = "logo" />
				<!--Placer l'image-->
			</tr>
			<tr class = "tr_defilant" rowspan = 2> <!-- Début du script permettant de faire défiler un texte-->
				<marquee class = "txt_defilant" behavior = "scroll" direction = "left" scrollamount = "4" scrolldelay = "0" onmouseover = "this.stop()" onmouseout = "this.start()">
					<font size = "2">
						<strong>
							<em>
								Bienvenue
							</em>
						</strong>
						<font color = "#0000CD">
							<strong>
								<?php /* Début de lecture de fichier*/
                                                                        $fichier = "test_news.txt"; 
                                                                        $tab = file($fichier); 
                                                                        for( $i = 0 ; $i < count($tab) ; $i++ )
                                                                        {
                                                                                echo
                                                                                        $tab[$i]
                                                                                ;
                                                                        }
                                                                ?> <!--Fin de lecture du fichier-->
							</strong>
						</font>
					</font>
				</marquee>
			</tr> <!-- Fin du script permettant de faire défiler un texte-->
			<tr> 
			    <td width="200" valign="top"> 
					<table class = "table_menu">
						<tr> 
							<td>
								<a href="V_Menu.php">
									<img class = "image_menu" src="fr_menu.gif" alt = "menu1" />
								</a>
							</td>
						</tr>
						<tr> 
							<td>
								<a href="V_Menu.php">
									<img class = "image_menu" src="fr_menu.gif" alt = "menu2" />
								</a>
							</td>
						</tr>
						<tr> 
							<td>
								<a href="V_Menu.php">
									<img class = "image_menu" src="fr_salarie.gif" alt = "menu3" />
								</a>
							</td>
						</tr>
						<tr> 
							<td>
								<a href="V_Formation.php">
									<img class = "image_menu" src="fr_formation.gif" alt = "menu4" />
								</a>
							</td>
						</tr>
						<tr> 
							<td>
								<a href="V_Menu.php">
									<img class = "image_menu" src="fr_menu.gif" alt = "menu5" />
								</a>
							</td>
						</tr>
					</table>
			    </td>
				<td>

Je ne vous donne pas le code du bas de la feuille puisque ça ne change en rien mon problème.
Voici les images et ma feuille de style.
Pièce jointe 13512
Pièce jointe 13510
Pièce jointe 13511

**FraK** · 15/05/2007, 13h50

Le mieux pour ne pas avoir de scroll sur ton site, c'est de t'adapter à l'utilisateur
La majorité des resolutions restent encore 1024*768
Donc pour ne pas avoir de problèmes avec les dimensions de ton site, tu peux enlever 200 px pour la largeur, voir meme 100, mais la hauteur doit tourner autour de 500 - 550px
en fonction de ca, tu traces ton design, tu poses tes tableaux avec ton éditeur html que tu dimmensionnes également pour coller avec les tranches de ton design, et à chaque cadre de ton tableau, tu inserts ton image.

**Deallyra** · 15/05/2007, 14h00

Mon éditeur c'est Notepad++

Merci mais... Mes images de menu gagnent toujours en largeur avec IE et en espace entre elles avec Firefox...
Bon avec Firefox c'est presque une fois sur 30 mais c'est quand même là...

**FraK** · 15/05/2007, 14h48

c'est que tu dois pas bien dimensionner tes cadres
normalement si tu les tailles aux dimensions de tes images y a pas de soucis
dreamweaver a même une option qui fait en sorte de te pondre la page html directement a partir de l'image globale, donc plus besoin de faire tes cadres et autres.

**Deallyra** · 15/05/2007, 14h57

...
Je préfère coder à mains nues

Dreamweaver... On verra plus tard...

En tout cas, j'ai réussi...
Je sais pas trop comment mais c'est bon désormais.
Merci Frak.

**blueice** · 15/05/2007, 14h58

Il ou elle utilise Notepad pas DW.
De plus ne pas oublier que les cadres ne servent pas à la mise en forme !

http://www.cybercodeur.net/weblog/pr...tions/seybold/

**Deallyra** · 15/05/2007, 15h03

J'ai lu mais... Je n'ai pas tout comprit.

J'avais déjà vu "ton" lien dans une autre page...
En gros, j'ai retenu qu'il fallait utiliser les feuilles CSS... chose que je faisais déjà.

**Deallyra** · 15/05/2007, 15h07

Abuserais-je te demandant d'éclairer ma lanterne?

**blueice** · 15/05/2007, 15h16

En gros, j'ai retenu qu'il fallait utiliser les feuilles CSS... chose que je faisais déjà.

Horreur !

Les tableaux servent à présenter des données tabulaires, point barre ! (Tableaux de prix, etc,...) ;-)
A rien d'autre !!!

Pour la mise en page, il faut impérativement utiliser des div, qui sont "l'équivalent" (façon de dire) des tables que tu utilises actuellement.
Ensuite pour le design, il faudra utiliser les CSS.

Ce qui permet de séparer le contenu de la forme et ainsi, tu gagnes sur tous les tableaux :
Meilleure référencement
Meilleure accessibilité
Réduction du code et meilleure lisibilité
Modifications beaucoup plus faciles et rapides
...
...

Les tableaux pour la mise en page, c'est MAL !

Des exemples de mise en page en XHTML/CSS que je suis en train de construire au fur et à mesure :
http://www.dimension-internet.com/bl...es-html-en-css

Regarde le code source pour comprendre

**FraK** · 15/05/2007, 15h28

bof
DW le fait de lui même pour ceux qui l'utilisent, pourquoi se priver (tout le monde n'a pas le même niveau dans ce domaine hein ;p)
et je suis ok sur le fait des <div> même si <table> (border 0) <td> ou <tr> restent majoritairement utilisés par quasiment tout le monde

**Deallyra** · 15/05/2007, 15h30

Gloups...

Euh... pour éviter que tu ne me mordes... un os suffira?..

Merci pour ta lumière je vais donc tenter de virer mon tableau et de le remplacer par des divs.
Pas glop les profs... Ils nous apprennent le

MAL

**FraK** · 15/05/2007, 15h32

ou le plus utilisé ...
j'ai appris la même chose, et ca pose pas plus de problèmes que ca
ca reste un choix perso pour finir

**Deallyra** · 15/05/2007, 15h36

Mais... les div sont des blocs de texte...
On ne peut pas les mettres les uns à cotés des autres seulement dessus dessous...

(je sens que j'ai dit une connerie...)

**blueice** · 15/05/2007, 15h44

(je sens que j'ai dit une connerie...)

Oui

Tu peux tout faire avec les div, les emboîter, les mettre côte à côte,etc...
Pour faire plaisir à tes yeux, va jeter un oeil ici :
http://www.cssbeauty.com
Tous les sites sont sans table uniquement avec des div et CSS.

Et FRAK arrête de dire que c'est un choix, c'est une logique !
C'est pas parce que la plupart des gens font n'importe quoi, qu'il faut faire la même chose !

DW le fait de lui même pour ceux qui l'utilisent

Quoi les tableaux ? Regarde la nouvelle version dans ce cas, tu réviseras peut-être ton jugement !

**FraK** · 15/05/2007, 15h44

non non, ne t'inquietes pas
par le code html directement tu as raison
mais par le css, tu peux

**FraK** · 15/05/2007, 15h49

je dirais rien blueice, les discussions avec toi sont à sens unique ^^
CS3 < CS2 c'est le principal à retenir pour le moment

**blueice** · 15/05/2007, 15h58

Mes discussions sont à sens unique

Pas mal !
Mais nous sommes là pour aider les gens, pas pour les laisser dans l'ignorance et dans l'erreur !

Le web a évolué, c'est fini le temps de la débrouille avec des tableaux à deux balles et des "spacers".

**Deallyra** · 15/05/2007, 16h03

Pour faire plaisir à tes yeux

Mes yeux sont ébahis devant une si magnifique incrémentation lorsque j'affiche le code source.
La lecture de ce code est si aisée...

Tu es tombé dedans quand tu était petit Blueice?
Parce qu'en t'entendant en parler, on croirait à une simple chose facile à maitriser...
Mais je n'avais jamais fait de DIV... et je n'utilisait pas non plus ID...
De plus, n'aurais-je pas besoin de la feuille de style pour comprendre comment s'organise un DIV par rapport à un autre? Ou est-ce par un de ces attributs ce dont je doute puisqu'il n'y en a pas dans cet exemple...

**FraK** · 15/05/2007, 16h07

je suis ok blueice (completement)

**blueice** · 15/05/2007, 16h08

Ce n'est vraiment pas compliqué

, je t'assure.
Il faut juste repartir de zéro en oubliant ce que tu sais des tableaux.

Et oui tu auras besoin des feuilles de styles pour comprendre le positionnement des éléments de ces sites.
Mais ils sont l'œuvre de personnes habituées.

Il faut commencer petit et ça va très vite ensuite...

Problème de mise en page HTML

HTML

Discussions similaires

Partager

Partager