SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Quick CSS layout question

    Hi guys,

    I think this is a simple one, but not sure how do achieve what I'd like:

    I would like to create the attached image horizontal line with an icon at the end (which I will use an icon font for). It needs to be responsive so the line can scale when the width of the container reduces, and the icon stays on the right of the container.

    I've tried using a div with a border-bottom but I don't know how to make the line stop a few pixels short of the icon. I've also tried a HR but couldn't get that to work.

    Any ideas?

    Thanks in advance.

    Jed

    Attachment 60779

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi Thordendal. Welcome to the forums.

    My knees always knock when someone says "this is a simple one". Often, it isn't. There are various ways you could do this, some more sophisticated than others. Personally, I tend to go for the easier, less sophisticated options. I would probably create a div for the white background to start with. I would add left and right padding of about 35px.

    Inside that I'd put two divs. The first one would have a width of 30px, be floated right, and have a line-height of 52px. This div would contain the icon. The other would have a right margin of 30px, and would have a height of 52px and a transparent, repeating background image that has a part of that horizontal line in it. (So I'd use an image for the line.)

    That's what I'd try. It may take some tweaks. There are cleverer things to do, but that should be pretty reliable.

    Here's an example using just an image for the icon rather than text:

    http://pageaffairs.com/sp/thor/

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph,

    Wow, thanks for the detailed response and example!

    Looks great, and I'll go with that method.

    Nice work!

    Jed

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Cool! The only tricky bit might be when you use the actual font instead of an image. Centering the text vertically can be tricky, but I think the key might be to give it line-height: 52px;

    Let us know if it doesn't work, and we can look at how to do it.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks – good point about centering the font vertically.

    I'm actually thinking I may use the graphic anyway as that is the only instance of an icon. So loading the font with all the CSS is probably overkill for one usage. I think I'll go with the graphic.

    Cheers!

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    My knees always knock when someone says "this is a simple one". Often, it isn't.
    you and me both.

    See if this fits your needs:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    		.rule{padding:2em; position: relative;}
    		.rule:after {content:""; display:block; border-bottom:1px solid #000; margin-top: 1em;  margin-right:3em ; text-align:right; height:.6ex; line-height: 1;}
    		.rule:before {content:"*"; position: absolute; right:1.5em; bottom:.25em; font-size: 200%}
    		</style>
    	</head>
    	<body>
    <div class="rule">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    	</body>
    </html>
    replace the "*" in content with whatever character from the icon font you are using, tweak font-size in .rule:before to suit your needs ( you may need to PROPORTIONALLY adjust the other em/ex based spacing in the other rules as well)

    hope that helps

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dresden,

    Looks like another good solution.

    I'll have a look at this later and let you know how I go.

    Cheers!
    Jed

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Adelaide, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys,

    I tried Ralph's method and it worked perfectly.

    Cheers
    Jed


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •