Problème de CSS

Marsh Posté le 01-11-2011 à 22:23:26

Bonjour à tous,

Sachez que je débute et que je fais de mon mieux pour essayer tout seul c'est aussi je pense le meilleur moyen d'apprendre.

A la base je m'étais créer un site internet en html avec menu classique.
Très vite le besoin de faire un menu dynamique s'est fait ressentir. après quelque recherche j'ai réussi à intégrer un menu dynamique

Actuellement j'ai 2 fichier css :
- un pour le menu vertical
- un autre pour le reste du site car je n'ai pas réussi à intégrer le nouveau fichier css (fournis avec le menu dynamique) avec l'ancien

Bref ...

Mon problème est que depuis ça mon pied de page qui fait l'(objet d'un fichier php est coupé par mon nouveau menu

http://s3.noelshack.com/upload/136 [...] e_aide.png

Cela vient-il du fait qu'il y ai 2 fichier css ?
Avez-vous une solution ?

@+

Ludovic

Message cité 1 fois

Reply

Marsh Posté le 01-11-2011 à 22:23:26

Reply

Marsh Posté le 02-11-2011 à 10:34:26

yanniks a écrit :

Cela vient-il du fait qu'il y ai 2 fichier css ?

On peut avoir plusieurs fichiers CSS sans problème. S'ils définissent les mêmes choses, alors la dernière définition sera prise en compte. Mais dans le cas précis, il me parait peu problable qu'il y ait des conflits de définition (mais c'est juste une supposition car sans le code source, on peut que faire de la divination).

yanniks a écrit :

Mon problème est que depuis ça mon pied de page

Quel genre de pied de page ? Un pied de fenêtre ou un pied de page ? Les pieds de fenêtre sont des galères, et si c'est ça, alors ce n'est pas très étonnant.

yanniks a écrit :

Mon problème est que depuis ça mon pied de page qui fait l'(objet d'un fichier php est coupé par mon nouveau menu

Cette description, même avec l'image, est trop courte. Si vous pouviez expliqué plus en détail ce qui ne va pas. Que veut dire "couper" ? Dans quelle situation ça se produit ? C'est quel type de menu ? Avec une fenêtre de quelle taille ? Avec quel navigateur ? Avec quelles lignes de code ?

Reply

Marsh Posté le 03-11-2011 à 20:26:50

Bonjour,

Merci de ta réponse. Je ne sais pas s c'est un pied de page ou un pied de fenêtre tout ce que je sais c'est qu'il est présent sur toute mes pages.

En fait avant ce pied était placé en dessous de mon menu de gauche , ce qui ne posait pas de problème quand le milieu de la page était plus court que mon menu.

Or maintenant le pied se place juste en dessous de mon milieu de page ne prenant plus en compte la présence du menu (souvent plus long que le milieu de page.)
Ce qui donne ceci : http://s3.noelshack.com/upload/145 [...] g_site.png

Le Css de mon menu :

Spoiler :

*{
margin:15;
padding:20;
}
#menu{
width:200px;
margin:10;
font-size:14px;
position:absolute
}
.menu, .sousmenu{
text-align:left;

}
.menu{
height:18px;
width:200px;
padding:2px 0;
background:#9EA4A3;
color:#fff;

}
.sousmenu{
height:18px;
width:200px;
padding:1px 0;
background:#9EA4A3;
color:#fff;
}
.menu a{
display:block;
width:100%;
height:130%;
color:#21536A;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
background:#EBEDEC;
}
.sousmenu a{
display:block;
width:100%;
height:100%;
color:##F0FFF0;
font-family:arial,sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
background:#E6E6FA;
}
.menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
background:#ca0008;
}

Et le Css du reste de ma page :

Spoiler :

/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 163px;
left: 0px;
right: 2%;
width:95.6%;
background-color: #ffffff;
height: 672px;
}

#tl {
position:absolute;
top: 3px;
left: -3px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 36px;
left: 17px;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:200px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 200px;
border-left: 1px solid #ccd2d2;

}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #000000;
font-weight: normal;
}

/************** utility styles *****************/

#utility{
font: 75% Verdana,sans-serif;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************** pageName styles ****************/

#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font: bold 175% Arial,sans-serif;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}

#globalNav img{
margin-bottom: -4px;

}

#gnl {
position: absolute;
top: 0px;
left:-5px;
}

#gnr {
position: absolute;
top: 1px;
right:-1px;
}

#globalLink{
position: absolute;
top: 7px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 94px;
z-index: 100;
}

a.glink, a.glink:visited{
font-size: small;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
background-image: url(glblnav_selected.gif);
text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/*************** search styles *****************/

#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link, #search a:visited {
font-size: 80%;
font-weight: bold;

}

#search a:hover{
margin: 0px;
}

/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #FF6600;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}

/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #000000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 0px 0px;
}

/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #000000;
}

.story p {
padding: 0px 0px 10px 0px;
}

.story a.capsule{
font: bold 1em Arial,sans-serif;
color: #005FA9;
display:block;
padding-bottom: 5px;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}

/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/************ sectionLinks styles **************/

#sectionLinks{
margin: 0px;
padding: 0px;

}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}

/************* relatedLinks styles **************/

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}

/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

/********************* end **********************/

Merci de votre aide

Reply

Marsh Posté le 03-11-2011 à 23:38:44

Un petit clear:both; sur le footer ?

Reply

Marsh Posté le 04-11-2011 à 17:51:16

euh bien sur, c'est ou que je trouve le footer ?

Reply

Marsh Posté le 04-11-2011 à 21:31:48

Ton pied de page, pardon.

Pour le trouver... Tu devrais mieux le savoir que moi ^^

Message édité par Arcan_- le 04-11-2011 à 21:33:13

Reply

Marsh Posté le 05-11-2011 à 17:02:51

Salut,

Il y a déjà un clear both sur le footer ...

/************** siteInfo styles ****************/

#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size: small;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

Reply

Marsh Posté le 05-11-2011 à 20:01:46

Mais logique je pense car mon menu de gauche c'est dans le même code source...
Et même en mettant le css de mon pied de page dans le fichier source de mon menu ça ne fonctionne pas ... pourquoi ?

Message édité par yanniks le 05-11-2011 à 20:03:06

Reply

Marsh Posté le 05-11-2011 à 22:12:47

Ton menu est en position:absolute;, donc "hors flux".
Tu peux donc :

"intégrer" le menu de façon à ce qu'il soit dans le même conteneur que la colonne de gauche,
donner une taille minimum (min-height) au contenu pour décaler le pied de page.

Tu utilises des padding/margin sans mettre le px. Ça ne marchera sans doute pas.

Citation :

*{
margin:15;
padding:20;
}

* signifie "tous les éléments". Ajouter un padding et un margin à tous les éléments... ça peut te fausser toute la mise en page.

Reply

Marsh Posté le 06-11-2011 à 19:44:36

Salut,

Encore merci de ta réponse.

J'ai compris l'idée mais je ne sais pas trop par quoi y arrivé. Que dois-je remplacer dans mon css par quoi ?

Reply

Problème de CSS

Sujets relatifs:

Leave a Replay