www.webdeveloper.com
Results 1 to 8 of 8

Thread: I need to nudge one character up a few pixels...

  1. #1
    Join Date
    Mar 2010
    Posts
    281

    I need to nudge one character up a few pixels...

    Hi All,
    I know this should be easy but.....!,
    I have a pipe character that is inline with some other text but i need to nudge that sole character up by a few pixels. I put inside a span tag no problem but the positioning properties are not being read like margin-top:-10px or top:-10px.
    i set it's containing div properties to position:relative thinking that would help but it didn't. How can i nudge one character (in a span) up a a few pixels?

    PHP Code:
    <div><a href="index.php" class="headlink"><h1>Name Here <span class="pipe">&#124;</span>Title Here</h1></a></div>

    .pipe {display:inline;position:relative;top:-10px

  2. #2
    Join Date
    Mar 2012
    Posts
    1,507
    Position: relative is for block items, not in line elements.

    My understanding is that negative margins cancel out existing margins. So margin-top: -10px may not work if there is not a top margin set. I hope that helps.

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there toptomato,

    bearing in mind that it is not permissible to place an "h1 element" within an "a element", try it like this...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title></title>
    
    <style>
    .headlink {
        float:left;
        border-bottom:2px solid #00f;
        font-size:32px;
        font-weight:bold;
        color:#00f
     }
    .headlink span{
        float:left;
    }
    .pipe {
        margin:-5px 5px 0;
     } 
    </style>
    
    </head>
    <body>
    
    <div>
    
    <a href="index.php" class="headlink">
     <span>Name Here</span>
     <span class="pipe">|</span>
     <span>Title Here</span>
    </a>
    
    </div>
    
    </body>
    </html>
    
    coothead

  4. #4
    Join Date
    Mar 2012
    Posts
    1,507
    Quote Originally Posted by coothead View Post
    Hi there toptomato,

    bearing in mind that it is not permissible to place an "h1 element" within an "a element", try it like this...
    Good spot, but why not just move the <h1> tags outside the <a> tags? I.e.

    <div>
    <h1>
    <a href="index.php" class="headlink">Name Here <span class="pipe">&#124;</span>Title Here</a>
    </h1>
    </div>

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,463
    Hi there jedaisoul,
    why not just move the <h1> tags outside the <a> tags?
    Of course you can use the "h1 element" outside, if that is what you desire.

    But then the "div element" would become superfluous to requirements.

    It should be noted that...
    ...is a common complaint of novice coders.

    coothead

  6. #6
    Join Date
    Mar 2010
    Posts
    281
    belated thanks all for the help. i will try them out.

  7. #7
    Join Date
    Mar 2010
    Posts
    281
    fyi - here's what i did:
    it's important to keep the H1 elements together for SE indexing purposes, so i turned the pipe char into a little gif and set as the H1 background.

  8. #8
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    special characters

    F.Y.I. in case you want code for the special characters
    Code:
    ▐ ▐ 2 pipes        &#x2590;
    ► play button    &#x25BA;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles