Results 1 to 6 of 6
  1. #1
    Join Date
    May 2006
    Posts
    201
    need help with website resolution

    Hi i did a website in dreamweaver and uses 4 div layer to insert 4 different images and set the css margin to auto but the 4 div layers i have to move them to the very left side in dreamweaver before i could see all the 4 images aligned properly in a white background box, other than that when i move it elsewhere like the center, the 4 images went off way right....
    any idea how to solve this problem so that everyone using IE, Firefox or Google Chrome can view my webpage correctly....thanks

  2. #2
    Join Date
    Jan 2006
    Location
    Athens, Greece
    Posts
    1,481
    A classic workflow to realize the sizes is, taking a snapshot of your browser at
    a normal width, paste it into photoshop, crop the "content area" and design on it.
    Around 900px your images should display centered in any browser I believe.





    __________________
    PHP Code Repository | I speak code

  3. #3
    jasper_ Guest
    960px is cool for 1024px screen resolutions and up. Check out www.960.gs for a downloadable grid layout for your designs.





    __________________
    J. August
    Web

  4. #4
    PaulRut Guest
    if you use "block" (or is it "inline"...I can't remember...urg. I just flip between the two until I get the desired results), they should *stay* side-by-side or one-on-top...and stay *liquid* no matter the size of the browser.
    Those are CSS "display" settings on each DIV (btw).
    that should do it!!!





    Last edited by PaulRut : 11-17-2008 at 11:59 AM.
    Reason: needed more info...sorry

  5. #5
    Join Date
    May 2006
    Posts
    201
    I tried the display block option also but its not working....
    here is the output of the website i saw on my browser http://img362.imageshack.us/my.php?image=websitemr9.jpg
    dreamweaver output http://img508.imageshack.us/my.php?i...mweavervb5.jpg
    the html file code:
    Quote:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Meiyan Subzone Website</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="box1"></div>
    </body>
    </html>


    Css Style Sheet Code:
    Quote:


    /* CSS Document */
    body{
    background:url(images/background.jpg) 0 0 no-repeat;
    width:800px;
    height:700px;
    background-position: center center;
    margin:auto;
    }
    .box1{
    background-image: url(images/box1.gif);
    background-repeat: no-repeat;
    position:absolute;
    display:block;
    margin: auto;
    height: 230px;
    width: 264px;
    left:319px;
    top:218px;
    }


    Hope someone can help me out, thanks alot

  6. #6
    Join Date
    May 2006
    Posts
    201
    Sorry for double post, could not edit previous post, im looking for a stretch of code that can help to detect automatically the resolutions settings for any browser, pc and os....any idea how to acheive that?

Posting Permissions

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