Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    CSS Formatting Question

    I just have a question about CSS formatting. I've been working on a few sites for a while doing mostly PHP and SQL coding, but now I have to do CSS layouts, and am getting kind of frustrated. Basically, I make the design on a 1600x1200 4:3 aspect ratio monitor, and when i switch to a lower resolution, or to a monitor with a different aspect ratio, the formatting is off. Everything is pushed too far to the left (probably since I'm specifying positioning using the left attribute in CSS). I've tried using px, em, percentage, but I don't think I'm looking in the right place to solve this problem. So my question is, what CSS attributes/code do you use to make sure that your elements stay in the right place. The code is posted under here. What should I use to make the layout stay in the same position regardless of monitor aspect ratio or resolution?

    body{
    background-color:dfefff;
    background-image:url(bg.jpg);
    background-repeat:repeat-x;
    overflow:auto;
    }

    div#headertop{
    text-align:center;
    background-position:center;
    background-repeat:no-repeat;
    width:63em;
    left:20%;
    position:absolute;
    top:0px;
    height:180px;
    z-index:10;
    }

    div#navbar{
    text-align:center;
    width:63em;
    background-image:url(bar.jpg);
    background-position:center;
    background-repeat:no-repeat;
    height:25px;
    left:20%;
    position:absolute;
    top:180px;
    padding-top:8px;
    padding-bottom:1px;
    }
    div#navbar li{
    display:inline;
    list-style:none;
    padding-left:10px;
    padding-right:10px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:17;
    font-weight:bold;
    border-right:1px solid #000000;
    }
    div#navbar li.right{
    border-right:none;
    }
    div#navbar li a.navlinks{
    padding-right:10px;
    list-style:none;
    text-decoration:none;
    color:#FFFFFF;
    }

    div#mainphoto{
    position:relative;
    top:15em;
    left:23%;
    width:500px;
    }

    div#maintext{
    position:absolute;
    top:240px;
    left:59%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    width:300px;
    height:333px;
    }
    div#maintext p{
    color:#000000;
    font-weight:bold;
    }
    div#maintext p a{
    color:#000000;
    font-weight:bold;
    }

    Thanks in advance

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Never use absolute positioning. It will give your page a brittle layout.

    Could you show us the involved markup, or the complete code instead.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I'll start by saying don't use absolute positioning for the structural layout elements. It's just going to cause issues that are going to give you a headache. Absolute positioning isn't the devil (despite what some might lead you to believe) but it seems to get over used by people who don't have a firm grasp on it.

    Any way, looking at your code you might try starting with something like this:
    Code:
    body {
    padding: 0; /* remove the default padding */
    margin: 0; /* remove the default margin */
    font-size: 62.5%; /* set to roughly 10px asssuming most browsers are set to 16px */
    text-align: center; /* needed for IE6 to center the whole shebang */
    }
    #container {
    font: normal 1em/1.2em arial, helvetica, sans-serif; /* your new base fpnt size (roughly 10 px) */
    width: 63em;
    margin: 0 auto; /* centers the whole box in the screen regardlesss of screen size */
    position: relative; /* this is now the parent of any direct child that 'must' be absolutely positioned */
    }
    You don't need to to use absolute positioning with your layout from what I see. One thing to consider is that elements 'stack' from top down. If you absolutely position them, they are ignored by other elements. Another thing is that if they are absolutely positioned, you need to set a width, but at a default your divs are going to be 100% width. When you Ab Pos them, they loose this and you have to keep unnecessarily having to redefine the widths.

    As far as using percentages, well, for layout, don't. Percentages in distance are going to be based on the width of the browser. I for one don't browse full screen. So any page based on percentages is not going to display correctly. I mean don't use positioning in percentages when it's going to be based off of an element (the browser) when you have no control over the element.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    harbingerOTV

    I don't understand your last paragraph regarding percentages. And surely the purpose of your code is to control the browser.

    Personally, I have not had any problems with using percentages providing I use

    html, body{
    height:100%;
    width:100%;
    }

    at the start of my CSS code.

    Frank
    Last edited by effpeetee; 09-10-2008 at 08:55 AM. Reason: Tidying up.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Frank,

    What I am talking about is more related to his code. For example:
    Code:
    div#headertop{
    text-align:center;
    background-position:center;
    background-repeat:no-repeat;
    width:63em;
    left:20%;
    position:absolute;
    top:0px;
    height:180px;
    z-index:10;
    }
    He is positioning this div 20% from the left. If my browser is 1000px wide thats 200px. As I resize my browser this number changes making the layout move around.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    You have two errors in your css - both minor, but worthy of fixing (#dfefff and font-size:17px.

    There is no need to prefix you styles with "div" as they are unique anyway. "div#maintext" is the same as "#maintext" for example.

    Do you have a link?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    harbingerOTV,

    If you open my Sources program, which is written in %ages, and pull the size around; it stays readable and in proportion. Isn't that what we are all aiming for.


    I am using 1280x1024 resolution, but it works satisfactorily on all the resolutions that I have tested.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Frank,

    on your page if make these changes:
    Code:
    #content1 {
    width:80%;
    float:left;
    margin-left:.1%;
    border:2px solid #000;
    background-color:#fff;
    color:#000;
    text-align:left;
    font-size:125%;
    margin-left: 12%;
    }
    and then resize the page, you'll notice the left and right margins begin to grow and shrink accordingly. Making the layout sit in a dufferent spot based on my browser width.

    Now if the original code was written like:
    Code:
    width: 80%;
    margin: 0 10%;
    this wouldn't be the issue as the left and right margins are the same and the total is 100%.

    In his example though this is not the case. There is a fixed width and just a left margin. So his example will behave like the code I added to your sites CSS.

    -Alan
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Alan,

    I wasn't really thinking about him when I remarked about the percentages.. I was just defending the use of them and saying that I had found them useful. Personally, why there are so many formats beats me. I worked in the TV trade all my working life. Formats changed but generally all together and only one in use. Having so many only unnecessarily complicates matters with very little gain and much loss.

    Still; I must not get onto that 'Hobby Horse'. I'm getting to be an old Fuddy-Duddy.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Frank,

    Ah, there's the communication problem. I was specifically talking about the use for his project and why it was making things mis-align.

    In your site, you've gone about it better thus no issue.

    Every way to build has it's place. It's just a matter of choosing the right tool for the job.

    -Alan
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    In your site, you've gone about it better thus no issue.
    I had a lot of help from the forum; among many others, from Aero and abduraooft.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New to the CF scene
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Alrighty, thanks guys. I figured out what I was doing wrong. The Sources page was a big help.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •