Solved

css / html

Posted on 2014-11-06
8
91 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

706 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

15 Experts available now in Live!

Get 1:1 Help Now