SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot sifuhall's Avatar
    Join Date
    Jun 2001
    Location
    out of the sidehatch
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move just the border?

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Zealot sifuhall's Avatar
    Join Date
    Jun 2001
    Location
    out of the sidehatch
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Attached Images Attached Images

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #6
    SitePoint Zealot sifuhall's Avatar
    Join Date
    Jun 2001
    Location
    out of the sidehatch
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    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. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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...
    Code:
    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. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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):

    Code:
    <!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. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


    Code:
    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


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
  •