SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS display question

    I'm presuming no on this issue but figured I would ask anyway. This page:
    http://midwestwebdesign.net/co2/

    On the right hand side you will see a dotted line down the right hand side. This line stop at the windows view port height. Is there way to change this to where it stops before this? I'm assuming the height of this line is being determined by the content on the left and right hand side.

    Appreciate any thoughts. Don't think it will be a big deal one way or the other design wise, just a picky issue with me.
    Ryan Butler

    Midwest Web Design

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,542
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The dotted line is the left border of your absolutely place rightside element and will continue down as far as your rightside content does.

    If you just want some space under the rightside then add another element to create the space or add an inner element for the rightsidecontent and give some padding to the parent.

    If you just want to rub a bit of the line out for effect then you could simply place a span on top with the background colour to rub it out.

    e.g.
    Code:
    #rightside{
     position:absolute;
     top:250px;
     left:570px;
     width:150px;
     padding:5px 0 0 40px;
     border-left:2px dotted #000;
     margin-left:10px;/*give a little separation between main content and right side content (not space in-between) more of alignment to the right hand side*/
    }
    #rightside span {
     position:absolute;
     border-left:2px solid #fff;
     height:25px;
     left:-2px;
     bottom:-1px;
     width:0;
    }
    * html #rightside span {width:2px;w\idth:0}
    
    html:
    Code:
      <p class="rightheading">Designed By </p>
      <p class="designed"><a href="http://midwestwebdesign.net" target="_blank">Ryan Butler</a> &amp; <a href="javascript:;">Karyn O'Dell</a></p>
    <span></span>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I wanted the space underneath where you see my name, instead of before it. Do I just need to modify my righthand span?

    /*never mind: I added margin-bottom of 1px to the righthand side span and worked great. man, paul, you're a life saver. you truly deserve to get a site point award. */
    Ryan Butler

    Midwest Web Design


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
  •