Problème menu css et php

Fermé
ab1609 Messages postés 1 Date d'inscription dimanche 3 avril 2011 Statut Membre Dernière intervention 3 avril 2011 - Modifié par ab1609 le 3/04/2011 à 14:06
a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 - 6 avril 2011 à 11:21
Bonjour,

J'ai téléchargé un template gratuit (provenance: freecsstemplates.org) que je souhaite utiliser pour afficher les résultats de mes requêtes sous phpmyadmin.

Le problème est que, lorsque j'insère du php dans mon template, le menu de gauche se retrouve alors en haut de la page. Je n'arrive vraiment pas à comprendre d'où vient le problème.

Le fichier css (style):

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
margin: 0;
padding: 0;
background: #FFFDEA url(images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #464032;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #333333;
}

h1 {
font-size: 2em;
}

h2 {
font-size: 2.4em;
}

h3 {
font-size: 1.6em;
}

p, ul, ol {
margin-top: 0;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #9D151A;
}

a:hover {
}

#wrapper {
width: 960px;
margin: 0 auto;
padding: 0;
}

/* Header */

#header {
width: 940px;
height: 148px;
margin: 0 auto;
}

/* Logo */

#logo {
float: left;
height: 90px;
margin: 0;
background: url(images/img04.jpg) no-repeat left top;
padding-top: 30px;
color: #000000;
}

#logo h1, #logo p {
margin: 0;
padding: 0;
}

#logo h1 {
float: left;
padding-left: 120px;
letter-spacing: -1px;
text-transform: lowercase;
font-size: 3.8em;
}

#logo p {
float: left;
margin: 0;
padding: 26px 0 0 10px;
font: normal 14px Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #5E4E38;
}

#logo p a {
color: #5E4E38;
}

#logo a {
border: none;
background: none;
text-decoration: none;
color: #A83A01;
}

/* Search */

#search {
float: right;
width: 280px;
height: 60px;
padding: 20px 0px 0px 0px;
background: #E9E3CB;
border-bottom: 4px solid #FFFFFF;
}

#search form {
height: 41px;
margin: 0;
padding: 10px 0 0 20px;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: none;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #464032;
}

#search-submit {
width: 50px;
height: 23px;
border: 1px solid #AC9A79;
background: #AC9A79;
font-weight: bold;
font-size: 10px;
color: #FFFFFF;
}

/* Menu */

#menu {
width: 940px;
height: 36px;
margin: 0 auto;
padding: 0;
}

#menu ul {
margin: 0px 0px 0px 10px;
padding: 0;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
}

#menu a {
display: block;
height: 26px;
margin-right: 2px;
margin-bottom: 10px;
padding: 10px 20px 0px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
border: none;
}

#menu a:hover, #menu .current_page_item a {
background: #FFFFFF;
text-decoration: none;
color: #333333;
}

#menu .current_page_item a {
background: #FFFFFF;
color: #333333;
}

/* Page */

#page {
width: 940px;
margin: 0 auto;
padding: 0;
}

#page-bgtop {
padding: 20px px;
}

#page-bgbtm {
}

/* Content */

#content {
float: right;
width: 620px;
padding: 30px 0px 0px 0px;
}

.post {
margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
margin-bottom: 10px;
padding: 12px 0 0 0px;
letter-spacing: -1px;
color: #000000;
}

.post .title a {
text-transform: lowercase;
color: #333333;
border: none;
}

.post .meta {
height: 30px;
background: url(images/img03.jpg) no-repeat left top;
margin: 0px;
padding: 0px 20px 0px 20px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
}

.post .meta .date {
float: left;
height: 24px;
padding: 3px 0px;
color: #FFFFFF;
}

.post .meta .posted {
float: right;
height: 24px;
padding: 3px 15px;
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
}

.post .meta a {
color: #FFFFFF;
}

.post .entry {
padding: 0px 0px 20px 0px;
padding-bottom: 20px;
text-align: justify;
}

.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: left;
width: 280px;
padding: 0px;
color: #787878;
}

#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}

#sidebar li {
margin: 0;
padding: 0;
border-right: 1px solid #E9E3CB;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}

#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E5E0C6;
margin: 0px 30px;
border-right: none;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}

#sidebar h2 {
background: url(images/img02.jpg) no-repeat left top;
padding-left: 30px;
padding-top: 6px;
padding-bottom: 6px;
letter-spacing: -.5px;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}

#sidebar p {
margin: 0 0px;
padding: 10px 30px 20px 30px;
text-align: justify;
}

#sidebar a {
border: none;
color: #464032;
}

#sidebar a:hover {
text-decoration: underline;
color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
padding: 20px;
}

#calendar table {
width: 100%;
}

#calendar tbody td {
text-align: center;
}

#calendar #next {
text-align: right;
}

/* Footer */

#footer {
width: 940px;
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
border-top: 4px solid #EBE6D1;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
margin: 0;
padding-top: 20px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #444444;
}

#footer a {
color: #464032;
}



Je précise que si je suis relativement à l'aise avec MYSQL et PHP, mes connaissances en css sont nulles. Je signale également que les requêtes que j'utilise fonctionnent parfaitement, seule la mise en page est chaotique.

A voir également:

1 réponse

a70m Messages postés 2763 Date d'inscription jeudi 21 mai 2009 Statut Contributeur Dernière intervention 2 février 2014 217
6 avril 2011 à 11:21
Salut,

Une solution simple et qui semblerait efficace serait que tu fasses toi-même ton CSS.
Pour l'apprendre, la lecture du tuto sur le site du Zéro suffira amplement à faire quelque chose de joli esthétiquement.

Cordialement--
Les boulets, on ne les aime que dans les quotes ! Merci
0