Comment faire Pour centrer la Barre de Navigation Et la Position au Sommet de la Section Inférieure de l'Image de la Bannière

Juste un avertissement, je suis nouveau sur le HTML et CSS. S'il vous plaît être patient avec ma demande ici.

Je tente de centre de la barre de navigation tout en se chevauchant sur le côté bas de la bannière. J'ai une image de la bannière en haut et une image de fond pour le contenu principal qui est placé juste en dessous de la barre de navigation. J'ai tenté d'ajouter ce qui suit:

ul.navbar li {
 float: left}

Ce flottait à la barre de navigation directement sous le corps principal de l'arrière-plan et non au-dessus de tout. Afin d'obtenir la liste dans un format horizontal, j'ai utilisé

ul.navbar li {
 display: inline-table}

C'était la seule variante qui me donnerait le bon format horizontal que je cherchais. Maintenant j'ai juste besoin qu'il soit centré et placée sur le bas de mon image de la bannière. Toutes les suggestions? Mon code HTML et CSS est comme suit:

CSS:

body {

padding-left: 9em;

font-family: Georgia, "Times New Roman", Times, serif;

color: #6699FF;

background-color: white 

}

div#contentareamain1 {

background: url(contentareamain1.png) no-repeat;

background-color: white;

color: white;

height: 634px;

position: relative;

}

div#contentareamain1text {

position: relative;

height: auto;

width: 700px;

left: 5em;

top: 4em;

}

#header {

float:left;

width:100%;

height:87px;

}

.wrap {

position:relative;

margin:0 ;

}

ul.navbar {

list-style-type: none;

padding: 0.3em;

margin: 0;

top: 2em;

left: 5em;

width: 15em;

}

h1 {

font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif 

}

ul.navbar li {

background: rgb(157,193,255);

margin: 0.5em ;

padding: 0.3em;

border-bottom: 1em solid black; 

text-align: center;

display: inline-table;

}

ul.navbar a:hover {

color: blue;

background-color: #00FFFF;

}

ul.navbar a {

text-decoration: none;

}

HTML:

<body>

<div id="header">

<div class="wrap">

<img src="banner.png"/>

</div><ul class="navbar">

<p> <li><a href="index.html">Home</a> </p>

<p> <li><a href="services.html">Services</a> </p>

<p> <li><a href="inspireme.html">Training</a> </p>

</ul>

<div id="contentareamain1" no-repeat>

<div id="contentareamain1text"><p>

</p></div>

</div>

Je vous remercie beaucoup d'avance!

InformationsquelleAutor user2142917 | 2013-03-07