alignement à gauche

Version imprimable

02/11/2010, 11h56
Prisss

alignement à gauche
Bonjour,

j'ai un problème tout bête, j'aimerai que le titre de ma page s'aligne à gauche à coté de mon sommaire mais je n'arrive pas à le placer ou j'aimerai. quand je change des parties de mon code cela ne change absolument rien.

j'ai testé :
Code:

1 2 3 4 5 6 <table> <tr> <td valign="left"><font color="#0061C9"><h1>Notre Savoir-Faire</h1></font></align> </td> </tr> </table>
mais cela ne fonctionne pas

et j'ai également aussi essayé :

Code:

<align="left"><font color="#0061C9"><h1>Notre Savoir-Faire</h1></font></align>

mais quand je modifie un truc dans le code (je ne sais plus quoi avec tout les essais que j'ai fais) cela bouge tout le texte. voici le code qui permet de positionner le texte :

Code:

<div id="Contenu" style="position:absolute; width:790px; height:365px; z-index:5; left: -200px; top: 230px">

merci =)
Qu'est ce que j'aurai dû faire ?
02/11/2010, 12h24
Bisûnûrs

Citation:

Envoyé par Prisss

Qu'est ce que j'aurai dû faire ?

Apprendre à coder correctement et non pas :
1. Bidouiller avec des balises qui n'existent que dans ton imagination
2. Pondre du code vieux de 10 ans

Je te conseille de lire ça :
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Et si tu dis ne pas avoir le temps, crois-moi, tu passeras moins de temps à lire et à comprendre ce tuto plutôt que de passer ton temps à poser des questions sur le forum parce que ton code rustique et tes bidouilles ne fonctionnent pas.
02/11/2010, 13h53
Prisss

en même temps je suis qu'étudiante j'ai pas 10 ans d'info derrière moi et vu que je comprend pas grand chose je fais ce que je peux et pi un des 2 codes que j'ai mis je l'ai trouvé sur un site internet dont l'article date d'y a pas longtemps donc je vois pas ou y a du code vieux de 10 ans.

et en même temps si on vient ici c'est pour se faire aider dans nos problèmes pas ce faire "envoyer bouler"

mais merci pour le tuto je vais essayer de le comprendre !!

mais j'ai réussi plus ou moins avec mon code "vieux de 10 ans" et avec mes bidouilles !!
02/11/2010, 14h26
Bisûnûrs

Vraiment désolé si mon message a pu te paraître agressif, ce n'est pas le but voulu et je n'ai pas voulu que tu croies que je t'envoie bouler. ;)

Le fait est que tu utilises du code obsolète et que j'ai voulu te mettre en garde contre ce genre de code. Je ne sais pas sur quel site tu as pu trouver un code aussi archaïque, mais de tout évidence ils ne se sont pas mis à la page et continuent à propager une façon de coder en HTML qui ne se fait plus depuis des temps immémoriaux.

L'article suivant est peut-être un peu long à digérer, donc sans doute à lire en plusieurs fois, mais il décrit bien le rôle des éléments les plus utilisés et met en garde contre leur mauvaise utilisation :
http://j-willette.developpez.com/tut...bases-du-html/

Je suis bien conscient que lorsque l'on débute on ait un peu de mal, on est tous passés par là. ;) C'est pour ça qu'il faut dès le départ se forcer à utiliser les bonnes manières de codage, et c'est ce qu'on essaie d'inculquer ici, ne pas aider pour aider, mais aider pour faire évoluer les débutants dans le droit chemin. Donc encore désolé si mes manières ont été un peu brutales.
02/11/2010, 14h31
Bisûnûrs

Et pour répondre à ta question initiale, le mieux serait que tu nous montres le code complet, qu'on puisse te dire ce qui va et ce qui ne va pas. :)

pas grave ;) mais bon vu que j'ai beaucoup de mal j'arrive à rien -_-

enfin voici tout mon code :

Code:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
	<head>
		<title>blabla</title>
				<style type="text/css">
                                        #Tableau_gauche
                                                {
                                                position:absolute;
                                                text-align:left;
                                                border-width:3px;
                                                border-style:double;
                                                border-color:black;                                              
                                                } 
                                        #Tableau_droite
                                                {
                                                left:30%;
                                                text-align:left;
                                                position:absolute;                      
                                                }
                                </style>
	</head>
 
	<body>
<!--image en bannière-->
		<center><img src="ban\ban_savfaire.jpg" height=200 width=1250/></center>
 
<!--tableau pour le sommaire-->
	<div id="Tableau_gauche">
		<center><h4>Sommaire</h4></center>
			<center><image src="images\logo_emb.jpg" width="135" height="90" alt="logo de l'entreprise"></center><p>
				<align="right"><b><a href="nv_accueil.html" class=bouton>Accueil</a></b><p>
				<align="right"><b><a href="savfaire.html" class=bouton>Notre savoir-faire</a></b><p>
				<align="left"><b><li><a href="telephonie.html" class=bouton>Téléphonie</a></b><p>
				<align="left"><b><li><a href="donnee.html" class=bouton>Données</a></b><p>
				<align="left"><b><li><a href="image.html" class=bouton>Images</a></b><p>
				<align="left"><b><li><a href="controle_acces.html" class=bouton>Contrôle d'accès</a></b><p>
				<align="left"><b><li><a href="electricite.html" class=bouton>Electricité</a></b><p>
				<align="right"><b><a href="exp_ana.html" class=bouton>Expertise/Analyse</a></b><p>
				<align="right"><b><a href="moyen.html" class=bouton>Nos moyens</a></b><p>
				<align="right"><a href="ref.html" class=bouton><b>Nos r&eacute;f&eacute;rences</b></a><p> 
				<align="right"><b><a href="contact.php" class=bouton>Contactez-nous</a></b><p>
				<u><b>Pour nous contacter</u> :<br />
				<align="left"><b><font color="#0061C9">EMB Normandie<br>
 
    </font>
	</div>
 
<!--tableau pour le corps du site-->
	<div id="Tableau_droite"> 
<!--titre de la page-->
<font color="#0061C9"><h1>Notre Savoir-Faire</h1></font>	
<!--position du corps du tableau droit-->
	<div id="Contenu" style="position:absolute; width:790px; height:365px; z-index:1; left: -200px; top: 230px"> 
 
 
<!--paragraphe "Aide à la décision-->
		<p>bla<br />
		bla
 
<!--Titre du paragraphe "les domaines couverts..."-->
<table width="778" border="0" cellspacing="0" cellpadding="5">
    <tr class="arial12"> 
		<td width="26" height="20" valign="top" bgcolor="#66CCCC"><b><img src="images/puces/puce02.gif" width="26" height="26"></b></td>
		<td width="732" valign="middle" bgcolor="#EEFFFF">
			<p> <b>Les domaines couverts par les r&eacute;seaux informatiques sont 
			multiples, ils n&eacute;cessitent des connaissances sp&eacute;cifiques 
			pour chacun d'eux :</b>
		</td>
    </tr>
</table>
 
<!--corps du paragraphe-->
	bla<p>
	bla<p>
 
<!--cadre performance/coût-->
<table width="34%" border="0">
    <tr> 
		<td rowspan="2" width="126">au meilleur rapport :</td>
		<td rowspan="2" width="133"> 
			<table width="100%" border="1" bordercolor="#000000" bordercolordark="#000000">
				<tr> 
					<td> 
						<div align="center">Performance</div>
					</td>
				</tr>
				<tr> 
					<td> 
						<div align="center">Co&ucirc;t</div>
					</td>
				</tr>
			</table>
		</td>
    </tr>
</table>
	</div>
	</body>
</html>

les 3/4 de ce qui est à été fait par une autre personne (celui qui à déjà fait le site je dois le remettre à jour et le rendre plus lisible)

et mon problème se situe au début du tableau gauche, le titre de la page se met sous la photo alors que je veux le contraire. et dans le code que je viens de mettre le titre est bien à gauche mais du coup le titre est sous la photo -_-

et merci pour ton aide =)

j'ai pas donné le bon code. =/

celui ci est le "bon" :

Code:

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
	<head>
		<title>EMB NORMANDIE - Votre partenaire Réseau - Informatique, Téléphonie, Contrôle d'accès, Sécurité, Electricité Associée</title>
			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
				<style type="text/css">
                                        #Tableau_gauche
                                                {
                                                position:absolute;
                                                text-align:left;
                                                border-width:3px;
                                                border-style:double;
                                                border-color:black;                                              
                                                } 
                                        #Tableau_droite
                                                {
                                                left:30%;
                                                text-align:left;
                                                position:absolute;                      
                                                }
                                </style>
	</head>
 
	<body>
<!--image en bannière-->
		<center><img src="ban\ban_savfaire.jpg" height=200 width=1250/></center>
 
<!--tableau pour le sommaire-->
	<div id="Tableau_gauche">
		<center><h4>Sommaire</h4></center>
			<center><image src="images\logo_emb.jpg" width="135" height="90" alt="logo de l'entreprise"></center><p>
				<align="right"><b><a href="nv_accueil.html" class=bouton>Accueil</a></b><p>
				<align="right"><b><a href="savfaire.html" class=bouton>Notre savoir-faire</a></b><p>
				<align="left"><b><li><a href="telephonie.html" class=bouton>Téléphonie</a></b><p>
				<align="left"><b><li><a href="donnee.html" class=bouton>Données</a></b><p>
				<align="left"><b><li><a href="image.html" class=bouton>Images</a></b><p>
				<align="left"><b><li><a href="controle_acces.html" class=bouton>Contrôle d'accès</a></b><p>
				<align="left"><b><li><a href="electricite.html" class=bouton>Electricité</a></b><p>
				<align="right"><b><a href="exp_ana.html" class=bouton>Expertise/Analyse</a></b><p>
				<align="right"><b><a href="moyen.html" class=bouton>Nos moyens</a></b><p>
				<align="right"><a href="ref.html" class=bouton><b>Nos r&eacute;f&eacute;rences</b></a><p> 
				<align="right"><b><a href="contact.php" class=bouton>Contactez-nous</a></b><p>
 
    </font>
	</div>
 
<!--tableau pour le corps du site-->
	<div id="Tableau_droite"> 	
 
<!--position du corps du tableau droit-->
	<div id="Contenu" style="position:absolute; width:790px; height:365px; z-index:1; left: -200px; top: 230px"> 
 
 
<!--titre de la page-->
<font color="#0061C9"><h1>Notre Savoir-Faire</h1></font>
<!--titre du paragraphe "Aide à la décision"-->
	<table width="740" border="0" cellspacing="0" cellpadding="5">
		<tr class="arial12"> 
			<td width="18" height="20" valign="top" bgcolor="#A400A4">&nbsp;</td>
			<td width="702" valign="middle" bgcolor="#E3E9EA"><b>AIDE A LA D&Eacute;CISION 
			</b></td>
		</tr>
	</table>
 
<!--paragraphe "Aide à la décision-->
		bla<p>
		bla<p>
 
<!--Titre du paragraphe "les domaines couverts..."-->
<table width="778" border="0" cellspacing="0" cellpadding="5">
    <tr class="arial12"> 
		<td width="26" height="20" valign="top" bgcolor="#66CCCC"><b><img src="images/puces/puce02.gif" width="26" height="26"></b></td>
		<td width="732" valign="middle" bgcolor="#EEFFFF">
			<p> <b>Les domaines couverts par les r&eacute;seaux informatiques sont 
			multiples, ils n&eacute;cessitent des connaissances sp&eacute;cifiques 
			pour chacun d'eux :</b>
		</td>
    </tr>
</table>
 
<!--corps du paragraphe-->
	bla<p>
	bla<p>
 
<!--cadre performance/coût-->
<table width="34%" border="0">
    <tr> 
		<td rowspan="2" width="126">au meilleur rapport :</td>
		<td rowspan="2" width="133"> 
			<table width="100%" border="1" bordercolor="#000000" bordercolordark="#000000">
				<tr> 
					<td> 
						<div align="center">Performance</div>
					</td>
				</tr>
				<tr> 
					<td> 
						<div align="center">Co&ucirc;t</div>
					</td>
				</tr>
			</table>
		</td>
    </tr>
</table>
 
 
 
<!--image début du tableau droit-->
  <div id="Layer1" style="position:absolute; left:145px; top:61px; width:126px; height:97px; z-index:2"> 
    <img src="gifs\etude\stress2.jpg" width="163" height="168"></div>n
	</div>
	</body>
</html>

02/11/2010, 14h58
Bisûnûrs

Hum .. effectivement là il y a un très gros travail de fond à faire ...

Déjà, comme le stipule le lien que je t'ai donné juste au-dessus, tu devrais commencer par mettre un DOCTYPE à ton document (lire I-B et I-C : http://j-willette.developpez.com/tut...ge=page_1#LI-B).

Ensuite, tu devrais commencer à jeter tout ce code et essayer de tabler sur la mise en page par CSS (cf le premier lien que je t'ai donné dans la discussion).

Enfin, et ça vaut pour tous les éléments de style (couleurs, alignements, tailles de texte, etc), les éléments center et font doivent être supprimés et remplacés par leurs équivalents CSS.

Tu verras dans le premier lien, paragraphe II qu'il y a un exemple de mise en page qui ressemble très fortement à ce que tu souhaites avoir (excepté le footer). Mon conseil est d'essayer de partir de cet exemple pour obtenir ce que tu souhaites.

Evidemment, si tu as des soucis à le mettre en place on est toujours là pour te donner un coup de main.

Edit : Ok, j'ai débattu sur le mauvais code. :aie: Enfin cela dit heureusement que ce que j'ai dit vaut aussi pour le second.

Pour ton problème d'image, tu peux essayer de la mettre en background (voir cours sur le CSS) plutôt que dans un "layer" en position absolue. De manière générale, il faut éviter le positionnement absolu pour faire de la mise en page. Ce positionnement est surtout utilisé pour la création d'overlay, de tooltips, ou autres effets de style de ce genre.
02/11/2010, 15h11
Prisss

le DOCTYPE j'y pense je vais le mettre quand j'aurai fini tout le "maquettage" du site avec les meta.

enfait dans le code que j'ai mis j'ai juste fais le css pour les tableaux le reste à été fait par l'autre personne, et elle était en réseau et pas en développement.

donc la en faisant avec du css ce que j'ai fais pour les tableaux je peux les garder et les mettre dans la même feuille de style que le reste pour les alignements ? mais sinon est-il dérangeant de laisser le css pour les tableaux dans le code html ? (je dis ca mais j'ai pas rejeter un oeil sur le tuto du css depuis tout à l'heure) donc peut-être question auquel je vais me répondre toute seule.
02/11/2010, 15h53
Prisss

bon j'ai essayé avec le css et je me suis répondu toute seule à la question pour les tableaux.

par contre je voudrais "décollé" le contenu du menu parce que j'ai fais une bordure pour le menu pour éviter la couleur en background mais le contenu du "div contenu" est collé au "div menu" et je voudrais un espacement entre les 2.

comment puis je faire ??
02/11/2010, 16h03
Bisûnûrs

Citation:

Envoyé par Prisss

le DOCTYPE j'y pense je vais le mettre quand j'aurai fini tout le "maquettage" du site avec les meta.

Hum, il faut le mettre dès le début, sinon tu risques d'avoir quelques surprises quand tu le rajouteras. Certains navigateurs interprètent des choses différemment avec et sans DOCTYPE.

Citation:

Envoyé par Prisss

mais sinon est-il dérangeant de laisser le css pour les tableaux dans le code html ?

C'est pas trop dérangeant non, mais c'est mieux d'avoir une feuille de style quand même, histoire de bien séparer le fond, la forme, les différents langages, toussa quoi (+ quelques autres trucs).

Citation:

Envoyé par Prisss

par contre je voudrais "décollé" le contenu du menu parce que j'ai fais une bordure pour le menu pour éviter la couleur en background mais le contenu du "div contenu" est collé au "div menu" et je voudrais un espacement entre les 2.

Tu peux mettre un margin-right sur ton menu par exemple. :) (En CSS bien sûr)
02/11/2010, 16h12
Prisss

oki =)

bon j'ai mis le margin-right et c'est niquel, maintenant je vais faire les doctype comme tu me conseil de le faire.

par contre j'ai voulu changé sur une autre page ou y a une photo entouré de texte et ca fait un résultat un peu bizarre donc je vais regarder encore pour essayer de me dépatouiller toute seule sinon je ferais encore appel à ta précieuse aide =)

en tout cas merci pour tout tu m'aides beaucoup ^_^