28172 sujets

CSS et mise en forme, CSS3

CMS et CSS: ajouter symbole dans un menu

Bonjour,
j'utilise le cms Website Baker pour faire un site avec un menu horizontal et un menu vertical.
Comme tout cms, la mise en page se fait par des feuilles de style, les css.
Avec des connaissances de base, je voudrais quand même retravailler les entrées de mes menus en ajoutant une fléche ou le symbole ">" devant chaque nom.
Comment fait-on cela en css? Je suppose qu'il faut déjá créer le symbole au format jpeg ou png.
Voici ma feuille de style 

body
{
background-color: #fdfffc;
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding: 0px;
}

#nav
{

width: 300px;
height: 25px;
/*border-bottom: 1px solid black;*/
color: white;
background-color:#990000;
/*opacity: 0.8;
-moz-opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);*/
position: relative;
top: 0px;
margin-left: 190px;
left: 50%;
margin-top: 0px;
margin-bottom:0px;
padding: 0px;
}

#nav li
{
display: block;
float: left;
height: 20px;
width: auto;
/*text-align: center;*/
line-height: 25px;
}

#nav li a
{

display: block;
padding-left: 12px;
padding-right: 12px;
color: white;
text-decoration: none;
font: normal normal normal 10px/20px "Lucida Grande", Lucida, Verdana, sans-serif;
}



#nav li a:hover
{
background-color: #666666;
}

#main
{
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 9pt;
width: 980px;
margin-left: auto;
margin-right: auto;
border-right: 1px solid #666666;
border-left: 1px solid #666666;
}

#hero
{
margin: 0px;
width: 200px;
height: 92px;
background-image: url(../../media/jurgschat-banner2.jpg);
background-repeat: no-repeat;
float: left;

}
/*#hero1
{
margin: 0px;
width: 200px;
height: 92px;
margin-left: 160px;
background-image: url(../../media/muster-banner.png);
background-repeat: no-repeat;
float: left;

}*/

#hero2
{
margin: 0px;
margin-left: 220px;
height: 92px;
background-image: url(../../media/top-banner2.png);
background-repeat: no-repeat;

}


/*#header
{
background-image:;
height: 79px;
padding-top: 1px;
position: relative;
}*/

.gear
{
width: 970px;
height: 2px;
margin-top: 0px;
margin-left: 5px;
/*
border-bottom: 2px dotted #000;

*/}

#header h1
{
position: absolute;
left: 74px;
top: 8px;
color: white;
font-size: 48px;
font-weight: bold;
margin: 0px;
}

/*#header h1.shad
{
left: 76px;
top: 10px;
color: black;
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}*/

#header em
{
font-style: normal;
text-decoration: underline;
}

#wrapper
{
padding-top: 1px;
background-color: white;
position: relative;
}
#wrapper:after {
content: '.';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrapper {
display: inline-block;
}
\
#wrapper {
display: block;
}

#sidebar
{
float:left;
text-align: center;
margin-left: 0;
margin-top: 0px;
position: relative;
background-position: bottom left;
padding: 10px 10px 20px 10px;;
background-color:white;
width: 160px;
height: 450px;
border-right: 1px inset grey ;

}
#news
{
float:right;
text-align: center;
margin-left: 0px;
margin-top: 0px;
position:relative;
background-position: bottom left;
padding: 10px 10px 20px 10px;
background-color:white;
width: 160px;
height: 450px;
border-left: 1px inset grey;

}


#news h4
{

background-color:orange ;

}
#sidebar h3
{
font-size: 18px;
border-bottom: 1px solid black;
margin-bottom: 4px;
margin-top: 16px;
clear: both;
}

#sidebar ul
{
margin-left: 1em;
padding-left: 0px;
}

#sidebar p
{
margin-bottom: 8px;
}
#sidebar div.subtabs ul{
list-style: none;
width: 155px;
margin: 0;
padding: 0;
}
#sidebar div.subtabs ul ul{
list-style: none;
width: 130px;
margin: 0;
padding: 0 0 0 5px;
}
#sidebar div.subtabs ul ul ul{
list-style: none;
width: 125px;
margin: 0;
padding: 0 0 0 5px;
}
#sidebar div.subtabs ul a{
width:100%;
margin: 3px;
text-align:left;
font-size: 0.9em;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration:none;
word-wrap:normal;
color:;
display:block;
padding:3px 3px 3px 5px;
/*background:#f4f4f4;*/
/*border-top:1px solid #d8d8d8;*/
/*border-right:1px solid #d8d8d8;*/
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
}
#sidebar div.subtabs ul a:hover {
text-decoration:none;
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#A31E00;
/*border-top:1px solid #b0b0b0;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #b0b0b0;*/
border-left:4px solid #A31E00;
}

#content
{
margin: 0 0 0 180px;
min-height:310px;
height:auto !important;
height:300px;
width:600px;
display: block;
position: relative;
padding: 0px 3px 20px 10px;
color: #333333;

}

#content h1
{
font-size: 20px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline;
}

#content h2
{
font-size: 18px;
/* 18px is the default minimum font size for which anti-aliasing will occur. */
margin: 0px;
text-decoration: underline
}

#content .date
{
float: right;
}

#content .postedBy
{
float: left;
}

#content .meta
{
height: 1em;
}

#content p
{
text-align: justify;
text-indent: 1em;
line-height: 1.3em;
}

.comments
{
border-top: 1px dotted #666666;
border-bottom: 1px dotted #666666;
padding: 4px;
text-align: right;
margin-bottom: 2em;
background-image: url(images/comment_edit.gif);
background-repeat: no-repeat;
background-position: center left;
}

a
{
color: #666666;
}

.pullout
{
background-color: #eeeeee;
padding: 5px;
float: right;
margin: 8px;
}




#footer
{
width: 980px;
height:45px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: auto;
margin-right: auto;

color: #b0b0b0;
background-image:url(../../media/Jurgschat-footer.png);
}

.left
{
float: left;
}

.right
{
float: right;
}

.csskeyword
{
color: blue;
}

.cssvalue
{
color: red;
}

p.caption
{
text-align: center;
}

small.super
{
vertical-align: top;
font-size: 0.75em;
line-height: 1.3em;
}

.nodisplay
{
display: none;
}

Modifié par midiweb (17 May 2008 - 00:08)
Salut,

Bah le plus simple serait de placer ton ">" dans le code html de tes liens... Smiley lol
Sinon un padding-left de la largeur de ton "signe" et un background-image url(image de ton signe) repeat: no-repeat sur tes <li>
Merci. Cela marche impec:

#nav li {
padding-left : 25px;
padding-right : 10px;
display : inline;
height : 20px;
background: url(../../media/traitvertical.jpg) no-repeat;
}
Sujet clos
Aller à