Jump to content

Brain storming here... what's the best way to dod this?


PicnicTutorials

Recommended Posts

Hello,

 

Cleaning up my site. Currently pages like these are broke in mobiles because the non-breaking spaces blow out the layout. So I'm getting rid of them all. I've done a few other pages with float instead but I dont think thats the right take with this. Here is what I'm faced with...

 

<li>Do you have any openings?     _____________________________________________________<br>

<br>

</li>

 

Obviuosly remove the brs. The text has to be left aligned and the long line has to be right aligned. This is all contained in a fixed width layout. If the text is enlarged I would prefer that it doesnt break to the next line. What do you think is the best approach? I could float them but that would break to the next line. I could inline-block it. What I'd like to do is tile an image of the line. That way it just stretches to fit. But the line and the text need to be on the same line. So the tiled image holder would need to be block (or inline-block). Like I said just brain storming. I havent had a chance to test anything yet but I'll have to with this. Thanks!

Link to comment
Share on other sites

Hmm..assuming you want to keep the <li> at a certain width or 100% width, you could try applying a span tag right after the text and set it to be width 100% with border-bottom.

 

<li>Do you have any openings? <span></span></li>

 

Border! Why didn't I think of that? That's a good and simple idea I will try that asap. Thanks Eddie!

 

And yes the li is width 100% of it's containing block.

Link to comment
Share on other sites

Ok the border idea is good but I need it to be on the same line as the text and not to drop below it even if text size is increased. The line is close to the text and the two take up all of the li width so there is not much wiggle room for alt text size. So I need a way to tile that border (or image) without it breaking to the next line.

 

Here is the page I'm working on to get an idea http://goo.gl/EquNm

Edited by Eric
Link to comment
Share on other sites

I could display block the text and give it background white height 100% and a higher z. Then AP the border width 100%. The border would slide under the text but you wouldn't see it. That is one solution but a bit to involved for my liking but a solid backup..

Edited by Eric
Link to comment
Share on other sites

Give this a whirl...

 

li {

background: #fff;

border-bottom: 1px solid #000;

}

span {

position: relative;

bottom: -1px;

background:#fff;

padding-right: 5px;

}

 

 

======================

 

<ul>

<li><span>Do you have any openings?</span></li>

</ul>

 

Thats perfect Eddie! Good idea. Aside from one small detail. For some reason I had to go all the way down to bottom -3px to hide the border. And then the bullets dont line up anymore. And the span looses its grip on the border after one text size increase. Thats probably line height causing that though. So I'll keep working on it...

 

EDIT: yep line-height 1 seems to fix both issues. Perfect it looks like you found the perfect solution. Thank you very much Eddie! :)

 

EDIT 2: wow. in FX at least with line-height 1 all I need is background #fff on the span. PR and top 1px was not needed. padding right I will need though

Edited by Eric
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...