SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Alignment Issue

  1. #1
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Alignment Issue

    Hello,

    Working on a wordpress experiment.

    Having a wee alignment issue with the left sidebar, the latest news headline is too low down, want it in line with the AGP TV link.


    Edited the CSS file quite a bit, but can't seem to find where its conflicting.

    Any ideas?

    Also, would ideally like the the underline to fill the box.

    http://mgdesign.hostultra.com/WP_Experiment/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    The difference is in the containers rather than the headings. The left box has this:

    Code:
    .block-border {
      border: 1px solid #C1C0C0;
      padding-top: 4px;
    }
    Remove that and the two headings will line up. If you want to keep the above, you can set different padding/margin at the top of each container. Using an empty H4 at the top of each container (as you have now) is an impractical way to create spacing. Remove those, and just put top margin or padding on the containers themselves.

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

    The extra space is because you have 4px top padding on the box in the left column but not on the one in the right column.

    Code:
    .block-border {
        border: 1px solid #C1C0C0;
        padding-top: 4px;
    }
    Code:
    block-content_tv {
        background-color: #1A1A1A;
       border:none;
        height: 300px;
    }
    Add or remove padding to either as appropriate.

    Text-decoration:underline only underlines the text. If you want a full width border then use the border property.

    You also seem to have an empty h4 title in there also.

  4. #4
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies

    its because I had left the widget top boxes blank, which then made the blank H4s.
    I added my custom H4s into the main content box.


    Just got to figure out a way to make the right box H4 white now...it opts for the blue as I cant give it the custom h4

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zapppa View Post


    Just got to figure out a way to make the right box H4 white now...it opts for the blue as I cant give it the custom h4
    Can't you use the class that it already has? i.e. block-content_tv

  6. #6
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope

    It won't let me add the class declaration as widget box just has a box for the title, followed by another for content. :/

    Thats why I stuck the h4 class in the main content area to try and work around it.

    Its a tricky one, I am using the Magnificant theme on Wordpress.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'm not following or I am looking at the wrong this

    The right box already has a class applied - you don't need to add one but just change the CSS. I think we may be talking about different elements.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could just add this to your style sheet:

    Code:
    #sidebar-right h4.widgettitle {
      color: #fff;
    }

  9. #9
    SitePoint Addict Zapppa's Avatar
    Join Date
    Aug 2009
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks dudes for you replies!! sorted

    ohh man, I must be sleeping.

    Your help is apprecioated


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
  •