Fixed Webpage

design
#1

I’ve been testing with how to get the website from photoshopped, linked in NVU, then up onto the FTP server, which has worked out quite nicely, and I even made a test layout for this if you go there now. I’m not sure if you can help me with this, but I’ll give it a go. How do I automate my site to fit within the screen? I’ve tried making it smaller in photoshop, but then it’s not centered (which I don’t know how to do either), butI hate how it has the scrollbars to move it width wise (the vertical scrollbars don’t bother me as much :P).

I also looked at my website with a larger screen, and it scrolls exactly the same as it does on the laptop. How would I correct this?

My site is www.calebw.com

#2

You’d have to specify widths in percentages and not specify heights.

The table would need to be 100%
The table cells would need to be a percentage of the splash image width.
The images in the table cells would need to be 100%

Customer since 2000 :cool: openvein.org

#3

I’ve seen a number of approaches to this sort of layout. Probably the simplest, though, is to enclose the entire site in:

#4
#5

How do you get both if possible? I love how the second one scrolls, but not how the white space if fully visible, yet the non scroll one is more so “full screen” with no white space?

Thanks!

#6

It scales the images, not scrolls them. The splash image is scaled proportionately but not the header images. For some reason not all of those images would scale vertically to fill the table cell.

I neglected to specify a black background color, if that is what you meant by “white space” - what color it is depends on the browser default, mine is gray.

I’ve updated scale.html so that it uses a black background and eliminates margins and scrollbars. Unfortunately this layout is broken for anything less than IE 8 Standards mode.

center.html on the other hand uses the splash image as a background image instead of a separate image element. The header images aren’t scaled but they do slide to keep the relative position.

Customer since 2000 :cool: openvein.org

#7

IE5.5: bottom scrollbar
IE6: side + bottom
IE7: side only
IE8: appears like the “center” version (no scrollbars)
FF2: as above
FF3: as above

If you view the “scale” version with Opera you can mouse scroll the page if the picture is taller than your view window - but there are still no horizontal scrollbars messing up the look.

That’s a cool trick :cool:

Maximum Cash Discount on any plan with MAXCASH

How To Install PHP.INI / ionCube on DreamHost

#8

How would I do this?

I’m not to knowledgeable of HTML, and everything I know is by trial and error (which can get quite frustrating, I must say). I have the code, so what do I do to make it like that?

#9

Well there in lies the rub, as I did this by hand instead of using a WYSIWYG tool. Your best bet is to start new by saving my document to disk and open it up it NVU and try not to change anything that would alter the layout. NVU does have a panel where you can not only view but edit the source and you might need to utilize that. When you look at my source you can see I left the actual HTML markup unpolluted as much as possible and relying on the inline stylesheet instead.

Customer since 2000 :cool: openvein.org