How to expand website width via tables?

Topics: Developer Forum, Localization Forum, Project Management Forum, User Forum
Mar 9, 2009 at 3:45 AM

Hello again, rather than doing a few days work researching how to do it myself, I’m just asking if anyone has already done it (thus saving me time). I have a nice website that is based on the Swish Violet theme and it uses the latest version of files. I have in the past gone in and tweaked a couple of websites and simply made them a little wider than they originally were, however if not done correctly can break parts like the menu’s etc.

 

What I want to do is to use the full width of the screen, regardless of size via the use of tables for this website: http://tailwag.info/homepage.aspx naturally I don’t want to break it, but I would like it to use all the available screen size.

 

If someone has done this, can you list for me all the pages that require changes, I know from what I did the last time that there are several spots that need to be changed plus artwork needs to be modified accordingly as well. I’m just trying to not have to reinvent the wheel here, so if you’ve done it, can you please share with me exactly how to do it. Code snippets for the affected pages would also be most welcome.

 

Thanks in advance.

Ron

Mar 13, 2009 at 1:40 AM
Edited Mar 13, 2009 at 1:41 AM
Hi,

I only downloaded this application about an hour ago, but I am amazed at the simplicity and flexibility of the whole thing.  It appears well constructed, and I will get some good use of it.

To your specific question, you should go into the App_Themes/SwishViolet/PageLayout.css file and edit the width of the wrapper / header etc. from a fixed px size to 100%.  The whole site runs on css, you shouldn't need to modify a whole bunch of aspx pages.  Of course, understand this is a first glance answer, but it appears to work this way.  You may need learn a little CSS to perfect your site.  Good luck.

Mar 13, 2009 at 3:28 AM

Hi, yeah, I did that to one site more than a year ago and it more-or-less worked, I had to modify artwork sizes and a couple of other things to make it look good. Then I tried the same type of modification of a different theme and it didn’t work at all. Most of the components are fixed sizes (the modules you use) and just because the outer edges of the page are wider, you still have the regular sizes on that page and it just doesn't look good. For example, there is a maximum width size you can have an image, if you go larger it goes outside the design and forces horizontal scroll bars. If you make the whole page wider (as you have suggested) the page of course will be wider (it will occupy 100%) of available screen size, but the image will still only have the old maximum size and you will need to go and programmatically enlarge it.

My point is just making the page wider does nothing to maintain the ration of balance between the component parts within the page. You need to enlarge the header image, widen the side menus, and so on, in other words, redo the entire website from scratch.

So what I was asking for was a simple way of increasing the actual website i.e. everything in ratio or proportion, not just the width of the page. I guess that if the designers could build in an option where you selected not only the theme you wanted but also the screen resolution of the theme you desired, then it would be easier, because the different size folders would contain all the changes preordained and no reworking would be required. Surely these days we can all start at 1024 x 768 as the base size and then go up from there.

Anyway, thanks for your reply Ryan, perhaps as you become more adept at working through this type of system you might see ways to shortcut the extra work, but trust me there is more to making it look good than just changing a fixed width for a percentage. Best of luck to you my friend.

Mar 13, 2009 at 1:11 PM
Interesting, so you want the page to SCALE according to page width?  I mean, you can't resize everything too big in case someone has a standard resolution, most stuff is done 1024x768 in mind right?

Do you have any examples of websites that scale the fonts and images according to the width of the browser window?  We've seen the zoom capability of the browser, but does the site actually scale?
Mar 14, 2009 at 1:05 AM
Hi Ryan,

It used to be 1024 x 768 but most laptops these days are in the 1200's so just when you thought it was safe to declare a certain size as 'Most' - think again, I guess this is just part of the never ending evolution of the contraption in the first place.

The scaling thing has been going on for years but it was done via a trick, i.e. a sniffer that would sense what resolution you had and then present one of any number of prepared websites (this was a lot of work) but it was a solution of sorts. Today you could do the same thing with this technology, it would just mean fattening up the download because of the extra folders with duplicated contents of varying sizes.

Some might say this is a lazy way of coding and I say is there any other way???? Hey, any site that requires less keystrokes has got my vote :-)