Stylesheet tutorial

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
chipus

Stylesheet tutorial

Post by chipus »

hi,

i want to have a menu like this.
Could anyone give me a tutorial on what tag should i use for my stylesheet
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Stylesheet tutorial

Post by Dr.CSS »

this is the CSS for that menu,,

/* A CSS Framework by Mike Stenhouse of Content with Style */

/* NAV */

.rt {
background:url("uploads/images/dot.png") repeat;
margin:0;
padding:0;
}

.lt {
background:url("uploads/images/roundedbox_lt.png") top left no-repeat;
margin:0;
padding:0;
}
 
.rb {
background:url("uploads/images/roundedbox_rb.png") bottom right no-repeat;
margin:0;
padding:0;
}
 
.lb {
background:url("uploads/images/roundedbox_lb.png") bottom left no-repeat;
margin:0;
padding:0;
}

.bulletmenu {
margin:0;
padding: 1em 1px;
}

div#nav {
        font-size: 1em;

    }
    * html div#nav {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }
    div#nav div.wrapper {
        width: 100%;
       
    }
    div#nav ul {
        width: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    div#nav li {
        display: block;
        list-style: none;
        margin: -1px 0;
        padding: 0;
    }
    * html div#nav li {
        /* hide ie/mac \*/
        height: 1%;
        /* end hide */
    }

    div#nav a,
    div#nav a:link,
    div#nav a:active,
    div#nav a:visited {
        display: block;
        font-weight: bold;
        text-decoration: none;
        margin: 0;
        padding: 0.5em 1em;
        color: #fff;
        background: #274050 url("uploads/images/dot.png");
    }

    div#nav ul ul li a,
    div#nav ul ul li a:link,
    div#nav ul ul li a:active,
    div#nav ul ul li  a:visited {
        padding: 0.3em 0 0.5em 1.8em;
        color: #274050 ;
        background: #ACC0CD;
        font-size: 0.9em;
    }


    div#nav ul ul ul li a,
    div#nav ul ul ul li a:link,
    div#nav ul ul ul li a:active,
    div#nav ul ul ul li  a:visited {
        padding: 0.3em 0 0.5em 2.8em;
        color: #274050 ;
        background: #ACC0CD;
        font-size: 0.8em;
    }

    div#nav a:hover,
    div#nav a:link:hover,
    div#nav a:active:hover,
    div#nav a:visited:hover { 
        color: #274050;
        background: #fff;
    }

div#nav a.currentpage,
div#nav a:link.currentpage,
div#nav a:active.currentpage,
div#nav a:visited.currentpage {
      color: #274050;
      background: #fff;
}
/* END NAV */


/* A CSS Framework by Mike Stenhouse of Content with Style */



/* NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
        position: relative;
        width: 99.8%;
       
        margin: 1em auto 2em auto;
        padding: 0;
       
        text-align: left;
    }
    div#main {
        float: right;
        width: 72%;
        display: inline;
        padding-top: 0;
        margin-top: 0;
    }
    div#printlink {
        float: right;
    }
    div#printlink a {
background: url(images/cms/printbutton.gif) no-repeat 0 0;
padding: 0 0 0 20px;
    }
    div#local {
        display: none;
    }
    div#sub {
        display: none;
    }
    div#nav {
        float: left;
        width: 25%;
        display: inline;
    }
/* END CONTENT */

if you have Firefox you can get the Web Developer extention and see the CSS for any site,,

    mark
chipus

Re: Stylesheet tutorial

Post by chipus »

Thx a lot, Mark
Locked

Return to “Layout and Design (CSS & HTML)”