Help With Making New Menu

Discussion in 'CSS' started by gobbly2100, Oct 26, 2007.

  1. #1
    Hey,

    I am slowly converting my site from a table layout to a CSS design and I want to know how I am best to go about converting the buttons along the top?

    Huxley

    I am fairly new to this CSS stuff, I am not sure if I should make a load of div tags or if it should be a list.

    Thanks in advance for any help.
     
    gobbly2100, Oct 26, 2007 IP
  2. pluswebdev

    pluswebdev Banned

    Messages:
    205
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If the buttons will stay as images just use div, imo
    Example usage
    the css
    .topnav {
     text-align:center; #this will center all elements in div tag, not only the text
     padding: 4px; #modify it for your needs
     margin: 4px; #modify it for your needs
    }
    
    .navimg {
     border: 0px;
     padding: 4px; #modify it for your needs
    }
    HTML:
    the html
    <div class="topnav">
    <a hreff="menu1.html"><img src="images/menu1.jpg" class="navimg"></a> 
    <a hreff="menu2.html"><img src="images/menu2.jpg" class="navimg"></a> 
    ......
    </div>
    HTML:
     
    pluswebdev, Oct 28, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Personally, I would use the image as a background and use actual TEXT for the text, but if you wanted to keep using the images for that blurry font you could use a image replacement technique to handle it.

    In either case, the menu is a LIST, so it should be coded as a LIST... and the images are presentational so you should have actual TEXT in the list, with the images loaded in the CSS.
     
    deathshadow, Oct 28, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yeah gobbly, the important thing is, there should be text even when you turn images off in your browser-- something ugly, blue and underlined to click on is fine. There are a multitude of ways to cover text with an image --> here's a bunch; look at the bottom.

    Using the Super-Technique (is there a name for it?) where all the button images are actually ONE image and moved around as needed, you could also have a cool hover effect (those buttons are just begging to turn red or green or silver on :hover).
    http://battletech.hopto.org/for_others/pixelcommander/template.html check out pixelcommander's menu.
    http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg



    Wish I could figure out this thumbnail thing.
     
    Stomme poes, Oct 28, 2007 IP