Bonjour,
J'ai un petit souci depuis que j'ai reformé la structure de ce site et que j'ai inclu du php. Je précise que l'apparence est parfaite sous dreamweaver, mais pas sous firefox (alors quelle l'était avant de rafraichir un peu le serveur).
J'ai les parties suivantes, inscrite dans mon fichier css :
- header
- sidebar1
- content
- sidebar2
- footer
J'ai structuré l'apparence du site en appelant des fichiers php pour les parties header, sidebar1, sidebar2 et footer.
J'appelle mon fichier CSS dans le <head> de la page, et toutes les parties s'affichent correctement mis à part 2 choses :
- le footer semble inclu dans mon content et n'apparaît donc pas bien, au lieu d'être propre et en bas.
- la liste du menu à gauche n'apparaît plus comme avant. Il y avait un style, qui a disparu au profit d'une bête liste moche.
J'ai conçu le site sous dreamweaver (il s'y affiche d'ailleurs correctement!!), en partant du modèle "3 colonnes liquides, en-tête et pied de page"
Et là je vois vraiment pas le problème
Quelqu'un aurait-il une idée ? Qu'ai-je loupé ? Est-ce un problème de code ? Ou ai-je à votre avis effacé des fichiers importants de mon serveur lors de mon nettoyage de printemps ?
Merci d'avance pour toute réponse.
Mon code css :
Modifié par Anti-Ced (26 Jun 2010 - 11:27)
J'ai un petit souci depuis que j'ai reformé la structure de ce site et que j'ai inclu du php. Je précise que l'apparence est parfaite sous dreamweaver, mais pas sous firefox (alors quelle l'était avant de rafraichir un peu le serveur).
J'ai les parties suivantes, inscrite dans mon fichier css :
- header
- sidebar1
- content
- sidebar2
- footer
J'ai structuré l'apparence du site en appelant des fichiers php pour les parties header, sidebar1, sidebar2 et footer.
J'appelle mon fichier CSS dans le <head> de la page, et toutes les parties s'affichent correctement mis à part 2 choses :
- le footer semble inclu dans mon content et n'apparaît donc pas bien, au lieu d'être propre et en bas.
- la liste du menu à gauche n'apparaît plus comme avant. Il y avait un style, qui a disparu au profit d'une bête liste moche.
J'ai conçu le site sous dreamweaver (il s'y affiche d'ailleurs correctement!!), en partant du modèle "3 colonnes liquides, en-tête et pied de page"
Et là je vois vraiment pas le problème
Quelqu'un aurait-il une idée ? Qu'ai-je loupé ? Est-ce un problème de code ? Ou ai-je à votre avis effacé des fichiers importants de mon serveur lors de mon nettoyage de printemps ?
Merci d'avance pour toute réponse.
Mon code css :
@charset "UTF-8";
/* CSS Document */
body {
font-family: Verdana, Geneva, sans-serif;
font-size:14px;
background: #567D0F;
margin: 0;
padding: 0;
color: #333;
}
/* ~~ Sélecteurs d'éléments/balises ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #393;
text-decoration: underline;
}
a:visited {
color: #F60;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
color: #030;
}
/* ~~ ce conteneur entoure toutes les autres divs, en leur attribuant leur largeur sur base d'un pourcentage ~~ */
.container {
width: 80%;
max-width: 1440px;/* une valeur « max-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop large sur un moniteur de grande taille. La lisibilité de la longueur de ligne est ainsi améliorée. IE6 ne tient pas compte de cette déclaration. */
min-width: 780px;/* une valeur « min-width » peut s'avérer utile pour éviter que cette mise en page ne soit trop étroite. La longueur de ligne est ainsi plus lisible dans les colonnes latérales. IE6 ne tient pas compte de cette déclaration. */
background: #FFF;
margin: 0 auto;
}
.header {
background-color: #FFFFFF;
background-image: url(images/LESBULBES-banniere1.gif);
height:130px;
text-align:right;
}
.sidebar1 {
font-size: 16px;
float: left;
width: 15%;
background: #FFFFFF;
background-image: url(images/LESBULBES-sidebar1.gif);
padding-bottom: 10px;
background-repeat: no-repeat;
}
.content {
padding: 10px 0;
width: 65%;
float: left;
}
.sidebar2 {
text-align:center;
text-shadow:#999;
font-size:14px;
float: right;
width: 20%;
background: #FFFFFF;
background-image: url(images/LESBULBES-sidebar2.gif);
background-position:right;
background-repeat: no-repeat;
padding: 10px 0;
/* ~~ Ce sélecteur groupé donne de l'espace aux listes dans la zone .content ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* cette marge intérieure reflète la marge intérieure droite dans les en-têtes et la règle de paragraphe ci-dessus. Une marge intérieure a été placée en bas, afin d'assurer un espace entre les autres éléments des listes, et à gauche pour créer le retrait. Vous pouvez les régler comme bon vous semble. */
}
/* ~~ Styles de liste de navigation (peuvent être supprimés si vous optez pour un menu de survol prédéfini tel que Spry) ~~ */
ul.nav {
list-style: katakana-iroha; /* entraîne la suppression du marqueur de liste */
border-top: 1px solid #666; /* crée la bordure supérieure des liens ; les autres sont placées à l'aide d'une bordure inférieure sur la balise LI */
margin-bottom: 15px; /* crée l'espace entre la navigation et le contenu en dessous */
background: transparent;
}
ul.nav li {
border-bottom: 1px solid #666; /* crée la séparation des boutons */
}
ul.nav a, ul.nav a:visited { /* le regroupement de ces sélecteurs garantit que vos liens conservent leur apparence de bouton, même après avoir été activés */
padding: 5px 5px 5px 15px;
display: block; /* attribue au bloc de liens des propriétés qui lui font remplir toute la balise LI qui le contient. Force la zone entière à réagir à un clic de souris. */
text-decoration: none;
background: #transparent;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* modifie la couleur de l'arrière-plan et du texte pour les navigateurs à la souris et au clavier. */
background: #transparent;
color: #FFF;
}
/* ~~ Pied de page ~~ */
.footer {
padding: 10px 0;
font-size:12px;
background: #ffffcc;
position: relative;
clear: both;
text-align:center;
}
/* ~~ classes flottant/effacement diverses ~~ */
.fltrt { /* cette classe peut servir à faire flotter un élément depuis la droite sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
float: right;
margin-left: 8px;
}
.fltlft { /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* cette classe peut être placée sur une div <br /> ou vide, en tant qu'élément final suivant la dernière div flottante (dans le #container) si le paramètre #footer est supprimé ou retiré du #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}Modifié par Anti-Ced (26 Jun 2010 - 11:27)
snif...
