SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Container border stops halfway down and image alignment

    This is the website that I am designing for a Preschool:

    Burlington, VT | International Children's School

    The container border stops about halfway down. Someone said it is because I have the next section floated to the left and adding a div with 'clear all' would work. Is this the best solution and where would I put the div?

    Also, the picture at the top is a background image and is aligned to the left. Can I just add a center class to the div to get it to to align to the center?

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,177
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    It's better to fix a CSS issue with CSS rather than HTML, so the best way to make the container stretch all the way to the bottom (or to wrap around its content) is to add this to your CSS:

    Code:
    #maincontent {
      border-color: #CCE5B3;
      border-style: none solid;
      border-width: 1px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      padding-bottom: 20px;
      text-align: left;
      width: 968px;
      overflow: hidden;
    }
    To center the header image, you'd do this:

    Code:
    #bg {
      background-color: #C5F9FE;
      background-image: url("../images/mountains1.jpg");
      background-position: 50% 0;
      background-repeat: no-repeat;
      height: 458px;
      margin: 0 auto;
      width: 100%;
    }
    BUT, be aware that having all that header information in an image alone is a really bad idea. Heading information like that is very important—for search engines, non-sighted users, SEO etc. Having it all in a image makes it totally inaccessible, and will serious hurt the site's performance.

    One way around this is to place all that info in the HTML and place the decorative image over the top of that text. But a better solution is to remove any text from the background image and place that text in the HTML itself, using a fancy font if you need to.

  3. #3
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Not sure if you spotted this Ralph, but the border is applied to both #container and #maincontent, so the fix results in a 2px border in some areas. The borders can be removed from one or the other. If they should encompass the menu then remove them from #maincontent and apply overflow:hidden to #container. And vice versa if not needed around the menu.

    Sound advice re the image and headers. With CSS off, the page content begins with the nav and an h1 from the slideshow reading "Persistance". Needs relevant text content. No doubt others will have suggestions (and thoughts on XHTML 1.1)...


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
  •