Log in

View Full Version : image position



faeze
06-18-2012, 08:07 AM
in this link
http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
i want position arow pic (right.gif) inthe left the li no in right.
i dont know wher change to solved problem:(
plz help me

bernie1227
06-18-2012, 08:25 AM
in this link
http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
i want position arow pic (right.gif) inthe left the li no in right.
i dont know wher change to solved problem:(
plz help me

If you say plz because it's shorter than please, i'll say no because it's shorter than yes.
I'm just kidding you faeze, here's the solution.
the part that's controlling where the arrow is displayed is:


.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}

so what you have to do, is just replace that part with:


.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 5% 50%;
}


of course, then you have the problem of the arrow being behind the text. So, you can either no-space break the text across, or you can go and put:


text-align: right;


into .sidebarmenu li, in the css.
bernie

faeze
06-18-2012, 09:01 AM
really tnx:)

instead of using this code , backgroundcolor for li

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
,i want to use the image for li

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: white url(../images/v.jpg) repeat-x bottom left; /* of tabs (default state)*/
}

after using this code ,it didnt show me the arow key(right.gif) for submenu:(
what can i do to show me right.gif?
help me

faeze
06-18-2012, 09:52 AM
pleaze help me.this is force for me

bernie1227
06-18-2012, 10:06 AM
really tnx:)

instead of using this code , backgroundcolor for li

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}
,i want to use the image for li

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: white url(../images/v.jpg) repeat-x bottom left; /* of tabs (default state)*/
}

after using this code ,it didnt show me the arow key(right.gif) for submenu:(
what can i do to show me right.gif?
help me

Couldn't you just do;


Background-image: ../images/v.jpg;
Repeat: repeat-x;

Also check that you have the right directory for the image

faeze
06-18-2012, 10:17 AM
it means i cant do anything to show me right.gif for submenu?
i want vertical menu whit image arrowkey for submenu whitout color for li,what shold i do?

bernie1227
06-18-2012, 10:27 AM
it means i cant do anything to show me right.gif for submenu?
i want vertical menu whit image arrowkey for submenu whitout color for li,what shold i do?

Could you please post your code? Also, it would be great if you could more clearly tell me what the problem is.


Note: please post in plain English, everyone likes it better :)

ApacheTech
06-18-2012, 10:35 AM
Also, faeze, could you please wrap your code in the appropriate BBCode tags, shown at the top of your editor window.
or
tags will be fine. It will be a lot easier to help you with your query if you use the aids offered by the forum correctly.

When you made the original post, you should have been able to see the big reminder box just under the editor window:


Reminder: Be sure to use a descriptive title for your question that summarizes(sic) it. If your post includes code, wrap it around using the [CODE] tag for multi-line code, and the [ICODE] tag for inline code that's part of a sentence.

faeze
06-18-2012, 10:41 AM
this is code
css
/*-----------------------------------------------Menu-----------------------------------------*/
.sidebarmenu ul{
margin-left:10px;;
padding: 0;
list-style-type: none;
font: 13px tahoma;
width: 210px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
direction:rtl;

}

.sidebarmenu ul li{
position: relative;
margin-top:1px;

}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: url(../images/v.jpg) repeat-x ; /* of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: black;
}

.sidebarmenu ul li a:hover{
background: url(../images/4.png) repeat-x 97% 50%;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;

}

.sidebarmenu a.subfolderstyle{
background: url(../images/right.gif) no-repeat 97% 50%;
}
.s{
background: url(../images/right.gif) no-repeat 97% 50%;
width:10px;
height:10px;
}

/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */


but i put the image instead of .sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: white url(../images/v.jpg) repeat-x
}
v.jpg =gradinat image for li
when i use this cod ,no display righ.gif for submenu
what can i do show me the right.gif over v.jpg?

bernie1227
06-18-2012, 10:45 AM
please encaption your code within [CODE] tags

keyboard
06-18-2012, 10:45 AM
Please use the forum's bbcode tags to make it more readable:

for php code............
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

ApacheTech
06-18-2012, 10:51 AM
*headdesk*

But, I couldn't help but laugh.

bernie1227
06-18-2012, 10:54 AM
*headdesk*

But, I couldn't help but laugh.

we are not amused

faeze
06-18-2012, 11:00 AM
ok.sorry


/*-----------------------------------------------Menu-----------------------------------------*/
.sidebarmenu ul{
margin-left:10px;;
padding: 0;
list-style-type: none;
font: 13px tahoma;
width: 210px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
direction:rtl;

}

.sidebarmenu ul li{
position: relative;
margin-top:1px;

}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: url(../images/v.jpg) repeat-x ; /* of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: black;
}

.sidebarmenu ul li a:hover{
background: url(../images/4.png) repeat-x 97% 50%;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;

}

.sidebarmenu a.subfolderstyle{
background: url(../images/right.gif) no-repeat 97% 50%;
}


/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */


but i put the image instead of .


sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background: white url(../images/v.jpg) repeat-x
}

v.jpg =gradinat image for li
when i use this cod ,no display righ.gif for submenu
what can i do show me the right.gif over v.jpg?

bernie1227
06-18-2012, 11:14 AM
wait, so you want the background image with the arrown on top of it?

faeze
06-18-2012, 11:23 AM
yes
arrow (right.gif) top of background image(v.jpg)

bernie1227
06-18-2012, 11:45 AM
My suggestion is setting the background and then putting the image for the arrow in the HTML next to the text for the li tag.
Bernie

faeze
06-18-2012, 11:52 AM
i use s new div for righ.gif but yet no diplay for me
in this link have javascript ,i think ,setting in java becuse by css dont change position

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.right=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.right=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

ApacheTech
06-18-2012, 12:21 PM
I've got to head out now, but from what I've gathered from this thread, you want to change the "bullet" of a link within a list (<li></li>).

Wouldn't this be easier by using the list-style-image property, within an li:hover selector?

http://www.w3schools.com/cssref/pr_list-style-image.asp

I'm afraid I don't have time to write a demo or investigate further for now, but I hope that is some help.

bernie1227
06-18-2012, 08:40 PM
I've got to head out now, but from what I've gathered from this thread, you want to change the "bullet" of a link within a list (<li></li>).

Wouldn't this be easier by using the list-style-image property, within an li:hover selector?

http://www.w3schools.com/cssref/pr_list-style-image.asp

I'm afraid I don't have time to write a demo or investigate further for now, but I hope that is some help.

Didn't think of that, thanks apache.
So basically the idea then faeze is to change the bullet point n the li, to the image.