Solved

Format

Posted on 2011-09-14
9
263 Views
Last Modified: 2012-05-12
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>
0
Comment
Question by:pmathis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 36539280
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
 

Author Comment

by:pmathis
ID: 36539382
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
 
LVL 16

Expert Comment

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

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:pmathis
ID: 36539620
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
 

Author Comment

by:pmathis
ID: 36539630
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
 

Author Comment

by:pmathis
ID: 36539756
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
 
LVL 16

Expert Comment

by:SSupreme
ID: 36539779
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
 

Author Comment

by:pmathis
ID: 36539956
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
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 36540072
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

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

732 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