set image as list bullets

ballouta · January 31, 2011

Hello

I have an assignment for my class, i am stuck in this step:

I need to use star.gif as a bullet for the <ul> in the div content,

can you help PLZ

/********************************************************************
* Description: Primary style sheet for Mike's Bait and Tackle Shop
********************************************************************/
/*
Mohamad El Daouk
CIS 114 OL
primary.css
Chapter #5
Assignment# 1
Date: 01/30/2011
*/

/* the styles for the body tag */
body {
    margin-top: 0;
    background-color: yellow;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 87.5%;
line-height: 1.4ems;
}
/*
div {
border: 1px solid black;
} */

/* the styles for the div tags that divide the page into sections */
#page {
    width: 760px;
    margin: 0 auto;
    background-color: white;
    border: 3px solid black;
    border-top: none;
}

#header, #main, #footer {
    padding-left: 0.5em;
    padding-right: 0.5em;
}
#header {
    border-bottom: 1px solid gray;
}

#main {
    padding-top: 1em;
    padding-left: 0;
}
#sidebar {
    /*position: absolute;*/
float: right;
    width: 10em;
}
#content {
padding-left: 1em;
padding-right: 2em;
padding: 0 2ems;
}

#footer {
    border-top: 1px solid gray;
    padding-bottom: 0.5em;
}

/* the styles for the XHTML elements */
h1, h2 {
    color: blue;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 { 
    font-size: 150%;
    margin-top: 0;
    padding-top: 0.5em;
}
h2 { 
    font-size: 120%; 
}

ul {
    margin: 0 0 1em 0;
    padding: 0 0 0 2.5em;
}


li {
    margin: 0;
    padding: 0;
}

a {
    color: mediumBlue;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed darkOrange;
}
a:hover {
    border-bottom: 1px solid darkOrange;
}

/* the styles for the XHTML classes */
.copyright {
    color: gray;
    font-size: 80%;
    text-align: right;
    margin-bottom: 0;
}
.first {
    margin-top: 0;
}
ul.nav {
    margin: 0;
    padding-left: 1.25em;
    list-style-type: none;
}
ul.nav li {
    padding-bottom: 0.5em;
}

and the html is

    <body>
    <div id="page">

        <div id="header">
            <h1>Mike's Bait & Tackle Shop</h1>
        </div>

        <div id="main">
            <div id="sidebar">
                <ul class="nav">
                   <li><a href="products.html">Products</a></li>
                   <li><a href="services.html">Services</a></li>
                   <li><a href="contact.html">Contact Us</a></li>
                   <li><a href="about.html">About Us</a></li>
                </ul>
            </div>

<div id="content">
                <p class="first">Welcome to Mike's Bait & Tackle Shop!
                   We have all the gear you'll need to make your next
                   fishing trip a great success!</p>
                <h2>New Products</h2>
                <ul>
                    <li>Ultima 3000 Two-handed fly rod</li>
                    <li>Phil's Faux Shrimp Fly - Size 6</li>
                    <li>Titanium Open Back Fly Reel - Black</li>
                </ul>
            </div> 
        </div>

        <div id="footer">
            <p><a href="contact.html">Contact us</a> to place your order
               today!</p>
            <p class="copyright">© 2008 Mike's Bait & Tackle
               Shop</p>
        </div>
    </div>
    </body>

Thank you so much

haku · January 31, 2011

http://www.devguru.com/technologies/css2/8101.asp

ballouta · January 31, 2011

Thanks it is working now

Sign In

set image as list bullets

Recommended Posts

ballouta

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

ballouta

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information