The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Page 1 of 2 12 LastLast
Results 1 to 15 of 27

Thread: horizontal menu using css and jpgs - help needed.

  1. #1

    horizontal menu using css and jpgs - help needed.

    I have searched google and not found exactly what I need so I have come here hoping that someone with css knowledge can help me.

    I am trying to create a horizontal menu with css using jpg images rather than text.

    the page consists of a header, buttons underneath (4 buttons), under this the content area and under that the footer. So to many here its a straight forward layout.

    I pressume all this should take place in a container div so it can be centered on screen.

    My question is this, If I were to upload a file with the graphic images in, would you take a look and see if it would be possible to put it together so I can see what is going on? I can do vertical menus ok - but this has me stuck

    Thank you.
    I sing like Dali and paint like Marley - That's a problem!

  2. #2
    Since I'm not sure exactly what you're looking for... yeah upload what you need and I'll have a look at it for ya.
    Γνώθι Σεαυτόν

  3. #3
    thank you man. here is the zip - when unzipped there is a file called read me
    Attached Files Attached Files
    I sing like Dali and paint like Marley - That's a problem!

  4. #4
    200
    posts
    Every1 in Scotland duz it
    hey buddy,

    ill take a look at this when i get back from asda *does the asda slap on the back pocket, squashing the butterflies*.

    u could do what i do eons ago.

    http://www.hklhangout.co.uk/websites/v1/

    then do the buttons like this

    http://www.simplebits.com/notebook/2...rollovers.html

    just a quick fix. ill look at it more closely when i get back, no doubt css guru's richter and ankou will sort u out before get back.

    p.s ur buttons could be done without images

  5. #5
    thanks hkl,

    The file has been downloaded 3 times so yeah perhaps one of the other guys is looking into it. All I can say is thanks and I will try and help someone out on one of the forums as an extra thanks to the community - I have in the past made up plenty of fla files to help others here, so i don't feel too bad about asking

    cheers all.
    I sing like Dali and paint like Marley - That's a problem!

  6. #6
    i did this sort of rushed, but this is the approach i would take...
    HTML Code:
    <html>
    <head>
    
    <style>
    
    /* nav list and hovers */
    #nav ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	}
    #nav li {
    	display: inline;
    	}
    #nav a {
    	width: 150px;
    	height: 80px;
    	background-color: #333;
    	float: left;
    	border-width: 0 0 5px 0;
    	border-style: solid;
    	border-color: #333;
    	margin: 2px;
    	}
    #nav a:hover {
    	border-color: #f36;
    	}
    #nav span {
    	display: none;
    }
    
    /* nav bg images */
    .nav_home {
    	background-image: url('BUTTONS/home.gif') no-repeat;
    }
    .nav_contact {
    	background-image: url('BUTTONS/contact.gif') no-repeat;
    }
    .nav_regulars {
    	background-image: url('BUTTONS/regulars.gif') no-repeat;
    }
    .nav_links {
    	background-image: url('BUTTONS/links.gif') no-repeat;
    }
    </style>
    
    </head>
    <body>
    <ul id="nav">
    	<li class="nav_home"><a href="#" title="Home"><span>Home</span></a></li>
    	<li class="nav_contact"><a href="#" title="Contact"><span>Contact</span></a></li>
    	<li class="nav_regulars"><a href="#" title="Regulars"><span>Regulars</span></a></li>
    	<li class="nav_links"><a href="#" title="Links"><span>Links</span></a></li>
    </ul>
    </body>
    </html>
    you do it this way because of accessibility. anyone with style sheets turned off can still read the nav easily (this includes screen readers). this is just an extension of content vs. presentation. really, those nav images aren't the content, just the presentation. so the images don't need to be present in the html, just the css.

    i haven't actually tried this with the images provided, so you might have to compensate for filenames, paths, width, height. but the concept works.
    Last edited by bwh2; April 3rd, 2006 at 11:10 AM.

  7. #7
    thanks very much for that code. I rectified the image paths but i dont see the images for some reason when i test in the browsers.
    I sing like Dali and paint like Marley - That's a problem!

  8. #8
    http://www.alvit.de/handbook/#navmenus there's a whole list of navs and techiniques there, I've viewed all the links at one point and time and I know some of them use images.
    Let us live so that when we come to die even the undertaker will be sorry. - Mark Twain
    Don't PM me your CSS, xHTML, JS or PHP questions. I will not reply to ANY IE6 questions.

  9. #9
    thanks for that link simplistic

    nice link for all sorts of stuff.
    I sing like Dali and paint like Marley - That's a problem!

  10. #10
    whoops, guess i should have tested first. here's what works:
    HTML Code:
    <html>
    <head>
    
    <style>
    
    /* nav list and hovers */
    #nav ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	}
    #nav li {
    	display: inline;
    	width: 112px;
    	height: 40px;
    	}
    #nav a {
    	display: block;
    	width: 112px;
    	height: 40px;
    	float: left;
    	border-width: 0 0 5px 0;
    	border-style: solid;
    	border-color: #333;
    	margin: 2px;
    	}
    #nav a:hover {
    	border-color: #f36;
    	}
    #nav span {
    	display: none;
    }
    
    /* nav bg images */
    .nav_home a {
    	background: url('buttons/home.jpg') no-repeat;
    }
    .nav_contact a {
    	background: url('buttons/contact.jpg') no-repeat;
    }
    .nav_regulars a {
    	background: url('buttons/regulars.jpg') no-repeat;
    }
    .nav_links a {
    	background: url('buttons/links.jpg') no-repeat;
    }
    </style>
    
    </head>
    <body>
    <ul id="nav">
    	<li class="nav_home"><a href="#" title="Home"><span>Home</span></a></li>
    	<li class="nav_contact"><a href="#" title="Contact"><span>Contact</span></a></li>
    	<li class="nav_regulars"><a href="#" title="Regulars"><span>Regulars</span></a></li>
    	<li class="nav_links"><a href="#" title="Links"><span>Links</span></a></li>
    </ul>
    </body>
    </html>
    your images will look funny at first b/c you were showing margin through imagery, not css margin. so you'll have to fix your images.

    btw simp, that looks like a pretty handy site.
    Last edited by bwh2; April 3rd, 2006 at 12:34 PM.

  11. #11
    200
    posts
    Every1 in Scotland duz it
    hey buddy,

    my css is most likely terrible. Done it without using the images if thats ok? I hope its useful to you.

    http://www.hklhangout.co.uk/menu/

    http://www.hklhangout.co.uk/menu/menu.css
    Last edited by hkl; April 3rd, 2006 at 02:00 PM.

  12. #12
    200
    posts
    Every1 in Scotland duz it
    holy bijesus. I just looked at the link by simp. I skimmed over his post thinking he posted listomatic. then i actually looked at it. nice link. *bookmarked*

  13. #13
    thanks for that hkl. I can sort of get that far. Its just getting the images to work thats causing the problem and aligning them on the page is will be tough. But thank you for your help

    i'm now going to look at the new code sent in by bwh2.

    I appreciate all the help from you guys
    I sing like Dali and paint like Marley - That's a problem!

  14. #14
    Quote Originally Posted by hkl
    btw hkl, you should check how that renders in IE7.


    SM, my code doesn't try to center anything or include the header. i was mostly shooting at the nav. anyway, you will want to throw everything into a container and center the container. if i get a chance later i can show you what i mean.

  15. #15
    bwh2,

    thanks man - yeah the buttons show perfect now. This is my plan now, build the page with html and css using simple divs for layout - see how far I get and then possibly write back when i hit a problem - the next time i write back i am hoping that the fix ups will be pretty straight forward

    ps yeah i've contained stuff in a main div in the past and centered that ok.

    thanks once again for your input.
    I sing like Dali and paint like Marley - That's a problem!

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012