Solved

menu bar layout

Posted on 2010-08-27
15
341 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now