I need help with scaling

slitharein

New Member
Messages
8
Reaction score
0
Points
0
Hey everybody,

I made a picture in photoshop which will serve as a rough template for my website. I was wondering if I could make the picture scale so that it fills the entire screen no matter what resolution your screen is. I know this is possible (I've seen it on other websites), but I have no clue how to do it.

www.slitharein.co.cc is my website.
Any extra comments on improving the background or other things are also welcome (especially colour schemes). I easily change all the colours etc.
I made sure to be able to do that.

Thanks in advance
 

zubair12

Banned
Messages
631
Reaction score
0
Points
0
i can only see your temp home page which is just a picture!!!!
 

monpire

New Member
Messages
16
Reaction score
0
Points
0
Hey everybody,

I made a picture in photoshop which will serve as a rough template for my website. I was wondering if I could make the picture scale so that it fills the entire screen no matter what resolution your screen is. I know this is possible (I've seen it on other websites), but I have no clue how to do it.

www.slitharein.co.cc is my website.
Any extra comments on improving the background or other things are also welcome (especially colour schemes). I easily change all the colours etc.
I made sure to be able to do that.

Thanks in advance

Can you provide the examples you mentioned? But you can either use CSS or JavaScript. Your website seemed to be sliced out directly off Photoshop/ImageReady, right?

Well, you might have to play with the CSS to achieve that. Try this, if this is what you want:

Open up your file, add this before or after #Table_01 (doesn't really matter):
Code:
body{ margin: 0 auto; background: #000; }
Take out"position: absolute" in #Table_01

Code:
#Table_01 {
    [I]position:absolute;[/I] (take this out)
    left:0px;
    top:0px;
    width:1024px;
    height:768px;
}
Do a quick test to see if that's what you are wanting to do.
 
Last edited:

slitharein

New Member
Messages
8
Reaction score
0
Points
0
I'll try find the websites I mean. I can't remember them of the top of my head.
But these forums do it like I want it to be. (Try making your screen resolution 800x600, look at the forums and my site, then make it 1024x 768 and look at the forums and my site) That should make it clear what I'm trying to do.

It is indeed sliced out of imageready directly. I'm trying to see if I can use that so I can easily edit only part of the website screen.
But I'll have to make a background sooner or later anyway.
I'm very new to making websites and I'm just exploring the possibilities without using something like Drupal (I know it's the hard way to do things)

I tried doing what you suggested, but it doesn't resize automatically with it.
It just stays the same size. I want it to be automatically 100% of the browser window.

I'm trying to make my menu to work right now though, but I though I'd ask this already so I can already get this to work properly xD
 

monpire

New Member
Messages
16
Reaction score
0
Points
0
I tried doing what you suggested, but it doesn't resize automatically with it.
It just stays the same size. I want it to be automatically 100% of the browser window.

The reason why the images didn't resize because images are static and they are at fixed width. If you want them to be resizable, one of the techniques, such as this forum is to repeatable backgrounds, and setting the widths by using % instead of px will do the trick. Such as width="100%" instead of width="1000px".

To solve your images problem, you'll have to slice your images strategically to ensure it'll scale.

I posted this elsewhere, but try this tutorial:
http://www.layersmagazine.com/image-slicing-in-photoshop-cs3.html

Good luck
 

slitharein

New Member
Messages
8
Reaction score
0
Points
0
Ok, thanks.
I'll try using your tutorial to make my page scale.
If I run into any more problems I'll post them here.

Thanks again!
 

monpire

New Member
Messages
16
Reaction score
0
Points
0
Ok, thanks.
I'll try using your tutorial to make my page scale.
If I run into any more problems I'll post them here.

Thanks again!

The tutorial I posted is mostly for showing how to slice things out. It doesn't really show you how to scale and all the jazz. It is a complicated process.

But looking at your temporary homepage right now, as most of it are graphics, scalability is a bit tough to achieve. But here's a thought:

Menu - try using generic fonts if possible such as: Arial, Verdana etc... but if you absolutely need to use that font, I believe there are some tools out there using Javascript to embed fonts = slowing down a site a bit. I can't remember what it is on the top of my head.

For the blue sort of lines vertically and horizontally next to the logo... you can use the repeatable background technique to make it scale any size you want.

Good luck.
 
Last edited:

syrius

New Member
Messages
13
Reaction score
0
Points
0
hey you said you wanted some colour scheme help? There's a fantastic site called Adobe kuler which helps you choose your colour schemes

http://kuler.adobe.com/

Also just as a tip change your body text to a sans serif font all of that cursive font is difficult to read especially if you're using a lot of body text ^_^!

Sorry I don't have any scaling tips but I hope this helps with your design ^_^!
 

slitharein

New Member
Messages
8
Reaction score
0
Points
0
Thanks for the tips.

I quickly picked a font when I was messing around in photoshop.
It's not the final font I'm going to use.

Also, I've put my project on a temporary hold, since I have quite a lot of other obligations I need to take care of first.
 

adamparkzer

On Extended Leave
Messages
3,745
Reaction score
81
Points
0
Hey everybody,

I made a picture in photoshop which will serve as a rough template for my website. I was wondering if I could make the picture scale so that it fills the entire screen no matter what resolution your screen is. I know this is possible (I've seen it on other websites), but I have no clue how to do it.

www.slitharein.co.cc is my website.
Any extra comments on improving the background or other things are also welcome (especially colour schemes). I easily change all the colours etc.
I made sure to be able to do that.

Thanks in advance
Just wondering, did you ever find a solution to this? I read through some other peoples' responses, but I couldn't really pinpoint a solution that would work in all instances in all browsers.

Were you interested in doing something like this: http://adamparkzer.co.nr/flower.php ? If so, let me know, and I can help you use CSS to make it happen. :)
 

slitharein

New Member
Messages
8
Reaction score
0
Points
0
Just wondering, did you ever find a solution to this? I read through some other peoples' responses, but I couldn't really pinpoint a solution that would work in all instances in all browsers.

Were you interested in doing something like this: http://adamparkzer.co.nr/flower.php ? If so, let me know, and I can help you use CSS to make it happen. :)

That's exactly what I'm talking about!
I'm going to have a look at your code if you don't mind and see what I can figure out from there.

But any guidance on how to do it is very much appreciated!

[EDIT]
Never mind. I found the page source code, but it's not easy to read xD. But I would still love to learn/know how to do that!
 
Last edited:

adamparkzer

On Extended Leave
Messages
3,745
Reaction score
81
Points
0
lol Actually, I do mind people stealing my code, which is why I make it as difficult to read as possible. :)

But I'll offer some help for you; these are the lines of code that you're interested in:

<style type='text/css'>
body{margin:0px}
#bg{position:fixed;margin:0px;border:0px;padding:0px;left:0px;top:0px;width:100%;height:100%;overflow:hidden;z-index:0;}
#bg img{width:100%;height:100%;}
</style>
<div id='bg'><img src=' ' /></div>

(1) It sets the margins to 0 so there will be no extra space around your image.
(2) It labels our background as "bg," and sets is position, making it start from the top left corner.
(3) It defines the properties of "img," setting its width and height to 100%.
(4) It describes that the image presented is part of "bg," and displays the image.

There's probably cleaner ways of doing it, but I haven't really had the motivation to fix it. lol
 

slitharein

New Member
Messages
8
Reaction score
0
Points
0
Sorry :sad:

I'm not stealing your code, just to make it clear. But looking at it gave me an idea that I'm currently working on, on how to make it work (hopefully)

But the way you wrote your code you have a background with a screen in which you can put content. That's similar to what I want eventually, but at the moment I'm still just messing with the possibilities of it xD
Anyway, I will try using your hints after I finish my own experiment.

Thanks a lot for the tips though. I really appreciate them!
 

adamparkzer

On Extended Leave
Messages
3,745
Reaction score
81
Points
0
Sorry :sad:

I'm not stealing your code, just to make it clear. But looking at it gave me an idea that I'm currently working on, on how to make it work (hopefully)

But the way you wrote your code you have a background with a screen in which you can put content. That's similar to what I want eventually, but at the moment I'm still just messing with the possibilities of it xD
Anyway, I will try using your hints after I finish my own experiment.

Thanks a lot for the tips though. I really appreciate them!
lol There's nothing to be sorry about, I already realize that there are tons of people that look at my source code and copy it anyway. I just try to make it as incomprehensible as possible so when they try to customize it, they have massive difficulty. You asked for help, so I'm fine with sharing basic information.

If you need further help placing the box in the center, I can help you out with that too - just continue this thread later or post another topic, and I'll probably notice it.
 

sohrab

New Member
Messages
1
Reaction score
0
Points
0
Use a different font.

Use a smaller font size.

Good fonts are something like trebuchet or helvetica.

-Center layout.
-Change font.
-Change font size. (Size 12)
-Use better graphics.

You can download a free css template and then modify it to your liking.
 

hladeks

New Member
Messages
6
Reaction score
0
Points
0
As your font size is pretty big as it is, I think it would still be legible on larger screens even without resizing. If you want to avoid your design getting stuck in upper left corner on bigger screens, why don't you just center it? Since your background is black, I think it shouldn't do any harm.

Resizing the image would result in quality loss anyway.

I'm sure somebody's already said this before, but it would be good to have your copy typed in instead of it being a part of an image, simply because that way you will have some searchable content. Plus it allows users to copy and save information on your site;)
 

nikogl

New Member
Messages
4
Reaction score
0
Points
0
Hey everybody,

I made a picture in photoshop which will serve as a rough template for my website. I was wondering if I could make the picture scale so that it fills the entire screen no matter what resolution your screen is. I know this is possible (I've seen it on other websites), but I have no clue how to do it.

www.slitharein.co.cc is my website.
Any extra comments on improving the background or other things are also welcome (especially colour schemes). I easily change all the colours etc.
I made sure to be able to do that.

Thanks in advance


in CSS
<
body{background-color:#000000}
.page{width:100%; background-image:url(path_to_img);}
>
 
Top