SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting this image into css for navigation

    Hi,

    Just wanted to know if it would be possible and easy to convert the following button into css as part of a menu navigation. I can see it being easy had there not been two square sections missing on the box underneath - but can't see how to do it with them there - this squares are transparent but it doesn't matter if they can't be - i'll just set the colour to the colour of the page' background.

    Would appreciate some help on this as I don't want to use images for the nav(would like to make this dynamic menu and don't want to have to create images on the fly which is the other option).

    http://www.yduk.net/cssimage.gif

    Cheers,
    Chris

  2. #2
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can put two divs over each other.

  3. #3
    SitePoint Enthusiast eXile_30's Avatar
    Join Date
    Jul 2004
    Location
    Calgary, Canada
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could create the boxes as a background image and use lists for the navigation. Something like this:

    Code:
    #navigation ul {
       list-style-type: none;
    }
    
    #navigation li, #navigation li a {
       background-image: url(cssimage.gif);
       padding: 20px;
       margin: 10px;
       width: 140px;
    }
    This code hasn't been tested specifically and it's basic but use it as an example and feel free to ask questions.
    Your company's web department
    Screenflicker Developments

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With CSS you don't need images to create menu rollover effects.

    Here's a simple example.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Simple CSS RollOver Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     
    <style type="text/css">
     
    body{margin: 0;
    		padding:0;
    					 background:darkseagreen;} 
    #navcontainer { width: 200px; text-align:center}
    #navcontainer ul{margin-left: 0;
    	padding-left: 0;
    	list-style-type: none;
    	font-family:times new roman;
    	font-weight:bold;}
    #navcontainer a{display: block;
    padding: 3px;
    width: 160px;
    background-color:rosybrown;
    border:solid black 1px;
    border-top:solid silver 1px;}
    #navcontainer a:link, #navlist a:visited{color:black;
    	 text-decoration: none;}
    #navcontainer a:hover{background-color:sandybrown;
    		 color:midnightblue;}
    </style>
    </head>
    <body>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="http://www.sitepoint.com/" id="current">No Images</a></li>
    <li><a href="<A href="http://www.google.com/">No">http://www.google.com/">No JavaScript</a></li>
    <li><a href="PurYourUrlHere">Just CSS</a></li>
    <li><a href="Ditto">A Few Divs</a></li>
    <li><a href="DittoDitto">And Some Rules</a></li>
    </ul>
    </div>
    </body>
    </html>

  5. #5
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your examples guys, just wanted to see if anyone could replicate my button using JUST css?

  6. #6
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any ideas?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •