How to move just the border?

HTML & CSS
1

I have an h3 tag that I’ve added an image to using CSS.

The h3 tag also has a bottom border.

The image is on the left of the h3 tag and the text is on the right.

However, the border is also under the image and because the image is larger than the text, the border is far below the text.

I would like to move the bottom border on the h3 tag to not be under the image and up closer to the text.

Can this be done with CSS?

2

It would help to see an example of this, but the first thing that comes to mind is to reduce the line-height on the h3.

3

Also, you could try giving the h3 a height (I say also because as ralph.m mentioned the line height will affect the elements height)

4

Thanks for the replies, but adjusting line-height doesn’t appear to change the border position.

Also, changing the height would also affect the image, wouldn’t it?

Here are the screenshots.

The before image is how it currently appears.

You can see the bottom border at the bottom of the image.

The after image is what I want to achieve.

You will see the border not under the image and right below the text.

5

what is your CSS for the h3 tag? CSS borders are drawn OVER any BG image… unless what you are saying is that the BG has the border as part of it…

6

I don’t think its possible to move just the bottom border, but I wanted to see if anyone knew any tricks to do so.

The border is not part of the image.

Here is the current css.


h3.title_white {
padding: 2px 0 0 55px;
margin: 0 20px 10px 0;
border-bottom: 1px solid #E1E1E1;
color: #036;
background-image: url(/images/h_title_white_dragon.gif);
background-repeat: no-repeat;
height: 45px;
7

you cant really move the border on an element it is RENDERED around the it and pretty much on top of everything else, that why I asked to see the CSS to make sure I understood what you were referring to as “border”

I don’t think its possible to move just the bottom border, but I wanted to see if anyone knew any tricks to do so.

As I said you CANT move the borders… BUT, you CAN move the BG and/or add padding-bottom. Which would work similarly… unless what you want is a clear area between the border and the BG image… for that effect you will need another element:

for example if you had heading links…


h3.title_white a{
display:block;
padding: 2px 0 0 55px;
color: #036;
background: url(/images/h_title_white_dragon.gif) no-repeat;
height: 45px;
margin-bottom:2px; /* the distance you want from the image to the border*/
}
h3.title_white {margin: 0 20px 10px 0;
border-bottom: 1px solid #E1E1E1;}
8

You could put the image in the html and position it absolutely. Only downside (with what I’ve got so far) is that the underline will go right up to the edge of the image (so I’ve added right padding and a bg color to the image to hide it, though there are probably better ways to fix that):

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style media="all">
h3 {
padding: 2px 0 0 50px;
margin: 0 20px 10px 0;
border-bottom: 1px solid #E1E1E1;
color: #036;
line-height: 1em;
position: relative;
}

h3 img {position: absolute; top: 0; left: 0; padding-right: 5px; background: white;}
</style>
	
</head>

<body>
<h3><img src="/images/h_title_white_dragon.gif" alt="">Featured Articles</h3>
</body>

</html>

I’m assuming the image is 45px in width with this code.

EDIT: if you really don’t want the image in the HTML, you could use an empty span in place of the image and set the image as a background image on the span.

9

Your image attachment JUST came through and I now see what you are attempting. You are going to need TWO elements.

What you are attempting is to give the H3 a bg and a n underline to its content… unfortunately thats two styles so you’ll need two tags.


h3.title_white  {
padding: 0 0 0 65px;
margin: 0 20px 10px 0;
background: url(images/h_title_white_dragon.gif) no-repeat left center;
min-height:55px;
}
* html h3.title_white  {height:55px; zoom:1} /*ie hack*/

h3.title_white span{ border-bottom: 1px solid #E1E1E1; display:block; padding-bottom:5px }

hope that helps