Solved

Format

Posted on 2011-09-14
9
265 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

Technology Partners: 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!

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

687 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