SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with wrapping text?!

    Hi,

    I have been given a UK site to clone into various European sites. Obviously, this requires translating the text and tweaking the template to accomodate!

    I am having trouble wrapping the text on the submenu (left hand side), an example of which can be seen here

    The css for this is below but I can't literally change the width as this affects the background image and cuts it off. I have tried adding an additional style in a <span> but this has no effect.

    Code CSS:
          .subpages ul li a{
            /*background: #eeeeec;*/
            background: url(/media/618/leftnavheadingbg.png) top left no-repeat;
            display: block;
            font-size: 12px; line-height: 16px; font-weight: bold; color: #918b8b; text-decoration: none;
            width: 217px; height: 42px; padding-bottom: 3px; padding-top: 22px; padding-left: 8px;
            border-top: none;
            /*color: #000000;*/
            position: relative;
            left: -1px;
          }

    Ideally, I need to wrap and vertically align the text. Any pointers?

    Thanks,
    Rachel

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You could try this, but if you want the pointer symbol to align with the top line then the background image would need reworking. Width has been removed and negative right margin used to pull the anchor to the desired width. Only tried in Firefox using Firebug, so needs further testing.

    Code CSS:
    .subpages ul li a {
    	background: url("/media/618/leftnavheadingbg.png") no-repeat scroll left top transparent;
    	border-top: medium none;
    	color: #918B8B;
    	display: block;
    	font-size: 12px;
    	font-weight: bold;
    	height: 54px;
    	left: -1px;
    	line-height: 16px;
    	margin-right: -8px;
    	padding: 10px 26px 3px 8px;
    	position: relative;
    	text-decoration: none;
    	}
     
    .subpages ul li ul li a { /* new, to compensate  */
    	margin-right:0;
    	}

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's awesome Thanks for your help!


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
  •