Site Web probleme CSS ==&gt; margin botto

Résolu/Fermé

Utilisateur anonyme - 24 avril 2008 à 12:03
cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008 - 27 avril 2008 à 19:31

Bonjour tout le monde. J'ai un petit soucis depuis quelques jours pour la création de mon site web en HTML/PHP et surtout en utilisant le code CSS.

En effet j'essaye de concevoir un site web donc l'aspect graphique ressemble à ça :
http://img187.imageshack.us/img187/3793/aspecthn8.png

Comme vous l'avez compris j'essaye de tout regrouper dans un "conteneur" en plaçant le "menu" à gauche, le "corps" à droite et le "pied de page" en bas.

Pour se faire j'ai déjà utilisé les floats suivant : right pour le "corps" et le "pied de page" et left pour le "menu".

Ensuite il faudrait donner soit une position "absolute" ou "relative" à ces derniers mais tout ce que j'ai essayé est tombé à l'eau. J'ai vraiment besoin de votre aide pour m'éclaircir.

Le seul cas où ça aurait pu correspondre à ce que je voulais, il n'y avait aucune marge en bas entre le navigateur et le "conteneur" de ma page web alors que la marge d'en haut quant à elle fonctionne.
J'ai pourtant bien codé dans le CSS pour le body ==> margin-bottom : 20 px ;

Voici également à quoi ressemble ma page HTML
http://img187.imageshack.us/img187/2149/pagehtmljo8.png

En remerciant tout ceux essayant de résoudre mon problème (et même ceux qui y arrivent pas) je vous souhaite une bonne fin de journée et @+ sur le forum.

A voir également:

Site Web probleme CSS ==> margin botto
Tablette samsung gt-p5110 mise a jour ✓ - Forum Samsung
Réinitialiser samsung gt-e1207y - Forum Samsung
Code universel samsung gt-e1205y - Forum Samsung
Geforce gt 635m ✓ - Forum Carte graphique
Samsung gt-n8010 mise à jour android - Forum Téléphones & tablettes Android

2 réponses

Réponse 1 / 2

cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008 60
24 avril 2008 à 13:45

Lut,

jte garanti rien mais je voudrais essayer un ou deux trucs, ça serait plus pratique par contre si tu mettais ton CSS dispo.

bon courage

Utilisateur anonyme
24 avril 2008 à 14:09

Ok je te remercie d'avance cijad. C'est vraiment sympa de vouloir m'aider.
Pour mon CSS il n'y a pas de problème mais par contre quand je le colle directement ça fait pas bien présentable donc je l'ai upper sur un site dont voici le lien ==>

http://dl.free.fr/getfile.pl?file=/yWcC60Re/design.css

En tout cas merci et bon courage à tout surtout.

Réponse 2 / 2

cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008 60
24 avril 2008 à 19:33

Re,

bon j'ai modifié quelques trucs et je suis arrivé à un résultat qui devrait t'aller. D'abord jai mis seulement menu et corps dans le conteneur pour aller avec ton schéma, mais ça ne change pas grand chose dans l'absolu.

Pour le reste, j'ai édité un nouveau CSS en me basant sur le tiens mais j'ai retiré tout ce qui ne concernait pas ce problème, tu pourras t'en inspirer pour ta page. Je débute moi aussi donc il se peut que certaines choses soient peu stable ou ne se fasse pas vraiment, mais bon, sous firefox ça tient. Je tiens à peu près toute mes infos de cette page : https://pbnaigeon.developpez.com/tutoriel/CSS-HTML/notions-de-base/ très bien faite.

Pour la mise en page, j'ai plutot mis body qui prend toute la place et les éléments entete, conteneur et pied qui ont une largeur fixe, ensuite tu peux les centrer en mettant les marges en auto.

Le seul soucis je crois c'est pour la position fixe du pied de page. Pour le centrer, je lui ai collé une position depuis la gauche de quelques %, calculé à partir du %que tu donnais aux éléments, c'est la moitié de la place qu'il restait. Sinon apparemment ça ne fonctionne pas sous IE, voir : https://xhtml.developpez.com/faq/?page=marges_alignement#CSS_positon_fixed_sans_javascript (non testé)

c'est à peu près tout, si tu rencontres des soucis ou pour d'autres questions, voir même pour des solutions plus efficace, merci de m'en faire part, ça me fera avancer moi aussi.

bon courage

body
{
   width: 100%; 
   height: 100%;
   margin: 0px;
	padding: 5px;
   background-color:#99A7AF; 
}


#en_tete
{
   width: 70.3125%;
	margin-left: auto;
   margin-right: auto;
   height: 207px;
   background-image: url("images/ban3889.jpg"); 
   border-top: 2px solid black;
}



#conteneur
{
	height: auto;
	width: 70.3125%;
	margin-left: auto;
   margin-right: auto;
	background-color: #DBE3F2;
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-top: 2px solid black;
}


#menu
{  
   float: left; 
   width: 18.888%; 
   height: 100%;
   margin-left: 2.222%; 
   margin-top : 1.25%;
}

#corps
{
	float: right;
   width: 73.555%;
   height: 100%;
   margin-right: 2.222%; 
   margin-top: 1.25%;
   margin-bottom: 1.25%;
   color: black;
   background-color: #EFEFEF;
   background-image: url("images/degrade.png");
   background-repeat: repeat-y;
   border: 2px solid black; 
}


#pied_de_page
{
	width: 70.3125%;
	text-align: center;
	color: black;
	background-color: #EFEFEF;
	background-image: url("images/fond_menu_horizontal.jpg");
	background-repeat: repeat-x;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	/*pour le fixer en bas*/
	position : fixed; 
   bottom: 0px;
	left: 14.8438%;
	right: auto;
}

Utilisateur anonyme
25 avril 2008 à 15:54

Merci pour les améliorations et les changements que tu as apporté a mon css mais le problème central reste le même: c'est à dire que je n'ai pas de marge en bas entre la page web et le nagiateur.

Je pense que cela est dut à la position de mon conteneur qui est en "absolute" mais je ne trouve pas la combinaison qui marche pour les autres positions de mes différentes parties (celui du "corps" à droite celui de "menu" à gauche et celui du "pied de page" en bas".)

Si quelqu'un aurait une idée pour les différentes valeurs à donner soit à la position (absolute, relative, "ou rien") soit au float (right, letf, "ou rien") ou les deux combinés car j'ai réessayé depuis ce matin toutes les combinaisons possibles (enfin une bonne partie) mais ça ne marche toujours pas...

En tout cas, je te remercie encore une fois cijad, notamment pour les liens forts intéressants.

cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008 60 > Utilisateur anonyme
25 avril 2008 à 22:56

Oui, désolé apparemment j'ai raté le sujet de la question.

Par contre je suis plus très sur d'avoir bien compris ce que tu veux du coup. Veux-tu que le pied de page soit toujours affiché et en position fixe en bas (decalé du navigateur^^) ou bien faut-il qu'il apparaisse tout en bas une fois qu'on a fait défilé toute la page ??

Pour le premier cas il te suffit de remplacer bottom:0px par bottom:10px (par exemple) dans le style du pied de page. Il faudra ensuite cacher le conteneur qui pourrait se voir derrière le pied de page.

Pour la deuxième option, clear:both; permettra normalement de rétablir le flux et de faire reprendre sa place au pied de page, gentiment en dessous du reste. Tu dois ensuite le centrer (margin-left: auto; margin-right: auto;) sans oublié de mettre un padding de quelques pixels à body pour que ça ne colle pas à la fenêtre du navigateur.

#pied_de_page
{
	width: 70.3125%;
	text-align: center;
	color: black;
	background-color: #EFEFEF;
	background-image: url("images/fond_menu_horizontal.jpg");
	background-repeat: repeat-x;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	/*pour le fixer en bas*/
	clear: both;
	margin-left: auto;
	margin-right: auto;
}

c'est mieux comme ça ?

Utilisateur anonyme > cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008
26 avril 2008 à 09:54

Oui, en fait ce que je veux, c'est que le "pied de page" soit visible une fois que l'on ait fait défiler toute la page (donc le 2ème cas).

Alors j'ai essayé avec ce que tu m'as proposé et on est à 2 doigts d'y arriver. En effet lorsque je met tel quel ton code pour le "pied de page", il ne s'affiche pas parce qu'apparemment le conteneur est en position "absolute". Donc en rajoutant une position relative au "pied de page", celui s'affiche enfin.

Mais le problème c'est qu'il reste tout en haut et je ne sais pas s'il y a un moyen de le faire descendre tout en bas et ce en fonction de la taille du conteneur.

Il est à noter que lorsque j'ai appliqué un margin-top au pied de page" de valeur 100%, c'est tout le conteneur (avec encore une fois le pied de page" en haut de celui-ci) qui est descendu...

cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008 60 > Utilisateur anonyme
26 avril 2008 à 16:05

Le problème viens peut être aussi de la manière dont tu as arrangé ton html. Je ne suis pas sur d'avoir compris ou tu en était pour ton dernier post. Je te remets la solution complète que j'ai adopté pour le cas de figure que tu as choisi, ce sera plus clair en étant sûr de bien avoir la même base. ( au passage, j'avais pas mis d'attribut position au conteneur je crois)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="fr" >

  <head>
    <title>
      bienvenue!
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css"/>
  </head>

  <body>
  
    <div id="en_tete"> entete
    </div>
    
    <div id="conteneur">

      <div id="menu">menu
      </div>

      <div id="corps">Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text Plein de text 
      </div>

    </div> /*fin du conteneur*/
    
    <div id="pied_de_page"> Copyright
    </div> 
    
  </body>

</html>

 
body
{
   width: 100%; 
   height: 100%;
   margin: 0px;
   background-color:#99A7AF;
	padding: 10px;
}


#en_tete
{
   width: 70.3125%;
	margin-left: auto;
   margin-right: auto;
   height: 207px;
   background-image: url("images/ban3889.jpg"); 
   border-top: 2px solid black;
}



#conteneur
{
	height: auto;
	width: 70.3125%;
	margin-left: auto;
   margin-right: auto;
	background-color: #DBE3F2;
	border-left: 2px solid black;
	border-right: 2px solid black;
	border-top: 2px solid black;
	/*padding-bottom: 100px;*/
}


#menu
{  
   float: left; 
   width: 18.888%; 
   height: 100%;
   margin-left: 2.222%; 
   margin-top : 1.25%;
}

#corps
{
	float: right;
   width: 73.555%;
   height: 100%;
   margin-right: 2.222%; 
   margin-top: 1.25%;
   margin-bottom: 1.25%;
   color: black;
   background-color: #EFEFEF;
   background-image: url("images/degrade.png");
   background-repeat: repeat-y;
   border: 2px solid black; 
}


#pied_de_page
{
	width: 70.3125%;
	text-align: center;
	color: black;
	background-color: #EFEFEF;
	background-image: url("images/fond_menu_horizontal.jpg");
	background-repeat: repeat-x;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	/*pour le fixer en bas*/
	clear: both;
	margin-left: auto;
	margin-right: auto;
}

Je sais, c'est un peu lourd de tout repasser mais ce sera plus clair.
Le résultat que j'obtiens est sur http://ensgeol.free.fr/test/

redis moi ce que tu en penses en ayant tout ça sous les yeux, et désolé si ça fait un peu fouilli.

J'ai l'impression qu'on touche au but quand même ^^

Utilisateur anonyme > cijad Messages postés 30 Date d'inscription dimanche 2 mars 2008 Statut Membre Dernière intervention 8 mai 2008
26 avril 2008 à 19:42

Nickel chrome!!!!! MERCI pour tout cijad ça marche super bien et comme je le voulais! Je suis content ^_^.

Désolé pour le dérangement je devais recopier comme un boulet car maintenant tout va bien. Et en effet t'avais pas mis de position pour le conteneur -_-". Surement dut à la fatigue accumulé ses derniers jours à essayé de faire marcher ce site web.

Voilà et encore merci pour tout. Ca fait plaisir de pouvoir compter sur des gens comme toi.
Continue comme ça bonne fin de weekend et @+ sur forum.

Discussions similaires

Scans de Dragon Ball GT

Sinification de &

Comment utiliser une montre Huawei avec Samsung Health

Avis sur la nvidia geforce gt 730

code de réinitialisation de samsung GT-E1205T

Discussions similaires

Newsletters