Web Size for resolutions

psycho_skilled · 05-21-2007, 01:01 PM

Hello, im new here, and im kinda new in webdesign too, so i am worried for a web design problem i have, when i make a webpage, when if its a simple design im making it on a 800 x 600 resolution, but, when i run it in a browser in a resolution of 800 x 600 it looks bigger, then, my question is simple, i am looking around on the net for any code, or command or anything that makes the design to resize depending on the resolution the computer you are usiong to view the page, i mean, so that u can see the webpage same size, or at least almost the same size, from a 800 x 600 and a 1024 x 768 computer.

Costin Trifan · 05-21-2007, 01:51 PM

1. If you want your page content to resize depending on current desktop resolution, you must use procentage values -> width: 25%;
2. If you want your page to have a fixed size use fixed widths -> width: 250px;

hope this make sense

psycho_skilled · 05-21-2007, 01:56 PM

well it makes sense to me, hmm, just to know, ok, i made the web design in photoshop, is like a template i made, then in dreamweaver i added the text box, now, the template i made was made ona desktop res of 800 x 600 and the web design is a 800 x 600 too, now, when i run the webpage at the browser IE it looks bigger than when i made the design and well i think u kno the rest hehe, still i would like u to take a look, on the page...

www.educomputerdepr.com it is a very simple webpage, and i would like it to resize depending on the desktop res like u said, ... if u lemme know how exactly i change that on dreamweaver woiuld be a lot better

Costin Trifan · 05-21-2007, 02:03 PM

Quote:

...and i would like it to resize depending on the desktop res like u said...

then you should use % values.

And I see nothing wrong with your page layout...
Of course, I don't know how it looks on a 800x600 res but on my 1024x768 it looks pretty good.

psycho_skilled · 05-21-2007, 02:05 PM

ok, try it on the 800x600 resolution, then u'll know what i mean, the text goes all the way to the borders and the images too, i dont really want that to happen, so lemme know how to use the % valuse on dreamweaver, i normaly just put the codes around and dont care too much for those resolutuons, but my boss well u know, asking too much hehe

Costin Trifan · 05-21-2007, 02:27 PM

Quote:

<head>
<title>Untitled Page</title>
<style type="text/css" media="screen">

body {
text-align: center;
vertical-align: top;
}

div.PageManager {
width: 70%;
height: auto;
text-align: left;
vertical-align: top;
}

/* Page Header */
div.PageHeader {
width: 100%;
height: 100px;
float: left;
text-align: left;
vertical-align: top;
border: solid 1px #ff9933;
background-color: #009900;
}

</style>
</head>
<body>
<div class="PageManager">
<div class="PageHeader">
header content
</div>
</div>

</body>

this is how it goes...

psycho_skilled · 05-22-2007, 05:11 AM

wow, thanx man, in a moment i'l work on that, so, i guess i just have to play with the widht and height in % to make the webpage the way i want right . . .

psycho_skilled · 05-22-2007, 06:11 AM

well, i was wokring on that, it works okay, but when i add the content of the page, the template doesnt run the same, what runs in % is like the background of it, not the content, im still playing with the proyect so it works perfectly, if there is sumthing i need to kno, just lemme know it...

psycho_skilled · 05-22-2007, 07:29 AM

Quote:

Originally Posted by costin_trifan

<head>
<title>Untitled Page</title>
<style type="text/css" media="screen">

body {
text-align: center;
vertical-align: top;
}

div.PageManager {
width: 70%;
height: auto;
text-align: left;
vertical-align: top;
}

/* Page Header */
div.PageHeader {
width: 100%;
height: 100px;
float: left;
text-align: left;
vertical-align: top;
border: solid 1px #ff9933;
background-color: #009900;
}

</style>
</head>
<body>
<div class="PageManager">
<div class="PageHeader">
header content
</div>
</div>

</body>

ok so im using this cod eu gave me to work on that, its is working the way i want, still when im playing with the % sizes to make it look good in either res but then when in 800x600 looks great on 1024 or higher sum white lines appears either on the side of in the top and above of the flash intro, im still trying to work on this, if u have any idea for me to fiz that problem lemme kno, any1

Costin Trifan · 05-22-2007, 08:06 AM

Quote:

...in 800x600 looks great on 1024 or higher sum white lines appears either on the side of in the top and above of the flash intro...

I suppose you're reffering here to the main page of your site?
If so, have you set the page background color in the body?

Quote:

body {
....
background-color: your page bgColor;
.....
}

psycho_skilled · 05-22-2007, 08:09 AM

yes indeed i changed all bgcolors to the one im using for all the background and animation, but still in the size adjusts it keeps appearing those white lines, dont know why, im still playing to get to the point

Costin Trifan · 05-22-2007, 08:14 AM

psycho_skilled · 05-22-2007, 09:05 AM

great after almost 3 hours of hard work in this thing changing numers of %, i fixed it, now i have what i want, at least in the intro, now the deal is to make the same, to the rest of the page, i tried using the same numbers and all, but since the rest of the page is hybrid it got all messed, i dunno how to do it, is a photoshop template i made, so that means slices, and that means many images, is there a way i can just set the whole page just to fix a percentage area so that i dont have to go image per image adjusting % for it to fix at the end? i mean if 3 hours for ajust 1 flash animation is what i took, i dont wanna kno about image per image in the rest of the page O.O

psycho_skilled · 05-22-2007, 10:41 AM

huh, all the day and nothing came, i could just fix the flash intro, (main) but the rst is a pain, i really dont know how to fix that, i was trying to make the whole page in a % but nothing changes, i tried changing each and the page get messed up, i tryed changing another things and well it is still messed up

Costin Trifan · 05-22-2007, 01:46 PM

I really would like to help you further, but there's nothing left for me to do...

Quote:

...is a photoshop template i made, so that means slices, and that means many images...

^^ This is the reason I don't design my pages using a photoshop images

Please note that you might use a wrapper div to hold all of your content...

psycho_skilled · 05-22-2007, 02:03 PM

can i still use the resize script u posted if i wrap the whole document?

Costin Trifan · 05-22-2007, 11:52 PM

Of course

But don't forget to adjust its size as you need, ok?

psycho_skilled · 05-28-2007, 06:54 AM

ok so, ive been trying to adjust the size with the document wraped, but still it doesnt go like that, the other thing i was thinking about was making the whle page once again, but in a smaller scale, so when i have to edit i dont have to adjust too muchn it size, what u think about it?

Costin Trifan · 05-28-2007, 02:35 PM

you can give it a try, see what you come up with and then adjust it as you need.

Good luck, mate!