Format

Using this code or some variation how do I get my arrow to appear  on the left side of the <li>
 The image gets blocked on the right side of  <li> if  the text is too long
<style>
.side a:hover {
display: block;
width: 300px;
height: 25px;
background-position: 50px 20;

background: transparent url(arrow.gif) no-repeat;

}

</style>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

</body>

</html>

<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li  id =1><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
pmathisAsked:
Who is Participating?
 
SSupremeConnect With a Mentor Commented:
like this?
<!DOCTYPE HTML>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style> 
ul {list-style-type: circle;}
li {padding-left: 35px;
    padding-top: 3px;height: 27px;width: 300px;}
li:hover {
background-image: url(arrow1.gif);
background-repeat: no-repeat;
background-position: 0px 0px;}

</style>

</head>
<body>


<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li id="1" ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
	<li id="1" ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
	</ul>
</body>
</html>

Open in new window

0
 
SSupremeCommented:
Try this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style> 
ul {list-style:square url("arrow.gif");}
.side a {
display: block;
width: 300px;
height: 25px;}

</style>

</head>
<body>


<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li id="1" ><a target="_parent" href="123.htm">Centennial </a></li>
	</ul>
</body>
</html>

Open in new window


or this
<!DOCTYPE HTML>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style> 
ul {list-style-type: none;
padding: 0px;
margin: 0px;}

li:hover {
display: block;
width: 300px;
height: 25px;
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 50px 20px;
padding-left: 14px;}

</style>

</head>
<body>


<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li id="1" ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
	</ul>
</body>
</html>

Open in new window

0
 
pmathisAuthor Commented:
The first one is static but the image is in the right location, the second one the image appears on hover but I can't seem to get it in the right position to the left
arrow1.gif
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
SSupremeCommented:
So, do you want to swipe sides, because left position is default and you want it to be right? Am I correct?

0
 
pmathisAuthor Commented:
I had it on the right to and it works fine with the original  code, but if the text is too long it overlaps, that is why i wanted to try left  with arrow1 so if the text is very long it doesn't over run the image
arrow.GIF
0
 
pmathisAuthor Commented:
if you can get the original  to work so that  the arrow will appear to the right no matter how long the txt that would be OK, otherwise I would want arrow1 on the left side on hover.
0
 
pmathisAuthor Commented:
If you can't do it from the left,
Maybe this is the only way to adjust for long text.
If I added a <br> before the text became too long it would work from the right

<style>
.side a:hover {
display: block;
width: 300px;
height: 25px;
background-position: 50px 20;

background: transparent url(arrow.gif) no-repeat;

}

</style>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

</body>

</html>

<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li  id =1><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial1111111111111111<br>111</a>
      </font></li>
    <ul class="sideMenuUL">
    <li ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial1111111111111111<br>1111111111111111111111111 </a>
      </font></li>
</div>
arrow.GIF
0
 
SSupremeCommented:
ok check this:
<!DOCTYPE HTML>
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>

<style> 
ul {list-style-type: none;
padding: 0px;
margin: 0px;
overflow:hidden;}
li {padding-left: 35px;
    padding-top: 3px;height: 27px;width: 300px;}
li:hover {
display: block;
background-image: url(arrow1.gif);
background-repeat: no-repeat;
background-position: 0px 0px;}

</style>
</head>
<body>
<div class="side" id="hidealpha1">
    <ul class="sideMenuUL">
    <li id="1" ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
	<li id="1" ><font face='Arial' size="2"></a><a target="_parent" href="123.htm">Centennial </a></font></li>
	</ul>
</body>
</html>

Open in new window

0
 
pmathisAuthor Commented:
That is great, but one thing how do I get the dot to appear on the left when the arrow isn't there?? with the <li>
0
All Courses

From novice to tech pro — start learning today.