28173 sujets

CSS et mise en forme, CSS3

Problème affichage CSS - Age

Bonjour
Depuis quelques jours, je bataille pour corriger un problème d'affichage par css.
En tombant comme par magie sur un tuto où j'ai vu ce qui pouvais corriger mon problème et puis un autre problème est arrivé.
Maintenant, les images s'agrandissent automatiquement mais uniquement pour IE 7 et pas pour Firefox (pour les autres navigateurs, je sais pas).
visible ici: http://traduc-age.leobaillard.org/test_site/telechargement/telecharge-securite.php?id=1
En parlant de cette page, le menu a également un problème d'affichage.
A part ça, j'ai un autre problème, les images du bas du design se mettent un peu n'importe où.
Voyez plutôt: http://traduc-age.leobaillard.org/test_site/ (le design est pourri, je l'accorde Smiley rolleyes )

Donc voici mon code CSS: 
body
{
   width: 1024px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color:#999999;
}
/* L'en-tête */

#en_tete
{
   width: 1022px;
   height: 184px;
   background-image: url(images/skin/banniere.png);
   background-repeat: no-repeat;
}

#barre
{
   width:1023px;
   height:24px;
   background-image:url(images/skin/barre.png);
   background-repeat:no-repeat;
   text-align:center;
}

#menu_1
{
   width:298px;
   height:80px;
   background-image:url(images/skin/menu_1.png);
   float:left;
   
}

#corps_1
{
   width:724px;
   height:80px;
   background-image:url(images/skin/corps_1.png);
   margin-left:298px;
}

#menu_2
{
   width:298px;
   height:auto;
   background-image:url(images/skin/menu_2.png);
   background-repeat: repeat-y;
   float:left;
   text-align:center;
}

#corps_2
{
   width:724px;
   height: auto;
   background-image:url(images/skin/corps_2.png);
   background-repeat: repeat;
   margin-left:298px;
}

#menu_3
{
   width:298px;
   height:102px;
   background-image:url(images/skin/menu_3.png);
   float:left;
}

#corps_3
{
   width:724px;
   height:102px;
   background-image:url(images/skin/corps_3.png);
   margin-left:298px;
}
a:link
  {color: #FF0000; }
a:visited
  { color: #FF0000; }

a:active
  { color: #CCCCCC;  }
 
.Style6 {
        color: #FFFFFF;
        font-weight: bold;
}

.Style4{font-size:20px;}

Donc, ma question est: comment corriger les bugs que j'ai expliqué au début de post (mal expliqué je sais mais je ne sais pas comment expliquer clairement Smiley sweatdrop )
Je récapitule:
-images qui restent à leur place même si la partie centre droit (centre du rectangle bleu) est vide
-affichage sans problème pour firefox
-corriger le bug d'affichage du menu sur la page http://traduc-age.leobaillard.org/test_site/telechargement/telecharge-securite.php?id=1

Merci d'avance et bonne continuation à vous.
Age.
Modifié par Age (19 May 2007 - 10:40)
Salut,

pour le menu au vu des bugs d'affichage sous FF et pire encore sous IE6

je te conseille déja d'utiliser l'astuce des colonnes factices

au moins l'astuce du fond d'ecran comblera les trous d'affichage.

a écrit :
Maintenant, les images s'agrandissent automatiquement mais uniquement pour IE 7 et pas pour Firefox (pour les autres navigateurs, je sais pas).
visible ici: http://traduc-age.leobaillard.org/test_site/telechargement/telecharge-securite.php?id=1


il est tard et je suis fatigué mais que faut-il voir exactement? ( et oui je n'ai pas IE7 Smiley langue )
Modifié par CPascal (17 May 2007 - 23:17)
Modérateur
Salut et bienvenue sur le forum,

Je viens de regarder ton css et html et je m'aperçois que ta page hteumeuleu est beaucoup trop lourde. Smiley sweatdrop Smiley murf

Je vois des balises de mises en forme (div align=left, strong) par-ci par là. Quel est l'utilité du CSS ?

Pourquoi y'a t'il des balises inutiles (div id="corp_1") ?

Pourquoi ajoutes tu des styles internes alors que tu as linké une feuilles de style ? Smiley biggol

Pourquoi as tu ajouté une classe (.style4) au menu_2 ?

regarde plutôt ce template que j'ai préparé : 

<body>
	<div id="conteneur">
		<h1>En tête de page</h1>
			<div id="global">
				<div id="colon1">
					<p>menu (colon1)</p>
					<p>largeur de 140 pixels</p>
					<ul id="menu">
						<li><a href="#">lien 1</a></li>
						<li><a href="#">lien 2</a></li>
						<li><a href="#">lien 3</a></li>
						<li><a href="#">lien 4</a></li>
					</ul>
				</div>
				<div id="colon2">	
					<p>contenu de la page (colon2)</p>
					<p>largeur de 600 pixels</p>
					<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.</p>
					<p>Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>
					<p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.</p>
				</div>
			</div>
		<p id="pied">pied de page</p>
	</div>
</body>




body   { 
 background-color: teal; 
 text-align: center; 
 margin: 0; 
 padding: 0
}
#conteneur { 
 background-color: white; 
 text-align: left; 
 margin-right: auto; 
 margin-left: auto; 
 width: 740px 
}
p  { 
 margin: 0 0 12px 
}
h1  { 
 color: white; 
 font-size: 2em;
 font-weight: bold;
 background-color: olive;
 margin: 0;
 height: 50px 
}
#global {
 background-color: gray 
}
#colon1  {
 background-color: gray;
 width: 140px;
 float: left 
}
#colon1 p {
 margin-left: 12px 
}
#colon1 ul {
 margin: 0 0 15px 0
}
#colon1 li  {
 list-style-type: none;
 margin: 0 0 0 15px;
 padding-bottom: 1px 
}
#colon1 li a {
 color: white;
 text-decoration: none 
}
#colon1 li a:hover {
 border-bottom: 1px solid white 
}
#colon2 {
 background-color: #eaeae9;
 margin-left: 140px 
}
#colon2 p {
 margin-left: 15px 
}
#pied  {
 background-color: #cc0;
 margin: 0;
 width: 740px;
 clear: both 
}


++
Modifié par Nolem (18 May 2007 - 00:12)
Effectivement le rendu est pas mal et il semble plus rapide a être chargé. Le problème c'est que je n'ai pas vraiment envie de modifier toutes les pages de mon site (environ 91 pages). Donc si quelqu'un a une idée interressante qui m'éviterai de modifier toutes mes pages, ce serai bien.
Pour ce qui est du css et des balises de mises en forme, je ne sais pas grand chose dessus. Je connais uniquement le php et les rudiments du html.

Mais, s'il n'y a qu'une seule solution comme celle que tu viens de me montrer, je la prendrai volontier.

Pour ce qui est du corps_1 , menu_1, ..., c'est que mon design est divisé en plusieurs parties:
baniere, barre, menu_1(haut du menu), corps_1(haut de la parie bleu), menu_2(centre partie verte de gauche), corps_2(centre de la parie bleu), menu_3 (bas du menu vert), corps_3(bas de la parie bleu)

Je vais essayer de supprimer des balises qui sont inutiles et qui alourdissent le code html.

En tout cas, ton commentaire très interressant ne m'aide pas vraiment mais m'as appris quelque chose. Smiley smile
Tout de meme un grand merci pour ta réponse fort interressante.
Modifié par Age (18 May 2007 - 17:54)
Lol CPascal, je n'aivais pas vu ton message.
CPascal a écrit :

Maintenant, les images s'agrandissent automatiquement mais uniquement pour IE 7 et pas pour Firefox (pour les autres navigateurs, je sais pas).
visible ici: http://traduc-age.leobaillard.org/test_site/telechargement/telecharge-securite.php?id=1


Ce qu'il faut voir: suivant la quantité de texte, l'image s'agrandit toute seule comme une grande mais sous photoshop, l'image ne bouge pas même s'il y a 10000000 lignes de texte.

Pour les colonnes factisses je vais voir.
Modérateur
Salut,

En fait j'ai vu que ta mise en page avait quelques pétouilles. De 4 ko je suis decendu à 2 ko avec à peu près la même grandeur de texte. Je crois que c'est important pour la rapidité en peucheupeu (php). Ce que je t'ai filé va te permettre de partir sur de meilleurs bases Smiley smile . Tu n'as plus qu'à développer un peu plus afin de designer.

J'ai bien vu que tu désires mettre un menu en dessous de l'en-tête, rajoute un petit div pour l'en-tête et c'est dans la poche. D'ailleurs, je me suis aperçu que j'ai rajouté une id de trop (menu). Vu que colon1 fait le menu de gauche, ce n'est pas la peine d'utiliser.

Je sais que se refaire 91 pages, c'est fastidieux mais c'est gratifiant au final Smiley smile . Avec un bon modèle de page, tu devrais t'en sortir sans trop de soucis. Pense que le modèle est le plus long Smiley smile Allez courage Smiley cligne

Le lien que t'a donné CPascal te donne la solution à ton problème mais avec ma mise en page Smiley cligne . Que fait mon <div id="global"> ?

++ et bon courage Smiley smile
Modifié par Nolem (18 May 2007 - 23:06)
Avant de tout changer, je vais essayer le design (qui pour le momment est le design qui me permet de mieux m'expliquer sur les forum). En effet, le design comporte 8 images, et je vais le simplifier pour qu'il y en ai plus que 3. La banière relié à la barre, menu_1 relié à corps_1 et menu_3 relié à corps_3. En meme temps, le html et le css sera allégé de pas mal d'inutilitées. Je vais également utiliser les colonnes factisses.
Je vous tien au courrant des évolutions.
Sujet clos
Aller à