Solved

menu bar layout

Posted on 2010-08-27
15
342 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Help cleaning out CSS 2 52
modify h2 4 89
How can I do a Select All on this page? 8 36
Change CSS to show Notification Bar 9 19
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

863 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

22 Experts available now in Live!

Get 1:1 Help Now