Solved

menu bar layout

Posted on 2010-08-27
15
344 Views
Last Modified: 2013-11-19
hi,
I got this image sprite:

menu bar sprites
and I wanna do menu bar, same as this layout:

 menu bar
so, how do I do that in css and div tags?
0
Comment
Question by:njgroup
  • 8
  • 4
  • 2
  • +1
15 Comments
 
LVL 4

Expert Comment

by:Morrisproject
ID: 33542274
Have you started writing anything yourself?

You will need some HTML lists like this:
<ul>
<li class="orange">Node 1</li><li class="endotob"></li>
<li class="blue">Node 1</li><li class="endbtoo"></li>
<li class="orange">Node 1</li><li class="endoalone"></li>
</ul>

Then some CSS to style like this:
ul {list-style-type:none; list-style:inline;}
li {width:100px;background:**;}
li.orange {background:** repeat-y;}
li.blue {background:** repeat-y;}
li.endotob, li.endbtoo, li.endoalone {width:10px;}
li.endbtoo {background:**;}
li.endotob {background:**;}
li.endoalone {background:**;}

That should sort out the blocks. Then change the background:**; with the source for the image file plus what part of the image you wish to show like:
background: url("image.jpg") -20px 0px;

The numbers at the end you will need to play with to show the correct part of the image.

Probably use Firebug for this, as you can amend the numbers live and then correct the CSS when you have correct figures.
0
 
LVL 7

Expert Comment

by:Animasu
ID: 33542308
This isn't a resolution but it might help you figure out your problem.
go to this website: http://www.cssmenumaker.com/
And generate a CSS menu, From here you can disect the CSS in the template and modify it to your needs, If you get stuck with any of the code look up what it does here: http://www.w3schools.com

Hope this helps

- Animasu
0
 

Author Comment

by:njgroup
ID: 33543943
hi, I get it not working, here is code:


html:
        <ul>
        <li class="orange">Node 1</li><li class="arr_org_blu"></li>
        <li class="blue">Node 2</li><li class="arr_blu_org"></li>
        <li class="orange">Node 3</li><li class="arr_org_end"></li>
        </ul>


css:
ul {list-style-type:none; list-style:inline;}

li.orange {background:url(images/menu_bar_all.png) repeat-x; background-position:0px 0px;}
li.blue {background:url(images/menu_bar_all.png) repeat-x; background-position:0px -32px;}
li.arr_org_blu, li.arr_blu_org, li.arr_org_end {width:18px;}
li.arr_org_blu {background:background:url(images/menu_bar_all.png);background-position:0px -64px;}
li.arr_blu_org {background:background:background:url(images/menu_bar_all.png);background-position:0px -96px;}
li.arr_org_end {background:background:background:url(images/menu_bar_all.png);background-position:0px -160px;}

Open in new window

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 4

Expert Comment

by:Morrisproject
ID: 33545660
got a live link and i will sort it?
0
 

Author Comment

by:njgroup
ID: 33546924
no, I dont have

can you plz just check it in a basic html page?

copy code, sprite image

and css code, and try it
0
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 33551673
This should be roughly what you're after, although it's unclear as to whether the link colors alternate (which is what I've done here), or whether the blue is intended to represent an active/current link.

Anyway:

html:
---------------------------
<!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" lang="en" xml:lang="en">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="styles/global.css" type="text/css" />
 </head>
<body>
 <ul class="menu">
  <li><a href="l1">Node1</a></li>
  <li class="o"><a href="l2">Node2</a></li>
  <li><a href="l3">Node3</a></li>
  <li class="o"><a href="l4">Node4</a></li>
  <li class="last"><a href="l5">Node3</a></li>
 </ul>
</body>
</html>

css:
---------------------------
.menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.menu li{
    float: left;
    height: 30px;
    background: transparent url(../images/menu-bar-all.png) scroll repeat-x left top;
}

.menu li.o{
    background: transparent url(../images/menu-bar-all.png) scroll repeat-x left -32px;
}

.menu li a{
    display: block;
    color: #ffffff;
    text-decoration: none;
    height: 25px;
    padding: 5px 21px 0px 10px;
    background: transparent url(../images/menu-bar-all.png) scroll no-repeat right -64px;
}

.menu li.o a{
    background: transparent url(../images/menu-bar-all.png) scroll no-repeat right -96px;
}

.menu li.last a{
    background: transparent url(../images/menu-bar-all.png) scroll no-repeat right -128px;
}

.menu li.o.last a{
    background: transparent url(../images/menu-bar-all.png) scroll no-repeat right -160px;
}

Open in new window

0
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 33551686
By the way, this accounts for blue or orange being the ending link, so if node 4 was the last menu item, include the "last" class. "o" is for odd. You could call it blue or whatever you like.

<li class="o last"><a href="l4">Node4</a></li>
0
 

Author Comment

by:njgroup
ID: 33569354
thanks very much mr_egyptian, but I got one small problem, I have changed the image to this image, which has small difference in line width and hieght, (the first two sprites), how can I say I wanna the bachground to be in position x and y and beginning from this position, get only one pixel, and the selected image, repeat it?

menu-bar-all.png
0
 

Author Comment

by:njgroup
ID: 33569662
.menu{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.menu li{
    float: left;
    height: 23px;
    background: transparent url(../images/menu_bar_all.png) scroll repeat-x left top;
}

.menu li.o{
    background: transparent url(../images/menu_bar_all.png) scroll repeat-x left -24px;
}

.menu li a{
    display: block;
    color: #ffffff;
    text-decoration: none;
    height: 18px;
    padding: 3px 21px 0px 10px;
    background: transparent url(../images/menu_bar_all.png) scroll no-repeat right -50px;
}

.menu li.o a{
    background: transparent url(../images/menu_bar_all.png) scroll no-repeat right -74px;
}

.menu li.last a{
    background: transparent url(../images/menu_bar_all.png) scroll no-repeat right -98px;
}

.menu li.o.last a{
    background: transparent url(../images/menu_bar_all.png) scroll no-repeat right -122px;
}
   

0
 

Author Comment

by:njgroup
ID: 33570704
I got this result:

result-problem.png
0
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 33572565
Why not just fill the out the full width? If you it's possible to do what you're trying, then I'm not aware of how to do so.
0
 

Author Comment

by:njgroup
ID: 33575725
how to fill of width?

you did not get the problem, now the orange background is actually in only one pixel width of image menu-bar-all.png where position is top left and the height is 24px

lets say it in different way, in the first image posted in main question (menu-bar-all.png), the orange background has width of 18px (which is full width of image) now here, what I did, to reduce the size of image, I change the width of orange to only one pixel, so I need a property in background css just to tell I need to slice the image of "menu-bar-all.png" as the following:
the url is: menu-bar-all.png
the position is: top left (0px, 0px)
now from point 0px, 0px, start slicing up to one pixel only (see img #1)
if its sliced, then repeat the sliced image in -x

what is happening now, the position is getting correctly, but I get this image (which has one pixel for orange and 17 for white): (see img #2), thats why I get the result above in my previous post, so, the problem now, how would I specify to cut only one pixel beginning from this position??

menu-bar-all-orange-alone.png
menu-bar-all-orange-with-white.jpg
0
 

Author Comment

by:njgroup
ID: 33575740
(( NOTE that you will not see any difference between the two sliced image posted above if you dont download them and open them in windows image viewer, because the the background of the website here is white ))
0
 
LVL 15

Accepted Solution

by:
mr_egyptian earned 500 total points
ID: 33582968
I think you need to recreate the sprite. Do it as you did the original, with the solid colors full width. I tried to modify the current sprite, but the heights and colors are too far off.
0
 

Author Comment

by:njgroup
ID: 33709521
thanks mr_egyptian,
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

791 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question