Solved

Format

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

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now