Aller au menu - Aller au contenu
Inscris-toi au e-camp "Héberge ton jeu Facebook sur Azure" de Microsoft vendredi 25 mai à 13h30 !

Problème d'alignement

...des div

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne gnix # Posté le 02/07/2008 à 21:55:35
Avatar
Bonsoir,
Tout est dans le titre.
Comme vous pouvez le voir la div de droite est en décalé :( .
Voici le code:
Code : HTML
  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
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 <head>
  <title>Test</title>
  <style type="text/css">

	.site {
	 width:700px;
	 height:900px;
	 position:absolute;
	 top:50px;
	 left:50%;
	 margin-left:-350px;
	}
	
	.logo {
	 width:100%;
	 height:100px;
	 background-image:url(logo.png);	
	}
	
	.menu {
	 margin-top:5px;
	 border: 1px solid;
	 border-color:#000000;
	 float: left;
	 width:125px;
	 height:200px;
	 background-color:#f9e8c6;	
	 text-align:center;
	}
	
	.menu_1 a {
	 float:left;
	 width:19%;
	 height:30px;
	 border:none;
	 text-align:center;
	 text-decoration:none;
	 color:#222222;
	 font-size:30px;
	}
	
	.menu_1 {
	 width:100%;
     height: 30px;
	}
	
	.menu_1g {
	 width:13px;
     height: 100%;
	 background-image:url(menu1g.bmp);
	 float: left;
	}
	.menu_1c {
	 width:674px;
	 height:30px;
	 background-image:url(menu1c.bmp);
	 margin-left: 13px;
     margin-right: 13px;
	}
	.menu_1d {
	 width:13px;
	 height: 100%;
	 background-image:url(menu1d.bmp);
	 float: right;
	}
	
	.contenu {
	 margin-top:5px;
	 border: 1px solid;
	 border-color:#000000;
	 float: right;
	 width:570px;
	 height:620px;
	 background-color:#fff1d5;	 
	}
	
	.nom_menu {
	 font-size:20px;
	 text-align:center;
	 background-image:url(menu1.png);
	 height:25px;
	 color:#555555;
	}
	
	.menu_liste {
	 list-style-type: none;
	}
	
	.menu_11 {
	 width:700px;
	}
  </style>
 </head>
 <body>
  <div class="site">
   <div class="logo"></div>
   <div class="menu_1">
	<div class="menu_1g">
	</div>
	 <div class="menu_1c">
	  <a href="#">Acceuil</a> <a href="#">lien</a>
	 </div>
	<div class="menu_1d">
	</div>
   </div>
   <div class="contenu">
   bla bla bla bla bla bla
   </div>
   <div class="menu">
	 <div class="nom_menu">Menu</div>
	  <a href="#">lien</a><br/>
	  <a href="#">lien</a><br/>
	  <a href="#">lien</a><br/>
   </div>
  </div>
 </body>
</html>

Pourquoi la div n'est pas aligné ? Et comment faire pour l'aligné ?

Merci, Gnix.
Publicité # Posté le 02/07/2008 à 21:55:35

Hors ligne Yano # Posté le 02/07/2008 à 22:24:48
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Bonjour,

Essaye

Code : HTML
1
2
3
4
5
6
7
<div class="menu_1">
  <div class="menu_1g"></div>
  <div class="menu_1d"></div>
  <div class="menu_1c">
  <a href="#">Acceuil</a> <a href="#">lien</a>
  </div>
</div>

en respectant l'ordre d'apparition à l'écran : g d c (-;


++
Vois ces explications.

N'utilise pas le .bmp pour le web.
Indapté.

Édité le 02/07/2008 à 22:31:09 par Yano
Hors ligne Lapino # Posté le 02/07/2008 à 22:26:01
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Ton div.menu_lc n'est pas flottant. C'est un div standard de type bloc. Et après tout élément de type bloc il est normal qu'on aille à la ligne.

Donc ton div.menu_ld va à la ligne après le div.menu_lc, puis va se coller à droite puisqu'il flotte à droite.

Ce que je ferais: mettre tes 2 divs div.menu_lg et div.menu_lc en flottant à gauche et ton 3è div je lui mets une marge gauche de la taille de tes 2 premiers divs et je ne le fais pas flotter.
Hors ligne gnix # Posté le 02/07/2008 à 22:37:55
Avatar
Citation : Yano
Bonjour,

Essaye

Code : HTML
1
2
3
4
5
6
7
<div class="menu_1">
  <div class="menu_1g"></div>
  <div class="menu_1d"></div>
  <div class="menu_1c">
  <a href="#">Acceuil</a> <a href="#">lien</a>
  </div>
</div>

en respectant l'ordre d'apparition à l'écran : g d c (-;


++
Vois ces explications.

N'utilise pas le .bmp pour le web.
Indapté.


Merci, cela marche. Aussi, pour le bmp, c'est pour des tests, car paint qui est instaler sur ma machine ne génère que des bmp, après j'utiliserai des png avec gimp.

Lapino => Merci quand même.
Hors ligne Lapino # Posté le 02/07/2008 à 22:51:43
Avatar
J'en rajoute une couche mais la méthode préconisée par Yano ne me parait pas très logique. Cela t'oblige à inverser dans ton code 2 éléments qui apparaitront dans l'ordre inverse sur la page vue.

Parfois il arrive qu'on inverse dans le code des choses qui apparaitront dans un ordre différent sur la page vue. Pour optimiser ton référencement, par exemple, tu voudras peut-être faire monter ton texte important le plus haut possible dans ton code (pour que google tombe dessus plus vite), même si dans l'affichage le texte apparait tout en bas.


Mais là tu n'as aucun intêret à agir de la sorte. Mieux vaut rester logique, le bloc gauche puis le centre puis le droit.

Après... chacun fait comme il veut. ;)
Hors ligne Yano # Posté le 02/07/2008 à 23:48:47
Avatar
Citation : Lapino
la méthode préconisée par Yano ne me parait pas très logique.

Il faut parfois abandonner cette logique pour épouser celle de HTML + CSS (-;

Teste
- 1 -
- 2 -
- 3 -
- 4 -

Citation : Lapino
Après... chacun fait comme il veut. ;)



++
Citation : gnix
le bmp, c'est pour des tests

En cas de besoin…

Édité le 03/07/2008 à 00:00:11 par Yano
Hors ligne Lapino # Posté le 03/07/2008 à 00:05:02
Avatar
Je n'ai aucun doute là dessus, ta solution marche.

Si tu prends le cas extrême d'un navigateur qui ne reconnait pas les css, ta page affichera gauche droite centre. Alors qu'il est tout aussi facile de garder la logique structurelle de ton code html gauche centre droite et de n'intervenir que sur ton css.

Citation : yano
Citation : Lapino
Après... chacun fait comme il veut. ;)
Hors ligne Yano # Posté le 03/07/2008 à 00:48:18
Avatar
Citation : Lapino
Si tu prends le cas extrême d'un navigateur qui ne reconnait pas les css, ta page affichera gauche droite centre.

En effet, mais là, ça n'affiche que des images en arrière-plan d'une barre de menu.
Et, dans les conditions que tu évoques, ça peut aussi être un choix d'afficher des infos placées à droite du contenu avant le contenu.

Teste cette page (j'ai remis son 2e menu à sa place) avec cet outil.

Édité le 03/07/2008 à 00:50:22 par Yano
Hors ligne gnix # Posté le 03/07/2008 à 10:46:58
Avatar
Bonjour,
Citation : Lapino
J'en rajoute une couche mais la méthode préconisée par Yano ne me parait pas très logique. Cela t'oblige à inverser dans ton code 2 éléments qui apparaitront dans l'ordre inverse sur la page vue.


Mais là tu n'as aucun intêret à agir de la sorte. Mieux vaut rester logique, le bloc gauche puis le centre puis le droit.

Ne t'a ton jamais dit que seul le résulta conte.
Mais bon comme je conte faire un desing extensible...

Citation : Lapino
Si tu prends le cas extrême d'un navigateur qui ne reconnait pas les css, ta page affichera gauche droite centre. Alors qu'il est tout aussi facile de garder la logique structurelle de ton code html gauche centre droite et de n'intervenir que sur ton css.

Si il n'y a rien dans la div il n'y aura pas de diférence (à par, peut être le saut de ligne).
Citation : Yano
Citation : Lapino
Si tu prends le cas extrême d'un navigateur qui ne reconnait pas les css, ta page affichera gauche droite centre.

En effet, mais là, ça n'affiche que des images en arrière-plan d'une barre de menu.
Et, dans les conditions que tu évoques, ça peut aussi être un choix d'afficher des infos placées à droite du contenu avant le contenu.

Cela n'affichera même pas l'image de fond, carCitation : Lapino
tu prends le cas extrême d'un navigateur qui ne reconnait pas les css
Citation : Yano
Citation : gnix
le bmp, c'est pour des tests

En cas de besoin…

Il pèse combien après instalation ?

Alors, je prendrais la solution la plus conpatible.
Merci de vos remarque.
Citation : Lapino
Après... chacun fait comme il veut. ;)
Hors ligne Yano # Posté le 03/07/2008 à 16:20:48
Avatar
Citation : gnix
Il pèse combien après instalation ?

Rien.
À part quelques cookies, je suppose.
Ça fonctionne en ligne.


Édité le 03/07/2008 à 16:27:48 par Yano

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx