Results 1 to 6 of 6
-
11-16-2008, 12:05 AM #1Junior Guru
- 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
-
11-16-2008, 02:09 AM #2Web Hosting Master
- 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
-
11-16-2008, 06:36 AM #3jasper_ 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
-
11-17-2008, 12:57 PM #4PaulRut 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
-
11-18-2008, 07:00 AM #5Junior Guru
- 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
-
11-18-2008, 10:36 AM #6Junior Guru
- 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?