Fixed Webpage

Fixed Webpage

Posted by: CalebDWynn
Posted on: 2009-10-19 11:43:00

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

Re: Fixed Webpage

Posted by: Atropos7
Posted on: 2009-10-19 15:04:00

In reply to:

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).


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

Re: Fixed Webpage

Posted by: andrewf
Posted on: 2009-10-19 15:15:00

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

<table border="0" width="100%" height="100%"><tr><td align="center" valign="middle">


Re: Fixed Webpage

Posted by: Atropos7
Posted on: 2009-10-19 17:09:00

In reply to:

<table border="0" width="100%" height="100%"><tr><td align="center" valign="middle">


Might as well use that and nest tables.

I'm not sure what the desired effect is anyways, I came up with two layouts:

http://atropos.openvein.org/calebw/center.html
http://atropos.openvein.org/calebw/scale.html






Customer since 2000 cool openvein.org

Re: Fixed Webpage

Posted by: CalebDWynn
Posted on: 2009-10-19 17:20:00

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!

Edited by CalebDWynn on 10/19/09 05:22 PM (server time).

Re: Fixed Webpage

Posted by: Atropos7
Posted on: 2009-10-19 22:39:00

In reply to:

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?


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

Re: Fixed Webpage

Posted by: sXi
Posted on: 2009-10-19 23:01:00

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




How To Install PHP.INI / ionCube on DreamHost

Re: Fixed Webpage

Posted by: CalebDWynn
Posted on: 2009-10-21 06:03:00

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?

Re: Fixed Webpage

Posted by: Atropos7
Posted on: 2009-10-21 06:27:00

In reply to:

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?


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

Re: Fixed Webpage

Posted by: getthegirlfriend
Posted on: 2009-10-23 08:32:00

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?

(link spam removed, and user banned - not welcome here)
Edited by rlparker on 10/23/09 03:59 PM (server time).

Re: Fixed Webpage

Posted by: yogasupplies1
Posted on: 2009-10-23 23:17:00

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?

(link spam removed, user banned)Edited by rlparker on 10/24/09 10:51 AM (server time).

Tags: nvuftp serverlaptop