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

**toptomato** · 06-30-2012 06:04 PM

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}

**jedaisoul** · 07-01-2012 12:03 PM

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.

**coothead** · 07-01-2012 03:52 PM

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

**jedaisoul** · 07-01-2012 04:32 PM

Originally Posted by coothead

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">|</span>Title Here</a>
</h1>
</div>

**coothead** · 07-01-2012 05:13 PM

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...

Divitus

...is a common complaint of novice coders.

coothead

**toptomato** · 07-03-2012 03:39 PM

belated thanks all for the help. i will try them out.

**toptomato** · 07-03-2012 04:21 PM

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.

**auntnini** · 07-03-2012 06:53 PM

F.Y.I. in case you want code for the special characters

Code:

▐ ▐ 2 pipes        &#x2590;
► play button    &#x25BA;

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

Thread Tools

Display

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

special characters

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions