Hey Leute!
Ich würde gerne eine einfache png als Aufzählungszeichen vor jeden Link der Navigation bar legen.
Da sich meine CSS Kenntnisse zugegebenermassen in Grenzen halten, habe ich auf gut glück versucht, es irgendwo im Header einzufügen (per Firebug), um so die entscheidende Referenz zu finden.
Als befehl habe ich "list-stlye-image:url('images/...');" verwendet. ist das überhaupt so richtig? :D und kann ich das überhaupt direkt machen in der stlye.css oder muss ich mir da was anderes anschauen?
Leider hab ich die site gerade noch auf nem testing server laufen, deshalb poste ich hier vorerst den ausschnitt des headers aus der style.css und schaue zu, dass ich die site schnellstmöglich oben habe.
Gruß Deniz
/*////////////////////////////////////////////////////////////////////////
// 04 - Header
///////////////////////////////////////////////////////////////////////*/
#header{
width: 100%;
position: relative;
padding: 0 0 0 0;
margin: 0;
background: #83b8cc;
}
#header .inside{
max-width: 62.5em;
margin: 0 auto;
position: relative;
padding: 0;
}
#header .inside .top {
background: rgba(0,0,0,.1);
padding: 10px 20px 10px 20px;
border-bottom: 1px solid rgba(0,0,0,.1);;
}
#header .inside .top p{
margin: 0;
color: #c1dce6;
}
#header .inside .bottom {
padding: 20px 0 20px 0;
position: relative;
}
#logo {
display: inline-block;
margin: 0px 0 0px 3%;
float: left;
padding: 0;
}
#logo h1 {
margin: 0 !important;
line-height: 1em !important;
padding: 0 !important;
font-size: 1.5em;
font-weight: bold;
color: #fff;
}
#header h1 {
font-size: 1.5em;
color: #fff;
margin: 0;
}
#header h1 a, #header h1 a:hover{
color: #fff !important;
}
/* Top level navigation */
#header .top .right .sf-menu {
padding-top: 5px;
}
#mainNav{
right: 3%;
position:absolute; top:50%; height:20px; margin-top:-10px;
font-family: Oswald;
z-index: 300;
font-size: 30px;
}
.sf-menu li, #mainNav li{
margin: 0 0 0 1.5em;
display: inline-block;
padding: 0;
}
.sf-menu a, #mainNav ul a{
line-height: 25px;
color: #c1dce6;
font-size: .75em;
font-weight: bold;
}
.sf-menu a {
font-weight: normal;
line-height: 15px;
}
.sf-menu {
margin: 0 !important;
padding: 5px 0 0 0;
}
.sf-menu li {
margin: 0 0 0 15px;
padding: 0;
}
.sf-menu ul a, #mainNav ul ul a{
line-height: 15px;
font-weight: normal;
border-top: none;
}
#mainNav ul li.current a,
#mainNav ul li.current-cat a,
#mainNav ul li.current_page_item a,
#mainNav ul li.current-menu-item a,
#mainNav ul li.current-post-ancestor a,
.single-post #mainNav ul li.current_page_parent a,
#mainNav ul li.current-category-parent a,
#mainNav ul li.current-category-ancestor a,
#mainNav ul li.current-portfolio-ancestor a,
#mainNav ul li.current-projects-ancestor a {
text-decoration: none;
color: #fff;
}
#mainNav ul li.sfHover a,
#mainNav ul li a:hover,
#mainNav ul li:hover,
.menu-top-menu-container ul li.sfHover a,
.menu-top-menu-container ul li a:hover,
.menu-top-menu-container ul li:hover {
text-decoration: none;
color: #fff;
}
/* Second level+ dropdowns */
#mainNav ul ul {
padding: 20px 0px 0 0px !important;
margin-top: -10px;
background: #83b8cc;
}
#mainNav ul ul ul {
padding-top: 20px !important;
margin-left: -1.25em;
margin-top: -5px;
}
#mainNav ul ul li {
float: none;
background: none;
margin: 0 5px 10px 15px !important;
}
#mainNav ul ul li a {
padding: 0px 0 10px 0;
font-weight: normal;
border: none !important;
}
#mainNav ul li.sfHover ul a { color: #7b7b7b!important; }
#mainNav ul li.sfHover ul a:hover { color: #fff!important; }
/** arrow **/
#mainNav .sf-menu a.sf-with-ul {
position: relative;
min-width: 1px;
}
.sf-sub-indicator {
position: absolute;
bottom: 0px;
display: block;
width: 100%;
text-indent: -999em;
overflow: hidden;
z-index: 200;
height: 40px;
}
.sfHover .sf-sub-indicator {
bottom: -10px;
}
#mainNav .sf-menu li ul .sf-sub-indicator {
display: none;
}
#mainNav .sf-menu li ul .sfHover .sf-sub-indicator {
position: absolute;
top: 0;
right: -1px;
left: none;
display: block;
}
.sfHover a.sf-with-ul .sf-sub-indicator {
height: 30px;
}
.children .sf-sub-indicator {
display: none;
}
