Solved

css / html

Posted on 2014-11-06
8
98 Views
Last Modified: 2014-12-22
Hello,

Please see attached jpg called sort_schedft.jpg. This is the result of the attached html sort_schedft.htm.

My objective is to cause a 2nd line within the <li> so that in effect, there is a <br> after the text & before the numbered link.

I tried this with sort_schedule_br.htm (attached) which should be identical to the other html file (sort_schedft.htm) except that it has a <br> where I thought it should go. This produces the very odd attachment sort_schedule_br.jpg.

How can I use css / html to achieve the desired result?

I can provide a live link if necessary but it's a little messy.

Thanks
sort-schedft.htm
sort-schedule-br.htm
sort-schedft.JPG
sort-schedule-br.JPG
0
Comment
Question by:Richard Korts
[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
  • 4
  • 3
8 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40427129
use list-style none on the ul, then put the icon as the background image. Put enough padding on the li to move it over away from the icon and get rid of the breaks so the text can wrap naturally.

Cd&
0
 

Author Comment

by:Richard Korts
ID: 40427308
Thanks.

Not sure I know what you mean by this:  "and get rid of the breaks so the text can wrap naturally."
0
 

Author Comment

by:Richard Korts
ID: 40427316
Also, I don't know how to put the icon as the background image.

Thanks
0
Independent Software Vendors: 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!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40427318
Ignore what I said about the breaks I was seeing something in the question that is not there. I thought you were trying to do a natural wrap, but you want it specifically for the link.  Sorry about that.

Cd&
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 40427335
For the background

ul {background-image:(urlofthe image);background-repeat:repeat-y;}

Though from a usability standpoint I would recommend you just make the whole li dragable which would eliminate the need for the icon.

Cd&
0
 

Author Comment

by:Richard Korts
ID: 40427356
I can't see how to access that image (icon); it's hidden somewhere in the bowels of Jquery, I can't figure it out.

I still don't see how I get the line break to show the link & other info (what they call MapsCo).

Thanks.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 250 total points
ID: 40428099
I think much of the strangeness is caused by having an unnecessary extra <span> in each <li> which is targeted by your css "#sortable li span":
<span style='color:blue !important; text-decoration: underline;'>

Open in new window

You should be able to set these styles on the <a> directly:
#sortable li a { color: blue !important; text-decoration: underline; }

Open in new window

and the html gets simpler:
<li class="ui-state-default" id="198515"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>5516 RANDELL ST., FORT WORTH - PAM BURLESON - Check her rain & freeze sensor, has been using bypass mode to run system, check and adjust system<br><img src='images/spacer.gif' width='30' height='5'><a href='#' onClick="open_wo_win('198515', '20720')";>198515</a><img src='images/spacer.gif' width='70' height='5'>MapsCo: 90T</li>

Open in new window

Note that if the screen is not so wide you may want to remove the fixed height from the "#sortable li" css.
Note 2 that you can drag using the whole <li> so not just the icon.
0
 

Author Comment

by:Richard Korts
ID: 40447832
Dear Experts,

I have not abandoned this question, I am hung up with other urgent tasks, will get back to it ASAP.

Thanks
0

Featured Post

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses four methods for overlaying images in a container on a web page
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

696 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