julien2b | Bonjour, j'essaye de réaliser un site, mais j'ai quelques lacunes.
j'aimerais que les 2 colonnes du menu soit extensible par rapport au milieu.en résumé, que tout soit de même hauteur. d'après ce que j'ai compris, il faudrait que je fasse un fonds avec des images fond différentes. car les colonnes des menus son d'une même couleur, tandis que le milieu a une couleur différente.
mais de quel largeur et hauteur faire le fonds d'images, et qu'elle code metrent et ou.
je vous remercie par avance, de l'aide que vous trouverez m'apporter.
http://accessibilite-corsica.com/restaurants.php
Code :
- <div id="template">
- <?
- include('cadrehaut.php');
- ?>
- <?
- include('menucampig1.php');
- ?>
-
- <?
- include('menucampig2.php');
- ?>
- <div id="principal">
- <div id="content">
- </div></div>
- <?
- include('cadrebas.php');
- ?>
- </div>
|
_________________________
Code css
_________________________
Code :
- body {
- padding: 0px;
- margin: 0px;
- }
- #template {
- color: #000;
- width: 90%;
- max-width: 90em;
- min-width: 850px;
- margin-left: auto;
- margin-right: auto;
- background-color: #DDDDDD;
- -moz-border-radius: 15px;
- -webkit-border-radius: 15px;
- -khtml-border-radius: 15px;
- border-top: 5px solid #333;
- border: thick green double;
- }
- /* Contenu principal */
- #principal {
- font-family: arial, helvetica, verdana, sans-serif;
- font-family: 'times new roman', times, serif;/* ajouté */
- font-size: 1.5em;
- line-height: 1.5em;
- }
- /***********************************************/
- /*pour les liens externe */
- /***********************************************/
- a.lien_ext:after {
- content: "\0000a0[\2197]";
- }
- a:focus/*ca retire le cadre autour des liens externes */
- {
- outline:0;
- }
- /***********************************************/
- /* ENTETE */
- /***********************************************/
- #header {
- font-family: arial, helvetica, verdana, sans-serif;
- font-family: 'times new roman', times, serif;/* ajouté */
- background-color: #DDD;
- height: 160px;
- text-align: center;
- color: #000;
- font-weight: bold;
- }
- div#logo {
- float:left;
- height: 160px;
- background-color:#FF3300;
- }
- /***********************************************/
- /* message déroulant haut de page */
- /***********************************************/
- #message{
- background-color:#8AC1F2;
- border-top: 2px solid green;
- border-bottom: 2px solid green;
- }
- /***********************************************/
- /* PARTIE CENTRALE ACCUEIL*/
- /***********************************************/
- div#blocnews {
- float:right;
- width:230px;
- height:430px;
- background-color:#FF3300;
- padding-top: 0px;
- }
- /***********************************************/
- /* PIED DE PAGE */
- /***********************************************/
- #pied {
- height: 120px;
- padding: 5px;
- background: #FFCC99;
- text-align: center;
- margin-top: 2px;
- font-weight: bold;
- border-top: 2px solid green;
- clear:both;
- }
- /***********************************************/
- /*block Menu Boutons*/
- /***********************************************/
- #boutons{
- font-family: arial, helvetica, verdana, sans-serif;
- font-family: 'times new roman', times, serif;/* ajouté */
- margin: 0px;
- font-weight: bold;
- color: black;
- height: 128px;/* origine 125*/
- background-color: #FFCC99;/*le fonds darkred */
- }
- /***********************************************/
- /* Menu Boutons*/
- /***********************************************/
- a { text-decoration: none;
- font-weight: bold;
- background-color: #FF9900; /*le fonds bouton */
- color: black;
- }
- a:visited { color: black; } /*jaune */
- a:hover { color: black; } /* lettres qui changent au passage de la souris */
- a:active { color: #CCC; /* le fonds des boutons change au passage de la souris */}
- /* DEBUT LISTE 5 - CODE INTEGRAL */
- ul.liste5 { /* style de la liste <ul> */
- margin:5px 0 5px 0 ; /* marges */
- height:1em ; /* hauteur de la liste - remplace le spacer normalement indispensable pour les float */
- display:table ; /* fait passer la liste en mode table */
- border-collapse:collapse ; /* fusionne les bordures de la table */
- width:99%} /* largeur de la liste 99% <ul> */
- ul.liste5 li { /* style des <li> */
- margin:3px;/*rajoutésmargin:5px; */
- float:left ; /* le float:left remplace le display:inline. permet le passage en DTD stricte */
- border:2px solid green ; /* bordure rouge autour de chaque <li> */
- width:23.7% ; /* largeur de chaque 21.7 %<li> */
- text-align:center} /* centre le texte dans chaque <li> */
- /* cacher à IE */
- ul.liste5>li {display:table-cell} /* indispensable pour que les autres navigateurs que IE accepte la largeur de <li> */
- .liste5 a { /* style des liens sans survol */
- text-decoration:none ; /* pas de soulignement */
- color: black; /* police bouton*/
- display:block;} /* l'effet de hover prendra toute la largeur du <li> */
- .liste5 a:hover {/* style des liens avec survol */
- color: black; background-color:#DDDDDD;} /* changement de couleur au survol des boutons */
- /***********************************************/
- /* titre du site haut de page */
- /***********************************************/
- #titre{
- font: 25px arial, helvetica, verdana, sans-serif;
- color: #008000;
- font-weight: bold;
- text-align: center;
- line-height: 2em;
- }
- /***********************************************/
- /* Line séparateur */
- /***********************************************/
- .spacer {
- background-color: #FFCC33;
- clear: both;
- border: 1px solid #000;
- }
- /***********************************************/
- /* MENU GAUCHE */
- /***********************************************/
- #menu{
- float:left;
- width: 125px;
- left: 0px;
- background-color: #FFCC99;
- color: black;
- font: 12px arial, helvetica, verdana, sans-serif;
- font-weight: bold;
- border-right: 2px solid green;
- }
- #menu ul{
- list-style-type: none;
- margin: 0px;
- padding: 0px;
- }
- #menu li a{
- margin: 0px;
- padding: 2px;
- display: block;
- height: 1em;
- color: #000;
- text-decoration: none;
- }
- #menu a:hover{
- background-color: #add8e6;
- }
- #menu h5{
- font-weight: bold;
- font-size: 1.5em;
- border: 1px solid #6495ED;
- background-color: green;/* couleur marrons Haute-Corse*/
- color: #fff;
- text-align: center;
- margin: 0px;
- }
- /***********************************************/
- /* MENU DROITE */
- /***********************************************/
- #Rmenu{
- float:right;
- right: 0px;
- width: 125px;
- background-color: #FFCC99;
- color: black;
- font: 12px arial, helvetica, verdana, sans-serif;
- font-weight: bold;
- border-left: 2px solid green;
- }
- #Rmenu ul{
- list-style-type: none;
- margin: 0px;
- padding: 0px;
- }
- #Rmenu li a{
- margin: 0px;
- padding: 2px;
- display: block;
- height: 1em;
- color: #000;
- text-decoration: none;
- }
- #Rmenu a:hover{
- background-color: #add8e6;
- }
- #Rmenu h5{
- font-weight: bold;
- font-size: 1.5em;
- border: 1px solid #6495ED;
- background-color: green;/* couleur marrons Corse du Sud*/
- color: #fff;
- text-align: center;
- margin: 0px;
- }
|
Message édité par julien2b le 08-04-2010 à 16:01:32
|