SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Quebec
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Newb in the place, is this possible?

    Hi!
    i bought the HTML Utopia book to learn CSS positioning. I asked someone to make a design and now, i want to start making the site in CSS, something i have never done yet. Now, i have a little concern before we start.

    Here is the url of what i wanna do:
    http://www.tourcar.com/sl_dev/

    At the end, i should get something like that with content:
    http://www.tourcar.com/sl/dev/

    Take a look a the menu.

    I was wondering if in CSS only, it was possible to create the menu effect using only the background image which is the gray... and maybe i should use the image having the darker orange arrow.

    My question is, what would be the better thing to do to create that menu effect in CSS.

    I hope in a couple of weeks, i'll be able to help in return. Thx in advance.

    Karl

  2. #2
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you do a graphical menu like that and use CSS you're kinda of erasing the point of CSS. You can use it to position it though.

    Check out this site, very useful:

    http://www.w3schools.com

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Quebec
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to convert that graphical menu and use only the gray image as background when hover the item.
    So, the text in the menu will stay in text and not as an image, that's what i want to do. And if i wanna change my menu title, i will only change the text and not have to change the image. Is that make sense?

  4. #4
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Avon
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now that you explained it a little more clearly...yes it does. It'll work too. Only problem is I dunno how, I'm not new to design but I am to CSS...

  5. #5
    SitePoint Member Ares_ice's Avatar
    Join Date
    Mar 2004
    Location
    Kentucky
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Do you want it to look like it is 3d so you are using an image. or do you just want the background color when you hover?

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Quebec
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am going to use a background-image finally i guess.

    I want to get a result like:
    http://www.tourcar.com/sl_dev/

    And actually, i have:
    http://www.tourcar.com/sl_dev/css.php

    I am trying to figure out how i can use my top and bottom borders so it does like the result. As for the background, i think i'm gonna be fine.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Heres a simple example that looks like your original. If you want a graduated image on hover just add your image to the hover style below.

    http://www.pmob.co.uk/temp/listexample.htm

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul#nav {
     margin:0;
     padding:0;
     list-style-type:none;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: bold;
    }
    #nav li {
     width:175px;
     border-top:1px solid blue;
     border-bottom:1px solid blue;
     margin:0;
     padding:0;
    }
    #nav li.last {
     border-bottom:2px solid blue;
    }
    #nav li.first {
     border-top:2px solid blue;
    }
    #nav a {
     text-decoration:none;
     color: #CCCCCC;
     background-color: #FFFFFF;
     display:block;
     padding:3px 0;
    }
    #nav a span {
     float:right;
     color: #FFCC99;
    }
    #nav a:hover{
     color: #000;
     background-color: #CCC;
    }
    #nav a:hover span{
     font-weight: bold;
     color: #FF9900;
     background-color: transparent;
    }
    </style>
    </head>
    <body>
    <ul id="nav">
      <li class="first"><a href="#"><span>&raquo;</span>Presentation </a></li>
      <li><a href="#"><span>&raquo;</span>Informations generales </a></li>
      <li><a href="#"><span>&raquo;</span>Destinations et prix </a></li>
      <li><a href="#"><span>&raquo;</span>Programmes pour groupes scolaire </a></li>
      <li><a href="#"><span>&raquo;</span>Inscriptions </a></li>
      <li><a href="#"><span>&raquo;</span>F.A.Q. </a></li>
      <li><a href="#"><span>&raquo;</span>Nous Joindre </a></li>
      <li class="last"><a href="#"><span>&raquo;</span>Dernieres nouvelles </a></li>
    </ul>
    </body>
    </html>
    Hope its of some use

    Paul


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
  •