28173 sujets

CSS et mise en forme, CSS3

[Edit] pied de page ne suis pas le menu

Bonjour,

Je suis en ce moment en train de m'y remettre au CSS après un arrêt de plusieurs mois et je commence à rouiller Smiley biggol

Bon bref, j'ai un problème tout bête, j'ai déjà regardé dans le blog pour essayer de résoudre mon problème mais en vain Smiley sweatdrop

Un screen vaut mieux que un long discours :
http://img81.imageshack.us/img81/7008/cssxr3.th.jpg
Vous remarquez que le bloc du milieu est décalé vers le bas au lieu d'être aligner avec le menu...

Voila mon index.php :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Index du site</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" />
</head>
<body>
<!--Inclusion du header -->
		<div id="header">
			<?php include("design/entete.php"); ?>
		</div>
<!--Conteneur contenant le menu de gauche et le centre -->
		<div id="conteneur">
		<!--Menu de gauche -->
			<div id="gauche">
				<?php include("design/menu.php"); ?>
			</div>
		<!--Bloc central -->
			<div id="centre">
   			 <table>
				<td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
              		<tr>
              		  	<td background="design/images/img_16.gif" width="664" height="49"></td>
            		</tr>
            		<tr>
						<td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
            		      <tr>
                		    <td background="design/images/img_20.gif" width="12"></td>
                		    <td width="638">
					  				  <br>
                      				  <br>
                      				  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>
									  <br>                      
									  <br>
						    </td>
							<td background="design/images/img_22.gif" width="14"></td>
						 </tr>
						</table></td>
					  </tr>
					  <tr>
						<td><img src="design/images/img_30.gif" width="664" height="20"></td>
					  </tr>
					</table></td>
			  </table>
		</div>
		<!--Pied de page -->
		<div id="pied">
		</div>
</div>
</body>
</html>


Voila mon CSS :

/* CSS Document */
*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height:237px;
width:910px;
margin-left:10%;

}
#conteneur {
position: absolute;
width: 910px;
}
#centre {
margin-left: 244px;
}
#gauche {
float:left;
width: 242px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}


Voilà, merci d'avance à ceux qui m'aideront Smiley biggrin
Yimboka
Modifié par SnP (06 Sep 2006 - 15:55)
Il faudrait que tu définisses un attribut top et left à ton bloc central.

ex : 

#contenu {
position: absolute;
width: 910px;
top:237px;
left:242px;
}

Modifié par rspir (28 Aug 2006 - 15:56)
Ou mieux, que tu le laisse dans le flux, sans largeur fixée, avec simplement une marge à gauche suffisante pour ne pas empiéter sur le bloc de gauche Smiley cligne
Raphael a écrit :
Hello et bienvenue ici,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "Problèmes de mise en page css".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre Smiley decu

Ok merci de cette précision Smiley cligne


Je vais essayer avec votre/vos solutions Smiley cligne

Edit : J'ai essayé, mais toujours la même chose Smiley sweatdrop
Modifié par SnP (28 Aug 2006 - 14:20)
Il y a 77 erreurs à corriger dans le code html avant de pouvoir progresser.

D'autre part, les tableaux de mise en page ne sont pas très appréciés, car mal utilisés & peu accessibles (en très résumé) et ils ne sont pas du tout nécessaires pour réaliser ton design ...
J'ai du mal avec les tableaux Smiley ohwell

Donc je fais le design complet en CSS si j'ai bien compris alors Smiley smile
Il s'agit d'un "template" que tu as modifié?
Si tu veux une piste pour ton problème, tu peux essayer ce code pour voir le bloc "centre" positionné approximativement (il reste une bordure due au premier tableau de la div "centre" dans le code html):
#centre {
position: absolute;
top: 0;
left: 246px;
}


C'est juste une indication rapide, pas une solution, il y a beaucoup d'erreurs et il vaut mieux refaire cette page sans tableau et en utilisant les CSS.

Tu peux t'aider d'Alsacréations: la FAQ, les tutoriels et Openweb. Smiley murf
Modifié par dom (28 Aug 2006 - 18:19)
Oui c'est un template modifié Smiley cligne Fait par un copain.

J'avais déjà envisagé cette possibilité dom mais le seul "problème" c'est que le menu ne suis pas avec le bloc central Smiley ohwell

http://teampowa.free.fr/website_krypton/creation/
(J'ai mis à jour )
La couleur verte correspond au pied...

Je vais tenter tout en CSS... je reposterai ici en cas de pépin Smiley smile

Merci
Modifié par SnP (28 Aug 2006 - 18:57)
En reprenant l'architecture de la page, tu pourras intégrer ton menu sans ces tableaux.
Inutile d'aller plus loin dans les modifications du code actuel.
Bon courage!
Salut me revoilà Smiley smile

Mon site est maintenant valide xHTML 1.1 et en CSS, j'ai refais mon menu et mon bloc central en CSS, mon header je l'ai laissé en tableau...en corrigeant les erreurs.

Bref maintenant petit problème sous IE... sous Firefox pas de "décalage" alors que sous IE le bloc central se situe en dessous du menu... j'ai du mal à comprendre pourquoi Smiley sweatdrop
Lorsque je retire la largeur du conteneur celui ci reviens en alignement avec le menu Smiley biggol Smiley biggol

Voici le lien :
http://teampowa.free.fr/website_krypton/creation/

J'ai laissé les bordures pour vous repérez au cas ou Smiley smile

Voici mon fichier CSS :
/* CSS Document */
*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#901f1f;
}

/* *** CSS DU HEADER *** */
#header {
height:237px;
width:910px;
border:0;
}

/* CSS Conteneur : Menu, Header et bloc central */
#conteneur {
background-color:#FFFFFF;
margin-bottom: 20px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 910px;
border:1px solid yellow;
}

/* CSS du bloc central */
#centre {
top: 0;
margin-left: 246px;
background-color:#FFFFFF;
border:1px solid black;
}

/* CSS du bloc de gauche menu */
.gauche {
width: 246px;
height: auto;
float:left;
border:1px solid green;
}

/* CSS Haut menu */
.haut_menu_account {
width: 246px;
height: 49px;
background-image:url('images/img_15.gif');
}

.haut_menu_wars {
width: 246px;
height: 49px;
background-image:url('images/img_26.gif');
}

.haut_menu_news {
width: 242px;
height: 49px;
background-image:url('images/img_28.gif');
}

/* CSS Fond menu */
.fond_menu {
background-image:url('images/img_back_menu.gif');
width: 246px;
}

/* CSS Bas menu */
.bas_menu {
background-image:url('images/img_24.gif');
width:246px;
height:12px;
}

/* CSS Haut centre */
.haut_centre {
width:664px;
height:49px;
background-image:url('images/img_16.gif');
}

/* CSS Fond centre */
.fond_centre {
background-image:url('images/img_back_centre.gif');
width:664px;
}

/* CSS Bas centre */
.bas_centre {
background-image:url('images/img_30.gif');
width:664px;
height:20px;
}

/* CSS Pied */
#pied {
width:910px;
height:20px;
background-color:#CCCCCC;
font-size: 11px;
font-family: Verdana, Arial, serif;
padding-top:5px;
text-align:center;
}


Voilà Smiley smile Merci d'avance
Modifié par SnP (29 Aug 2006 - 17:26)
Ok merci je vais lire cette partie Smiley cligne Merci.

Mais ce qui est sûr et certain, c'est que mon problème est dût au CSS
Modifié par SnP (29 Aug 2006 - 17:28)
Bon voilà mon problème est réglé... c'était le fameux bug de IE Three Pixel Jog Smiley cligne

J'ai un dernier truc assez embettant mais c'est sous Firefox, le pied suit le bloc central, hors quand le bloc central est pas "long" le pied passe en dessous du menu...

Sous IE le pied reste toujours en dessous du menu.

Ici vous comprendrez mieux.
http://le.monde.de.cs.free.fr/
=> ici pas de problème vu que le bloc central est plus "grand en hauteur" que le menu donc le pied reste bien en dessous et le fond est blanc.

http://le.monde.de.cs.free.fr/index.php?cat=news_long&article_id=18
=> ici on remarque le probleme sous Firefox mais pas sous IE. Pas besoin d'un discours le problème se voit directement.

Voilà mon CSS: http://le.monde.de.cs.free.fr/themes/design.css

Merci Smiley smile
Modifié par SnP (01 Sep 2006 - 13:18)
Sujet clos
Aller à