My website splits into two on big widescreens

Discussion in 'CSS' started by mark_s, Mar 11, 2008.

  1. #1
    My website breaks into two when it is viewed in a high resolution on a widescreen. Can someone help me fix this?

    My website.

    Thanks :)
     

    Attached Files:

    mark_s, Mar 11, 2008 IP
  2. softnmore

    softnmore Peon

    Messages:
    34
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    hey

    use following html structure,
    
    <div style="float:left; width:800px; height:auto;">
      <div id="banner">
        <!-- banner content -->
      </div>
      <div id="wrapper_parent">
        <!-- wrapper parent content -->
      </div>
      <div class="footer2">
       <!-- footer content -->
      </div>
    </div>
    
    HTML:
    hope this will work :cool:
     
    softnmore, Mar 11, 2008 IP
  3. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I had to have some complicated CSS so that the main content on my site is at the top of the source code (SEO reasons). Is there not just a way to fix this rather than have everything recoded?
     
    mark_s, Mar 11, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It looks like because there is room on a larger screen your main content is floating to the left just like you've asked it to?

    Try doing this:

    Take the: float:left; off the .wrapper_parent in your CSS file.

    Also don't you want the whole page to be centered rather than to the left? Just put all your content in a wrap and have the wrap set to margin:0px auto; in your CSS file and also text-align:center;

    Let me know how it goes, and by the way nice site!!
     
    wd_2k6, Mar 11, 2008 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    The proposed structure from softnmore will have no detrimental effect on SEO. A well thought out banner is a primary identifier for the site. Your simple 3 column layout will easily support the main column following the banner.

    Considering the number of xhtml syntax errors and the poorly considered css, it wouldn't hurt to clean up your structure as you fix your markup and css.

    cheers,

    gary
     
    kk5st, Mar 11, 2008 IP
  6. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yes, you definitely need to clean up your CSS and HTML errors. You have quite a few.

    In order to fix your current error, all you really need to do is put EVERYTHING that is in the <body> tag inside a div, give it an ID of mainContainter or something like that. Then all you need to do is give that a fixed width that is exactly the same width as your banner and content containers.

    Since this is a fixed width design, the above will keep all of your stuff inside the container, and properly lined up.

    Remember, even though this will fix it, you REALLY need to clean up your CSS and your HTML.
     
    ChaosFoo, Mar 12, 2008 IP
  7. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Thanks a lot for all your input everyone.

    When you say clean up my CSS, do you mean just resolve the W3C warnings? If so, what is the downside of not cleaning it up?

    Not long ago my XHTML was perfectly valid, I just need to go through and fix the new errors now.
     
    mark_s, Mar 12, 2008 IP
  8. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Cleaning up the errors (if possible) should be done. However, some of the warnings they give are kind of ridiculous. I usually ignore most of them that have to do with a background color not being set, etc. However, you do have some warnings that need consideration. Like this one for example:

    h1 font-family: You are encouraged to offer a generic family as a last alternative

    You should really follow that piece of advice.

    It also looks like you are defining conflicting styles, by cleaning some of those up, you could probably make your style sheet smaller in size.
     
    ChaosFoo, Mar 12, 2008 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    last alternative font-family is important for users like me. Many sites I see are in times new roman because I don't have even the common fonts of Arial or Verdana. I have serif, sans, and mono. That's it. : )
     
    Stomme poes, Mar 13, 2008 IP
  10. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Why are you missing so many fonts?
     
    mark_s, Mar 13, 2008 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Do `apt-cache search truetype'

    That should return msttcorefonts - Installer for Microsoft TrueType core fonts

    apt-get install msttcorefonts

    cheers,

    gary
     
    kk5st, Mar 13, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    ^ yeah I know, Gary... but you wouldn't believe how good it is for testing... better yet, do you know a way to turn fonts OFF in a browser while keeping all the other CSS on? Then I'd go ahead and download the fonts. If a site looks okay because I used Verdana but out of whack without basic fonts, it means I didn't code it well, so a nice test.

    I have a 'blows machine for testing which does have the core fonts (tho I downloaded some others and the browsers aren't showing those... but I'm unfamiliar with Windows), so I can check sites with default MS fonts and I try to keep Mac fonts in mind when writing font-families (Safari for Windows looks different but I'm not sure if they're different fonts or just the different smoothing it uses).

    mark: I have Unix fonts : ) MS and Mac fonts can be downloaded, but I've just left them and when I started web developing I never upgraded anything... and usually am pretty glad. I've only downloaded fonts specifically for GIMP alone.
     
    Stomme poes, Mar 14, 2008 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    Not tested for full effect.

    In preferences / content / (fonts) advanced unselect "Allow pages to choose their own fonts &#8230;".

    cheers,

    gary
     
    kk5st, Mar 14, 2008 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Thanks, I might try that. (thumbsup)
     
    Stomme poes, Mar 14, 2008 IP