[RESOLVED] Right align image

@jdgFeb 05.2008

Hi all,

I have a menu that I am trying to apply an image to. Actually, I am trying to apply 3 images to it (left, right, and tiled).

Now my menu setup in an unordered list (courtesy of ~~[URL=”http://csscreator.com/menu/multimenu.php#”]~~http://csscreator.com/menu/multimenu.php#[/URL])
and I want to apply the three images I have as the background image for each cell. Now I have gotten the left and tile to work properly, but I can’t get the right to work. It always shows up on the left hand side, and if I try to float it or absolute position it, everything else disappears.

If anyone could help, I would greatly appreciate it.

Here is the CSS code for the images:

[CODE].container { position: relative; height: 25px; }

.left{ position: relative; left: 0px; width: 50px; background: url(test_menu/button-left2.jpg); Background-Repeat: no-repeat; z-index: 3; }

.tile{ Position: relative; padding: 0; margin:0; width: 100%; background: url(test_menu/button-tile.jpg); Background-Repeat: repeat-x; z-index: 1; }

.right{ width: 30px; background: url(test_menu/button-right.jpg); Background-Repeat: no-repeat; z-index: 3; }[/CODE]

and here is my menu that I have. I have so far only tried to apply the image to the first item, which doesn’t quite work.

[CODE]<body> <ul id=”vertnav”> <li> <!–<div class=”tile”><div class=”left”><div class=”right”><a href=”#” >first Level menu</a></div></div></div>–> <div class=”container”><div class=”tile”><div class=”left”><div class=”right”><a href=”#” >first Level menu</a></div></div></div></div> <ul> <li><a href=”#” >second Level menu</a></li>

<li><a href=”#” >second Level menu</a> <ul> <li><a href=”#” >third Level menu</a></li> </ul>

</li> </ul> </li>

<li> <a href=”#” >fourth Level menu</a> <ul> <li><a href=”#” >fifth Level menu</a></li>

<li><a href=”#” >fifth Level menu</a> <ul> <li><a href=”#” >sixth Level menu</a></li> </ul>

</li> </ul> </li> </ul> </body>[/CODE]

There is more to the CSS page, but it is more for the styling of the unordered lists so I didn’t bother to include it.

Thanks
Jeremy

to post a comment

CSS

5 Comments(s) _↴

@CFHuttonFeb 05.2008 — #nm

@CentauriFeb 05.2008 — #It is always better to use available elements where possible when applying styling image backgrounds, rather than a heap of unnecessary divs. Can you show us the three images, and the actual list menu css? - this would probably be handled better using two images instead of three, using a sliding doors technique, with the images applied to the <li> and <a> elements without the need for any extra elements.

@jdgauthorFeb 06.2008 — #Thanks for the reply. I originally tried just adding it to my cell and/or my link instead but I was even farther from getting it working, so I gave all the divs a shot and I got closer, just couldn't get the right image working properly. I am certainly more then willing to get rid of all the divs since I don't like having them there, I just couldn't do it without them.

I added the pictures that I am trying to use for the background. The left picture may not show it clearly, but there is a border on the left hand side, that's what makes it different from the tile picture.

The menu is based on the suckerfish dropdown that I got from csscreator.com. It doesn't seem to want to work quite properly across browsers as it's suppose to (tested on Firefox and IE 6), but that's a separate issue (if you can see the reason though, I would appreciate it). However, this is exactly what I am using and trying to get to work.

Here is my entire CSS page:

[CODE]#vertnav{list-style: none;}
 
 .container {
 position: relative;
 height: 25px;
 }
 
 .left{
 position: relative;
 left: 0px;
 width: 50px;
 background: url(test_menu/button-left2.jpg);
 Background-Repeat: no-repeat;
 z-index: 3;
 }
 
 .tile{
 Position: relative;
 padding: 0;
 margin:0;
 width: 100%;
 background: url(test_menu/button-tile.jpg);
 Background-Repeat: repeat-x;
 z-index: 1;
 }
 
 .right{ 
 width: 30px;
 background: url(test_menu/button-right.jpg);
 Background-Repeat: no-repeat;
 z-index: 3;
 }
 
 #vertnav{
 padding:0;
 margin:0;
 }
 
 #vertnav ul {
 padding: 0;
 margin:0;
 list-style: none;
 width:12em;
 z-index:99;
 position:absolute;
 overflow:visible;
 }
 
 #vertnav li {
 margin:0;
 position: relative;
 width: 12em;
 background-color:#CCC;
 border:solid 1px #CCC;
 border-bottom:none;
 display:block;
 height:1.5em;
 }
 
 #vertnav li:last-child{border-bottom:1px solid #CCC;}
 
 #vertnav a {
 text-decoration:none;
 display:block;
 padding: 0.1em;
 margin:0.2em 0 0.2em 0.1em;
 width:11.5em;
 height:1em;
 }
 
 #vertnav a:hover, #vertnav li:hover{
 background-color:rgb(255, 255, 204);
 }
 #vertnav ul li:hover, #vertnav ul li a:hover{
 background-color:rgb(255, 255, 204);
 }
 
 #vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
 display:none;
 position:absolute;
 top:0;
 left:12em;
 }
 
 /* non-IE browsers see this */
 #vertnav ul li>ul, #vertnav ul ul li>ul{
 margin-top:-1.4em;
 }
 
 #vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{
 display:none;
 }
 
 #vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{
 display:block;
 }
 
 li>ul {
 top: auto;
 left: auto;
 }
 /* Win IE only */
 * html #vertnav li{position: relative;}
 /* end holly hack */ [/CODE]

And here is my entire webpage (been trying to get the menu working first, so there really isn't anything going on yet):

[CODE]<html>
 <head>
 
 <script type="text/javascript" src="multimenu.js"></script>
 <link rel="stylesheet" type="text/css" href="multimenuvert.css" />
 
 
 </head>
 <body>
 <ul id="vertnav">
 <li> <!--<div class="tile"><div class="left"><div class="right"><a href="#" >first Level menu</a></div></div></div>-->
 <div class="container"><div class="tile"><div class="left"><div class="right"><a href="#" >first Level menu</a></div></div></div></div>
 <ul>
 <li><a href="#" >second Level menu</a></li>
 
   <li><a href="#" >second Level menu</a>
   <ul>
   <li><a href="#" >third Level menu</a></li>
   </ul>
 
   </li>
   </ul>
   </li>
 
  <li> <a href="#" >fourth Level menu</a>
   <ul>
   <li><a href="#" >fifth Level menu</a></li>
 
   <li><a href="#" >fifth Level menu</a>
   <ul>
   <li><a href="#" >sixth Level menu</a></li>
   </ul>
 
   </li>
   </ul>
   </li>
 </ul>
 </body>
 </html>[/CODE]

Again, if you guys can give me any help with this, I would greatly appreciate it. I've tried pretty much everything I can think of and find online, but it just doesn't seem to work.

[upl-file uuid=4aec4989-63ad-43de-a667-8b81377ccb2b size=690B]button-left.jpg[/upl-file]

[upl-file uuid=5b1efcf8-94ce-41be-a9a3-0220c768bc8d size=612B]button-tile.jpg[/upl-file]

[upl-file uuid=909a7850-4604-4b9f-8762-88ae3cae4cb9 size=785B]button-right.jpg[/upl-file]

@CentauriFeb 07.2008 — #As the buttons have a margin, the <li> can't be used for one of the images, but using just two images (a wide one for left, and narrow one for right) applied as backgrounds to the <a> element and one wrapper div around the <a> in a sliding doors technique works well. The modified left image is attached. To get this to work, padding is used on the <li> instead of margins on the <a> (and sizes adjusted accordingly. The long image is used as a background to the div and the small image a background to the <a>, positioned to the right.

The javascript in the article you linked to doesn't make this any easier ether. The suckerfish script as detailed here is much better, and allows the background colour change on the <li>s as well. As noted in that article, controlling posuition instead of display works better cross-browser.

After a little play, I came up with html:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="sfhover.js"></script>
 <link rel="stylesheet" type="text/css" href="multimenuvert.css">
 </head>
 
 <body>
 <ul id="vertnav">
 <li><div class="toplev"><a href="#" >first Level menu</a></div>
 <ul>
 <li><a href="#" >second Level menu</a></li>
 <li><a href="#" >second Level menu</a>
 <ul>
 <li><a href="#" >third Level menu</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><div class="toplev"><a href="#" >fourth Level menu</a></div>
 <ul>
 <li><a href="#" >fifth Level menu</a></li>
 <li><a href="#" >fifth Level menu</a>
 <ul>
 <li><a href="#" >sixth Level menu</a></li>
 </ul>
 </li>
 </ul>
 </li>
 </ul>
 </body>
 </html>
 [/CODE]

and css :

[CODE]#vertnav{
 padding:0;
 margin:0;
 list-style: none;
 width: 12em;
 }
 #vertnav li {
 margin:0;
 position: relative;
 width: 11.5em;
 background-color:#CCC;
 border:solid 1px #CCC;
 border-bottom:none;
 padding: 0.25em;
 }
 
 #vertnav li:last-child{border-bottom:1px solid #CCC;}
 
 #vertnav a {
 text-decoration:none;
 display:block;
 height:1em;
 line-height: 1em;
 padding: 0.1em;
 }
 #vertnav .toplev {
 background-image: url(images/button-left.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 }
 #vertnav .toplev a {
 background-image: url(images/button-right.jpg);
 background-repeat: no-repeat;
 background-position: right center;
 text-align: center;
 }
 #vertnav li:hover, #vertnav li.over {
 background-color:rgb(255, 255, 204);
 }
 #vertnav ul {
 list-style: none;
 width:12em;
 position:absolute;
 left: -999em;
 top: 0px;
 margin: 0;
 padding: 0;
 }
 #vertnav li:hover ul ul, #vertnav li:hover ul ul ul, 
 #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul, 
 #vertnav li.over ul ul, #vertnav li.over ul ul ul, 
 #vertnav li.over ul ul ul ul, #vertnav li.ver ul ul ul ul ul {
 left: -999em;
 }
 #vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul,
 #vertnav li.over ul, #vertnav ul li.over ul, #vertnav ul ul li.over ul {
 left: 12em;
 }
 * html #vertnav li {
 float: left;
 }
 [/CODE]

The shover.js file :

[CODE]sfHover = function() {
 var sfEls = document.getElementById("vertnav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
 sfEls[i].onmouseover=function() {
 this.className+=" over";
 }
 sfEls[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" over\b"), "");
 }
 }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);[/CODE]

[upl-file uuid=98b581b0-9efc-43f3-9079-046f69919f5e size=1kB]button-left.jpg[/upl-file]

@jdgauthorFeb 07.2008 — #Thanks for all the help Centauri, it works perfectly (as I am sure you are not surprised to hear ? ).

I especially liked that there is hardly any code needed to get the images added to it and that I don't have to deal with all those god awful divs I had before. Also that you improved the css page amazingly and it took care of a cross browser issue I was having that I couldn't figure out.

Also thanks for the improved javascript file. The one I had before appeared to work fine so I didn't change it, but this one takes care of my cross browser related issues without any fuss.

Now on to more fun.

Thanks again,

Jeremy

Also in #CSS _↴

external CSS document problem Forms in CSS Split Page Into 3

Success!

Help @jdg spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Right align image

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Right align image

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴