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!
Vous devez vous connecter pour publier un commentaire.
D'abord, vous devez vérifier votre structure HTML – il semble y avoir un manque de fermeture de balise DIV et vous devez le supprimer de l'emballage les éléments P autour de la liste des éléments.
Essayez ceci:
Après vous avez juste besoin de donner à votre image d'en-tête de ce CSS:
et l'ul.navbar besoin de quelque chose comme ceci:
et vous devez le supprimer de la position relative de votre div#contentareamain1 pour obtenir ce code de travail.
Vous devriez vraiment visiter W3C et d'apprendre votre code HTML 🙂
Le code HTML
Votre code HTML contient quelques
<p>
-balises qui ne leur appartient pas. Aussi, je suppose que vous voulez que votre contenu à l'extérieur de l'en-tête?Le CSS
(J'ai seulement vous donner un exemple sur la façon de placer votre barre de navigation centré dans votre en-tête, le reste est à vous de voir)
Vous pouvez voir le code en action à jsFiddle et de jouer avec elle.
Espérons que cela vous a aidé un peu.