28172 sujets

CSS et mise en forme, CSS3

Résolu - Centrer un menu sur toute la largeur de fenêtre

Bonjour,

Je souhaite centrer le menu suivant en rouge sur toute la largeur de fenêtre.

http://www.transduction-meeting.lu/setup.php

J'ai essayé avec margin: auto mais cela ne fonctionne pas


<ul id="header">
<li><a href="http://www.transduction-meeting.lu">Home</a></li>
<li><a href="http://www.transduction-meeting.lu/program.php">Program</a></li>
<li><a href="http://www.transduction-meeting.lu/registration.php">Registration</a></li>
<li><a href="http://www.transduction-meeting.lu/infos.php">Information</a></li>
<li><a href="http://www.transduction-meeting.lu/hotels.php">Hotels</a></li>
<li><a href="http://www.transduction-meeting.lu/meetings.php">Previous meetings</a></li>
<li><a href="http://www.transduction-meeting.lu/contact.php">Contact us</a></li>
</ul>




/* Debut style header */
#header
{
height: 40px;
background-color: #FF00FF;
text-transform: uppercase;
margin: auto;
}

ul#header
{
list-style-type: none;
background-color: #FF0000;
margin: 0 auto;
}

ul#header li
{
float: left;
text-align: center;
}

ul#header li a
{
padding: 5px;
margin: 0 5px 0 5px;
line-height: 25px;
font-size: 0.9em;
font-weight: bold;
letter-spacing: 1px;
color: #FFFFFF;
display: inline-block;
text-decoration: none;
}

ul#header li a:hover
{
color: #FFFFFF;
}
/* Fin style header */



<div id="frame">
	
	<div id="bann">
	</div>
	
	<div id="liner"></div>
	
	<div id="header">
	<?php include("style/php/header.php"); ?>
	</div>
	
	<div id="conteneur">
	
	<div id="texte">
    
    <center>
    <h2>Metabolism 2014<br/>
	Alterations of metabolic pathways as therapeutic targets<br/>
	(Esch-sur-Alzette, Campus Belval, January 29th to 31st, 2014)</h2>
    </center>

	<br/>
    
    <div class="lettre">
	<p>In 1998, we organized the first specialized meeting in the field of signal transduction and gene expression in Luxembourg. This type of meeting was originally thought to teach doctoral students of the <b>molecular and cellular biology master training program</b> of the University of Nancy I (France).</p>

	<p>Since then, more than <b>5000 fundamental, clinical and industrial researchers</b> were gathering in Luxembourg for eight different meetings in order to discuss therapeutic applications in the field of signal transduction, transcription and translation related to novel therapeutic applications. These meetings allow new insights into this rapidly moving field.</p>
	
	<p>As in 2011, our 2014 meeting will be held under the auspices of the European Research Institute for Integrated Cellular Pathology. We will publish two special numbers based on the meetings contributions in <a href="http://www.journals.elsevier.com/biochemical-pharmacology/" target="_blank">Biochemical Pharmacology</a> and in <a href="http://www.e-jcp.or.kr" target="_blank">Journal of Cancer Prevention</a>.</p>
	
	<p>The conference will focus on novel advances in the field of metabolic pathways related to disease mechanisms and corresponding innovative therapies. Conferences will document recent advances in this topic including neurodegenerative diseases, diabetes, cancer and ageing.</p>
	
	<p>Welcome to Luxembourg!</p>
	
	<p>Pr Marc Diederich (PhD) and Pr Guido Kroemer (MD, PhD)</p>
	</div>
	
	</div>

	</div>
	
	<?php include("style/php/footer.php"); ?>
	
	</div>


Merci d'avance
Modifié par fgaascht (29 Dec 2013 - 11:58)
Bonjour,

Cela a permis de mieux centrer le menu mais pas parfaitement, le menu "tire" un peu plus sur la droite.

http://www.transduction-meeting.lu/hotels.php

J'ai vérifié les margin, padding mais je ne trouve pas mon erreur.


html
{
height: 100%;
}

body
{
font-family: Arial, sans-serif;
font-size: 1em;
margin: 0;
background-color: #660033;
}

#frame
{
margin: 0;
min-height: 100%;
}

#bann
{
height: 180px;
background-color: #FFFFFF;
background-image: url(../style/pictures/bannier.gif);
background-repeat: no-repeat;
background-position: center;
padding: 5px;
}

#liner
{
height: 2px;
background-color: #A7A37E;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}

/* Debut style header */
#header
{
height: 40px;
background-color: #FF00FF;
text-transform: uppercase;
margin: auto;
}

ul#header
{
list-style-type: none;
text-align: center;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top,  #537AAD 0%, #285999 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#537AAD), color-stop(100%,#285999)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #537AAD 0%,#285999 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #537AAD 0%,#285999 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #537AAD 0%,#285999 100%); /* IE10+ */
background: linear-gradient(to bottom, #537AAD 0%,#285999 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D6AA3', endColorstr='#285999',GradientType=0 ); /* IE6-9 */
}

ul#header li
{
display: inline-block;
}

ul#header li a
{
padding: 5px;
margin: 0 5px 0 5px;
line-height: 25px;
font-size: 0.9em;
font-weight: bold;
letter-spacing: 1px;
color: #FFFFFF;
display: inline-block;
text-decoration: none;
}

ul#header li a:hover
{
color: #A0A0A0;
}
/* Fin style header */

#conteneur
{
height: 100%;
padding:0 180px 0 180px;
margin: 0 auto;
background: #dddddd; /* Old browsers */
background: -moz-linear-gradient(top,  #285999 0%, #FFFFFF 80%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#285999), color-stop(80%,#FFFFFF)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #285999 0%,#FFFFFF 80%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #285999 0%,#FFFFFF 80%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #285999 0%,#FFFFFF 80%); /* IE10+ */
background: linear-gradient(to bottom,  #285999 20%,#FFFFFF 80%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#285999', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}

/* Debut style texte */
#texte
{
min-height: 100%;
background-color: #FFFFFF;
margin-left: 100px;
margin-right: 100px;
line-height: 1.7em;
padding: 12px;
text-align: justify;
font-size: 0.8em;
}

ul#texte
{
height: 25px;
margin: 0;
padding: 0;
list-style-type: none;
}

ul#texte li
{
float: left;
text-align: center;
}

.notice
{
font-size: 1.2em;
text-style: bold;
text-align: justify;
border: 1px solid #046380;
background: #FF0000;
color: #FFFFFF;
padding: 2px;
margin: 5px 0px;
}

.lettre
{
font-size: 1.1em;
text-align: justify;
border: 1px solid #000000;
background: #F7F6E4;
padding: 15px;
margin: 10px;
}

.lettre p
{
text-indent: 0px;
padding: 0px 0px 5px 0px;
}

.boxinfos
{
font-size: 1em;
text-align: justify;
border: 1px solid #046380;
background: #EFECCA;
padding: 2px 8px 8px 5px;
margin: 5px 0px;
}

.boxinfos img
{
float: left;
margin: 4px 4px 4px 4px;
border: none;
}

.boxinfos h4
{
font-size: 1.1em;
}

.contact
{
font-size: 1em;
text-align: justify;
border: 1px solid #046380;
background: #EFECCA;
padding: 2px 8px 0px 8px;
margin: 5px 5px;
}

.contact img
{
float: left;
padding: 0px 3px 3px 0px;
border: none;
}

/* START tableau contact */
table.contact
{
width: 600px;
line-height: 1.4em;
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
vertical-align: top;
}
/* START tableau contact */

/* START tableau program */
table.program
{
margin: auto;
width: 640px;
line-height: 1.4em;
padding-bottom: 14px;
border-collapse: collapse;
margin-bottom: 18px;
}

table.program td
{
border-bottom: 1px solid #000000;
vertical-align: top;
padding-top: 6px;
padding-bottom: 6px;
}

table.program h5
{
text-align: center;
border-bottom: none;
}

/* END tableau program */

/* START tableau lunch workshop poster lwp */
table.lwp
{
margin: auto;
width: 500px;
line-height: 1.4em;
padding-bottom: 14px;
border-collapse: collapse;
margin-bottom: 18px;
}

table.lwp thead
{
text-align: center;
font-weight: bold;
vertical-align: top;
padding-top: 6px;
padding-bottom: 6px;
}

table.lwp tbody
{
vertical-align: top;
padding: 34px;
}

table.lwp td
{
border: 1px solid #000000;
padding: 6px;
}

table.lwp h5
{
text-align: center;
}

/* END tableau lwp */

/* START tableau hotel */
table.hotel
{
margin: auto;
width: auto;
line-height: 1.4em;
border-collapse: collapse;
}

table.hotel thead
{
font-weight: bold;
border-bottom: 1px solid #000000;
padding-bottom: 8px;
margin-bottom: 12px;
}

table.hotel tbody
{
padding-bottom: 14px;
}

table.hotel td
{
padding: 6px;
}

/* END tableau hotel */

/* START tableau ncck */
table.ncck
{
width: 600px;
border-collapse: collapse;
line-height: 1.4em;
margin-left: auto;
margin-right: auto;
margin-bottom: 8px;
vertical-align: top;
text-align: center;
}
/* START tableau ncck */

table.centre
{
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}

#texte img
{
margin-right: 8px;
}

#texte ul
{
list-style-type: none;
padding-left: 10px;
}

#texte h3
{
font-size: 1.3em;
text-decoration: underline;
text-align: center;
}

#texte h4
{
font-size: 1.1em;
margin: 12px 0px 5px 0px;
}

#texte h5
{
font-size: 1em;
margin: 5px 0px 2px 0px;
}

#texte h6
{
font-size: 1em;
text-align: center;
margin: 5px 0px 2px 0px;
}

#texte hr
{
width: 350px;
margin-top: 15px;
margin-bottom: 15px;
}

#texte info
{
font-size: 1em;
}

#texte a
{
font-size: 1em;
font-weight: bold;
text-decoration: none;
color: #285999;
}

#texte a:visited
{
color: #18355C;
}

/* Fin style texte */

/* Debut style paragraphe */
p
{
text-indent: 25px;
text-align: justify;
margin: 0px;
margin-bottom: 8px;
}
/* Fin style paragraphe */

/* Debut style menu */
#left_menu
{
top:auto;
float: left;
width: 190px;
background: #FFFFFFF;
}

.menu_element
{
list-style-type: none;
padding-bottom: 7px;
}

.menu_element img
{
text-align: center;
padding: 1px 0px 0px 0px;
}

.menu_element h4
{
display: block;
text-align: center;
margin: 10px 5px 3px 5px;
padding: 3px;
font-size: 0.9em;
font-weight: bold;
color: #002F2F;
background-color: #A7A37E;
border: solid 1px #046380;
}

.menu_element li
{
margin-bottom: 0px;
line-height: 20px
}

.menu_element a
{
text-decoration: none;
font-size: 0.8em;
display: block;
margin: 0px;
padding: 1.5px 1.5px 3px 1.5px;
height: auto;
vertical-align: middle;
color: #000000;
}

.menu_element a:hover
{
font-weight: bold;
}

.menu_element a:visited
{
color: #FFFFF;
}

.sous_menu
{
height: auto;
margin: 0px 5px;
padding: 0px;
border-top: solid 1px #046380;
}

.sous_menu li
{
text-align: center;
list-style-type: none;
border-bottom: 1px solid #046380;
border-left: solid 1px #046380;
border-right: solid 1px #046380;
}

.sous_menu li a
{
background: #A7A37E;
}

.sous_menu li a:hover
{
color: #000000;
}

#right_menu
{
top:auto;
float: right;
width: 190px;
background: #EFECCA;
text-align: center;
}
/* Fin style menu */

.poster
{
font-family: Arial, sans-serif;
text-align: center;
font-size: 1em;
padding: 0px 8px;
padding-top: 5px;
}

.poster img
{
float: center;
}

.abstract
{
font-family: times_new_roman;
font-size: 1.1em;
text-align: justify;
padding: 2px 8px;
margin: 5px 0px 0px 0px;
border-top: solid 1px #000000;
padding-top: 10px;
}

#footer
{
clear: both;
height: auto;
text-align: center;
font-size: 0.8em;
color: #909090;
background-color: #404040;
padding: 15px;
}

#footer a 
{
text-decoration: none;
color: #E68A00;
line-height: 30px;
}

img
{
margin: 4px;
border: none;
}


Peut être qu'un œil extérieur trouvera.

Encore merci.
Bonjour,

Merci pour cette information que j'ignorais et qui m'a permis de résoudre ce problème.

Encore merci.
Sujet clos
Aller à