Website width

[kronos]

Sorry to bother you all, extreme HTML newbie here ....

I recently purchased a premade website from 4templates.com, here is the link to the site I acquired here. Now, being the dork that I am, I didn't question the sites ability to fill fullscreen, and realised post purchase, that I had a limited width site, which sort of doesn't suit my needs. Before purchasing one that does, is there a way to make this adjust to screen res automatically?.

The index file is located here for anyone to have a look at, sorry you will have to use the "view page source" function to see it.

Would greatly appreciate any help/suggestions
thank you

[Narue]

Can you post the contents of main.css? It looks like the page uses the relative div with auto margins trick. If that's the case, then you'll see something like this:

div#wrapper {
  position:relative;
  width:70%;
  margin-left:auto;
  margin-right:auto;
}

Change width from whatever it is to 100%, that should fix your problem if I understand it correctly.

[JoetjeF]

Search the index.html file for width="763". Change it to width="100%". But I don't think it will look pretty as it seems that the page is build for a fixed width.

[kronos]

CSS file is here , it does not appear to have any width references.

The width 100% trick works, however like you said, with the whole thing being built on tables, it will require some time to fix the mess it makes.

Thanks for the replies so far.

[Narue]

>it does not appear to have any width references.
Nevermind, the layout is table driven. JoetjeF's suggestion will serve you better.

[rus]

Some development tools, such as Dreamweaver will allow you to do a find & replace of code in an entire page and an entire site. This could make changing that code much quicker.

[kronos]

Thanks troops, but when I said I was an html newbie, I was not kidding, I understand the fundamental building blocks, but really have no clue what so ever as to the workings of programs like dreamweaver etc, and I think I will have to just purchase a fullscreen site, I just "don't have the powerrrr"

I have dreamweaver, and attempted to convert width measures to percent, but it did nothing, so I sort of got pee'd off, and had a hissy fit, then stopped, and had a cigarette to calm me down.

Its a pity, because the one I have was the best layout. This will teach me to make wiser decisions before purchasing things.

[rus]

Breathe... exhale... breathe... exhale...

Understandable, that's why we are all here. When you changed the width from absolute (a defined number like 800 pixels) to percentage it was probably only in the <table width=...> tag. If the table cells (the tag is <td>) has the width predefined as absolute, the you can chage your table to what ever you want and it won't make a difference. I should have mentioned this when I gave you the Dreamweaver advise.

Anyhow, if you have more time than money (like a lot of us) and want to dig a little deeper, you could figure out what the percentage would be for each of the table cells and do the same find/replace.

[Narue]

>I just "don't have the powerrrr"
You can't look through a text file and change 763 to 100%? :rolleyes:

[kronos]

Thanks Rus, I will look into that tonight, I had another play last night, and got the page to go to screen res width, but the top nav bar buttons would not work, and stayed bunched up on the left of the screen.

Do I need to tag the cells of each of these, to a set %, so if there is 8 buttons up there, set the percentage to 100 / 8 (12.5% ea)?

Narue, I found that tag that just had the width in pixels, and tried changing it to 100%, but it only expanded certain aspects of the site, and left others in the old size.

[rus]

I wouldn't change the width of the button TDs, look and see if that is a nested table (a table within a table). If so, the nested table will be inside of it's own TD, just align that to the right, center, or whatever looks best.

[kronos]

Thanks rus, I'll give that a whirl tonight

[kronos]

This is where the main nav button HTML starts, but I dont know which of the tables to mess with, as every second line is <td>

<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="i/a46.jpg" width="31" height="43"></td>

<td>
<img src="i/a48.jpg" width="2" height="43"></td>
<td>
<a href="#"
onmouseover="changeImages('l1', 'i/l1-over.jpg'); return true;"
onmouseout="changeImages('l1', 'i/l1.jpg'); return true;">
<img name="l1" src="i/l1.jpg" width="107" height="43" border="0"></a></td>
<td>
<img src="i/a48.jpg" width="3" height="43"></td>
<td>
<a href="#"
onmouseover="changeImages('l2', 'i/l2-over.jpg'); return true;"
onmouseout="changeImages('l2', 'i/l2.jpg'); return true;">
<img name="l2" src="i/l2.jpg" width="107" height="43" border="0"></a></td>
<td>
<img src="i/a48.jpg" width="3" height="43"></td>