Web page width different on screen sizes

Discussion in 'HTML & Website Design' started by shteca, Apr 10, 2013.

  1. #1
    Hi
    I recently made some changes to the header on my website (www.FourQuotes.co.uk) and now there is an error with the page being displayed on different browsers and screen sizes.
    It is kind of making the page width end with the header banner even though its not 100% of the page width.
    Can you take a look and help me?
     
    shteca, Apr 10, 2013 IP
  2. kajakske

    kajakske Well-Known Member

    Messages:
    139
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    165
    #2
    #headerbg {
    1. float: left;​
    2. width: 100%;​
    3. height: auto;​
    4. background: #dcdbd9;​
    }
    The width: 100% will make it 100% width of the viewable browser.
    Since your header image is 1000px wide, you could also add min-width: 1000px;
    Then it will be as wide as the viewable screen unless it's smaller than 1000px, then it will be 1000px fixed. Just like your header image.
     
    kajakske, Apr 10, 2013 IP
  3. shteca

    shteca Active Member

    Messages:
    145
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    78
    #3
    I tried to add in,
    min-width: 1000px;
    but when I do, nothing changes.
    My main concer is with the screen resolutions of 800x600 Everything just goes out the window.
    Adding the min width didn't do anything
     
    shteca, Apr 10, 2013 IP
  4. shteca

    shteca Active Member

    Messages:
    145
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    78
    #4
    Oopss no, it is working...

    just got a load of different style sheets going, need to change them all...

    Really need to redesign the site in a more uniform way.
     
    shteca, Apr 10, 2013 IP
  5. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #5
    You have a severe divitis issue (divs replacing semantic elements, like LABEL's and headings), no first heading, an h2 doing LEGEND's job. LINK element in body (and lack of media), STYLE between body and head, ULs' other children than LI. That's even without talking about fixed width and height of almost everything on the page, along with (who would have doubted) the omnipotency of fixed font sizes. When it comes to CSS, the half, or even more, of properties are redundant (no one forces you to float every single element!)

    By the way, min-width:1000px; can't help you if width:1000px; is already there. I don't even grasp the point of wanting to use min-width.

    Bottom line : print it out, stick it on your wall and write with a big, red marker - "How not to build a website". It's a decent "how not to" tutorial by the way.
    Once you do that, start all over.

    EDIT: Forgot to mention that same ID repeat multiple times.
     
    Last edited: Apr 10, 2013
    wiicker95, Apr 10, 2013 IP
  6. shteca

    shteca Active Member

    Messages:
    145
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    78
    #6
    Gulp!
    I think it calls for a website redesign...
    There have been just so many changes to the site that I can't even keep track of all the pages.
    What you reckon I should do?
    You think these bad divs are affecting my rankings?
     
    shteca, Apr 10, 2013 IP
  7. wiicker95

    wiicker95 Well-Known Member

    Messages:
    438
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    100
    #7
    Not necessarily a redesign, but a rewrite of your markup and stylesheets.

    And about rankings: I don't know what's your vision of the whole ranking and SEO thing, since everyone's a bit different. But tell you what, those who say mere DIV can help are wrong. DIV don't have any semantic meaning - take your markup and remove ALL DIV tags, but leave the content. Not really a sense maker. What can, and will mess with your rankings is the whole, non semantic, markup and lack of META keywords, whereas a useless one, for the author, is present. This suggests again a complete rewrite.
     
    wiicker95, Apr 10, 2013 IP