Solved

Format

Posted on 2011-09-14
9
259 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
  • 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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…

830 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