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)
|
XHTML Best Effort Valid
