How do I add color to the white space between the blue blocks? Here is the code snippet:
#nav{
padding:0;
}
.rech{
margin-left: 785px;
}
.px{
margin-left: 3px;
}
#nav li{
display:inline;
}
#nav li a, .rech{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #0568CD;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#0568CD;
border-bottom-style:solid;
}
#nav li a:hover{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
Here is a screenshot
Below is my HTML code:
> <%@ page pageEncoding="UTF-8" %>
> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
> <!DOCTYPE html>
> <html>
> <div>
> <link type="text/css" rel="stylesheet" href="<c:url value="/inc/form.css"/>" />
> <ul id="nav">
> <li><a href="/projetForum/accueil" class="px">Forum</a></li>
> <c:if test="${!empty sessionScope.sessionUtilisateur}">
> <li><a href="/projetForum/deconnexion">Profil</a></li>
> <li><a href="/projetForum/deconnexion">Se déconnecter</a></li>
> </c:if>
> <c:if test="${empty sessionScope.sessionUtilisateur}">
> <li><a href="/projetForum/connexion">Se connecter</a></li>
> <li><a href="/projetForum/inscription">S'inscrire</a></li>
> </c:if>
> <li><a href="/projetForum/contactus">Nous contacter</a></li>
> <li><input type="text" id="rechercher" name="rechercher" value="Recherche" size="20" maxlength="20" class="rech"/></li>
> </ul>
> </div>
> </html>
(formatted html code to show it in the post)