Skip navigation
Currently Being Moderated

Make website fit all screen resolutions

Feb 18, 2013 3:47 AM

Ok, first of all, i've been digging around the forums and found some topics about this issue, but honestly i couldn't figure out the answer from those. So here it goes..again..

 

I created my website for a 1680x1050 resolution, but then i realized not evybody in my company could properly see the site. I made a quick research, found out the minimum screen resolution of my peers (1024x768) and tried to resize the whole site to fit in those. In the end, i could adjust the width, but the height was impossible to adapt to 768, unless i started to cut content off, which i don't want.

I know there's a way to make it fit all screens, but i don't know where in the code i have to fix things.

I have a wrapper DIV with a header DIV, a left DIV, a right DIV and a footer DIV inside it. Do i have to adjust all? And if so, what do i adjust to? %?

As you can see, i'm clearly confused here. Here goes my CSS. Can't link the website 'cause it's on my intranet only.

 

@charset "utf-8";
body {
margin-top: 10px;
background-color: #000;
margin-right: auto;
margin-left: auto;
}


#wrapper {
height: 850px;
width: 950px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../Images/bgdr660.jpg);
}
#header {
background-repeat: no-repeat;
clear: none;
float: none;
height: 203px;
width: 950px;
background-image: none;
position: relative;
}
#sprymenu {
height: 26px;
width: 950px;
color: #000;
text-align: left;
font-family: Calibri;
font-size: 70%;
vertical-align: middle;
}

#leftDiv {
clear: none;
float: left;
height: 360px;
width: 190px;
position: relative;
text-decoration: none;
}

#rightDiv {
clear: none;
float: right;
height: 420px;
width: 755px;
position: relative;
}

#footer {
height: 60px;
width: 950px;
clear: both;
position: relative;
padding-bottom: 20px;
}
.FooterImg {
margin: auto;
}

a:link {
text-decoration: none;
color: #000;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: #454545;
}
a:active {
color: #666;
}
.Cabeçalho {
font-family: Calibri;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #FFF;
}
.pointer {
cursor: pointer;
text-align: justify;
padding-right: 20px;
font-family: Calibri;
}
.answers {
font-weight: bold;
text-align: justify;
padding-right: 20px;
font-family: Calibri;
}

.admin {
font-family: Calibri;
background-color: #EFEFEF;
text-align: center;
font-size: 16px;
}
.Cabeçalho2 {
font-family: Calibri;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #000;
}
#inner {
overflow: auto;
height: 420px;
width: 755px;
}
.AP_Div {
font-family: Calibri;
font-size: 24px;
color: #676767;
text-align: center;
font-weight: bold;
}
.Nota {
font-family: Calibri;
font-size: 28px;
color: #900;
}
.Escala {
font-family: Calibri;
font-size: 18px;
color: #900;
text-align: center;
}

 
Replies
  • Currently Being Moderated
    Feb 18, 2013 4:21 AM   in reply to DevilUrd

    flexible, fluid, call it what you want throws up yet another set of probelms. Below is your main <div> structure set to accommodate the width of any browser viewport. I've coloured the <divs> with vivid colors so you can see what is going on...........and then there is 'responsive' layouts which ups the game even further.

     

    I'd also forget setting the height value of the <div> as the content will make its own height. You can set a min-height but if the content makes more than the set minimum height it will just push the <div> taller. If you set a specific height and the content makes more it will be truncated (out of view)

     

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Untitled Document</title>

    <style>

    #wrapper {

    height: 850px;

    width: 100%;

    margin-right: auto;

    margin-left: auto;

    background-repeat: no-repeat;

    background-position: center center;

    background-image: url(../Images/bgdr660.jpg);

    }

    #header {

    background-repeat: no-repeat;

    clear: none;

    float: none;

    height: 203px;

    background-image: none;

    background-color:#F90;

    }

    #sprymenu {

    height: 26px;

    color: #000;

    text-align: left;

    font-family: Calibri;

    font-size: 70%;

    vertical-align: middle;

    background-color:#69F;

    }

     

    #leftDiv {

    clear: none;

    float: left;

    height: 360px;

    width: 20%;

    text-decoration: none;

    background-color:#0CC;

    }

     

    #rightDiv {

    float: left;

    height: 420px;

    background-color:#F96;

    width: 80%;

     

    }

     

    #footer {

    height: 60px;

    clear: both;

    position: relative;

    padding-bottom: 20px;

    background-color:#9F0;

    }</style>

    </head>

     

    <body>

    <div id="wrapper">

    <div id="header">header</div><!-- end header -->

    <div id="sprymenu">Spry Menu</div><!-- end sprymenu -->

    <div id="leftDiv">Left Div</div><!-- end leftDiv -->

    <div id="rightDiv">Right Div</div><!-- end rightDiv -->

    <div id="footer">Footer</div><!-- end footer -->

    </div><!-- end wrapper -->

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 18, 2013 7:18 AM   in reply to DevilUrd

    DevilUrd wrote:

     

    Thanks for your reply!

    My main problem atm is dealing with the height, since the width was already ok. And you set % values for width, but determined fixed values for height.

    If i don't put any value on height, and only fix width based on percentages, it's not working..

     

    Or did i understood it wrong?

     

    Height is ALWAYS determined by the content, that's why you should never specify a fixed height for a container unless it contains a fixed height element such as an image, video or an iframe, etc

     

    What's not working if you remove the height values?

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 3:48 AM   in reply to DevilUrd

    Osgood_

     

    Do you think the fluid grid layout in Dreamweaver could help this case? Or Reflow?

     

    Thanks,

    Preran

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 5:20 AM   in reply to DevilUrd

    DevilUrd wrote:

     

    Well, by removing all the height values, virtually nothing happened (besides the content being dragged to the left side of the screen). In higher resolution it did not enlarged to fit the screen and in lower resolution it did not squeezed to fit it either.

     

    What I supplied is a bare bones basic structure which fits all resolution screens as an example - how you are applying it I don't know.

     

    Removing any height would not result in anything being dragged anywhere.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 5:29 AM   in reply to Preran

    Hi Peran,

     

    I don't know much about the 'Fluid Grid' in Dreamweaver apart its target audience is desktop, tablet and mobiles. It works by setting media query breaks at specific widths and the website design morphs into something else to fit the screeen width when an alternative media query is evoked.

     

    This is not what the original OP was asking. As I read it they have a site which they want to fit the browser width on all desktops. This is achieved by setting containers at percentage width rather than fixed width.

     

    I guess you could use media queries to target just desktops but you would need to use more media queries at the higher end range.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 8:03 AM   in reply to osgood_

    Hi Osgood,

     

    Makes sense to me. Thank you.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 9:31 AM   in reply to DevilUrd

    DevilUrd wrote:

     

    Does that mean that the content must be in % too? I'm very confused now...

     

    What i wanted in the test page above is that those divs would fit the whole screen in height as well.

     

    Forget height when designing for the web. The web is not a fixed depth  area like DTP. The content determines the height.

     

    The less content the less the height is. The more content the more the height will make. Unless you know specifically what the height of your content will be from page to page how can the content ever fit the height exactly without the necessity to scroll.

     

    To make those <divs> stretch the whole depth of the screen can probably be achieved with some javascipt if you search Google but quite frankly its not worth the effort.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 10:37 AM   in reply to DevilUrd

    DevilUrd wrote:

     

     

    One last question.. If i do determine that, let's say, leftdiv height is 60% (and also set overflow to auto) will whatever content i put there never go past those 60%? Or will it continue to occupy until i add things?

     

    I don't know as I never use heights, so it's not a situation I've ever come across or likely to experience. You'll have to experiment but remember other users won't necessarily see what you're seeing. They have their browsers set up differently that's why you shouldn't try to nail everything down.

     

    Sure you can set heights but if the content is more than the height of the container (this can happen if someone zooms the text of the page) you have to allow for the content to scroll should it exceed the height of the conatiner. If you set the height on many containers then you potentially have a lot of scroll bars OR if you don't allow for scrolling risk the content disappearing as it vanishes when the height of the container is breached.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 19, 2013 11:19 AM   in reply to DevilUrd

    If you want equal height columns, look at this article.  See Options #2, #3 & #5.

    http://alt-web.com/Articles/Equal-Height-CSS-Columns.shtml

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points