Ajouter une image/logo dans une page HTML-de la liste/menu de Navigation
Je suis de la création d'un flottant menu de navigation pour ma page liste dans mon blog, et à l'intérieur de cette liste, je suis en train de changer l'un des liens dans mon logo. Certains auraient suffit d'inclure le logo à l'arrière-plan de ce menu de navigation, mais mon problème est que le logo est comme un ruban qui chevauche les choses ci-dessous, et si elle faisait partie de l'arrière-plan, il sera coupé.
Voici ce que je veux dire.
Au moment où le logo est une image distinct, mais je voudrais le connecter à la fois, et d'inclure comme une autre "lien" parce que sinon, c'est de cacher les choses en dessous.
html:
<div id='nav'>
<p class='title'><a href='#'></a></p>
<ul id='navigation'>
<li class='navigation-Blog'><a href='#'>Blog</a></li>
<li class='navigation-Crew'><a href='#'>Crew</a></li>
<li class='navigation-Promos'><a href='#'>Promos</a></li>
<li class='navigation-Tricks'><a href='#'>Tricks</a></li>
<li class='navigation-Parties'><a href='#'>Parties</a></li>
<li class='navigation-P.J.Squad'><a href='#'>P.J. Squad</a></li>
<li class='navigation-Chat'><a href='#'>Chat</a></li>
<li class='navigation-Fanart'><a href='#'>Fanart</a></li>
<li class='navigation-Graphics'><a href='#'>Graphics</a></li>
<li class='navigation-Beta'><a href='#'>Beta</a></li>
</ul>
</div>
et le CSS, j'ai utilisé:
#nav
{
background: url(http://4.bp.blogspot.com/-dVtgikk- kOY/UprtswP0yGI/AAAAAAAADag/Og0DtZ8t_oQ/s1600/header+base.png) no-repeat scroll top center; background-color: none;
width:100%;
height:66px;
box-shadow: 0px 1px 10px #5E5E5E;
position:fixed;
top:0px;
}
.title
{
display:none;
color:#EDEDED;
font-family:verdana;
font-size:25px;
width:350px;
margin-top:6px;
margin-left:150px;
font-weight:bold;
float:left;
}
#navigation
{
list-style-type:none;
}
li
{
display:inline;
padding:15px;
}
#nav a
{
font-size: 1.6em;
text-transform: uppercase;
text-shadow: 0 0 0.3em #464646;
font-weight: bold;
font-family:century gothic;
text-decoration:none;
color:#262626;
opacity:0.26;
}
#nav a:hover
{
opacity:0.36;
}
- pouvez-vous créer jsfiddle ?
- Ouais, ici: jsfiddle.net/aSsy9 Aussi, min-height était une bonne idée, mais ne fonctionne pas désolé de le dire!
- j'ai mis à jour jsfiddle et le code que je vous donne espère que cela va vous aider. @joeono
InformationsquelleAutor Joeono | 2013-12-06
Vous devez vous connecter pour publier un commentaire.
Placer le logo dans un élément de l'image. Si vous voulez que le logo lien vers votre page d'accueil, de l'envelopper dans un lien.
Voir exemple de gauche et exemple centré.
Au centre: faire Flotter le logo à gauche et à donner de la valeur liquidative de largeur. Diviser la navigation en deux uls et changer l'id de la navigation à une classe de la navigation.
Place à l'image du logo de l'entre-deux uls.
Ajouter ceci dans votre CSS:
L'image entre vos deux de navigation uls:
CSS:
HTML:
Vous pouvez ajouter des éléments à l'intérieur d'un élément de la liste, alors jouez avec le code ci-dessous et voir si cela vous permet de vous rapprocher de ce que vous voulez. Voici le code html pour l'élément de la liste qui contient le logo. Il suffit de glisser entre vos autres éléments de la liste, si vous le voulez, dans le centre du menu.
Voici le CSS. Vous aurez envie de céder min-height sur votre nav ou de quitter la hauteur parce que lorsque vous réduisez la page, les éléments de menu va commencer une autre ligne, et un flexible de hauteur de l'élargir pour inclure tous les éléments de menu.
Si vous décidez d'utiliser inline-block pour votre li éléments de menu, n'oubliez pas inline-block besoins vertical-align:top; et a un petit espace autour de chaque élément. L'écart est facile à enlever, et voici un bon article sur inline-block:http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
À l'aide du Navigateur Outils de développement
Vous pouvez cliquer sur la touche F12 dans la plupart des navigateurs pour ouvrir les Outils de développement. Selon votre navigateur, vous pouvez cliquer sur les différents éléments à l'intérieur de la page pour afficher son CSS et HTML, et vous pouvez modifier, ajouter ou supprimer le code. Ceci est très utile lors du dépannage, ou de voir comment un élément est construit. Vous pouvez modifier le code dans le navigateur et de voir les résultats, par rapport passe en arrière et quatrième entre la modification de votre code html, et en rafraîchissant le navigateur. Actuellement CodeSchool.com offre un très bon cours gratuit sur Chrome Developer Tools: https://www.codeschool.com/courses/discover-devtools.
Ici est la JSFiddle démo:
J'ai fait des changements dans votre CSS et HTML stuctures, trop.
HTML :
CSS :
J'espère que cela va vous aider.