A Digital Age Deserves A Digital Leader

web page size

web page size

Postby Xstream » Thu Jan 24, 2008 5:36 pm

I am currently building a website for someone and I used a template that is 764x778 seems like an odd size, here it is

<a href="http://img341.imageshack.us/my.php?image=siteso8.jpg" target="_blank"><img src="http://img341.imageshack.us/img341/7307/siteso8.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us"></a>

anyway, should I leave it that size and try to center it in the browser so that it has white margins on each side? or is there a way to make it full screen? made it all in photoshop, using slices.
thanks
PROfessional Member
User avatar
Posts: 3477
Joined: Fri Mar 15, 2002 2:30 am
Location: USA

Postby jaelanicu » Thu Jan 24, 2008 7:02 pm

IMO, since the template width is not dynamic, it's better to center the page and leave white borders around it using margins. This will make it looks like a magazine page.
"Righteous is always honorable, but honor is not always righteous." - Me ^_^
PRO Level 5
User avatar
Posts: 156
Joined: Wed Aug 11, 2004 6:19 pm
Location: Indonesia

Postby imnuts » Thu Jan 24, 2008 10:23 pm

is there anyway to stretch the background and center the content on the page? If not, then I'd go with the margins as I'd rather see equal margins over blank space on just one side.
Image
PRO SUPREME
User avatar
Posts: 7457
Joined: Wed Mar 24, 2004 5:19 am
Location: Boothwyn, Pennsylvania
Real Name: Mark

Postby Xstream » Thu Jan 24, 2008 10:41 pm

I could probably stretch the background, but the problem is that Im doing it in photoshop and then cutting it into slices, so basically all the html is image files.
I would love to make it stretch to fill the screen, but I dont think I know how,
as for centering the whole thing and having white borders on each side, I tried but didnt get my code right. Here is the html so far, if anyone can figure out how to center it, let me know ( Im not that good at coding )

Code: Select all
<html>
<head>
<title>Vintage Creations</title>
<meta>
</head>
<body>
<ImageReady>
<table>
   <tr>
      <td>
         <img src="images/main_01.jpg" width="766" height="60" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="60" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_02.gif" width="256" height="46" alt=""></td>
      <td>
         <img src="images/main_03.jpg" width="2" height="46" alt=""></td>
      <td>
         <img src="images/main_04.gif" width="508" height="46" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="46" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_05.gif" width="255" height="374" alt=""></td>
      <td>
         <img src="images/main_06.jpg" width="2" height="674" alt=""></td>
      <td>
         <img src="images/main_07.jpg" width="466" height="346" alt=""></td>
      <td>
         <img src="images/main_08.jpg" width="43" height="425" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="346" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_09.jpg" width="466" height="3" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="3" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_10.jpg" width="2" height="325" alt=""></td>
      <td>
         <img src="images/main_11.jpg" width="74" height="28" alt=""></td>
      <td>
         <img src="images/main_12.jpg" width="178" height="1" alt=""></td>
      <td>
         <img src="images/main_13.jpg" width="12" height="28" alt=""></td>
      <td>
         <img src="images/main_14.jpg" width="19" height="28" alt=""></td>
      <td>
         <img src="images/main_15.jpg" width="16" height="28" alt=""></td>
      <td>
         <img src="images/main_16.jpg" width="17" height="28" alt=""></td>
      <td>
         <img src="images/main_17.jpg" width="101" height="76" alt=""></td>
      <td>
         <img src="images/main_18.jpg" width="44" height="28" alt=""></td>
      <td>
         <img src="images/main_19.jpg" width="3" height="76" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_20.jpg" width="70" height="75" alt=""></td>
      <td>
         <img src="images/main_21.jpg" width="14" height="27" alt=""></td>
      <td>
         <img src="images/main_22.jpg" width="14" height="27" alt=""></td>
      <td>
         <img src="images/main_23.jpg" width="14" height="27" alt=""></td>
      <td>
         <img src="images/main_24.jpg" width="13" height="27" alt=""></td>
      <td>
         <img src="images/main_25.jpg" width="17" height="27" alt=""></td>
      <td>
         <img src="images/main_26.jpg" width="10" height="27" alt=""></td>
      <td>
         <img src="images/main_27.jpg" width="1" height="237" alt=""></td>
      <td>
         <img src="images/main_28.jpg" width="8" height="27" alt=""></td>
      <td>
         <img src="images/main_29.jpg" width="17" height="27" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="24" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_30.gif" width="255" height="300" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="3" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_31.jpg" width="74" height="48" alt=""></td>
      <td>
         <img src="images/main_32.jpg" width="82" height="210" alt=""></td>
      <td>
         <img src="images/main_33.jpg" width="89" height="48" alt=""></td>
      <td>
         <img src="images/main_34.jpg" width="44" height="48" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="48" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_35.jpg" width="15" height="162" alt=""></td>
      <td>
         <img src="images/main_36.jpg" width="107" height="127" alt=""></td>
      <td>
         <img src="images/main_37.jpg" width="22" height="162" alt=""></td>
      <td>
         <img src="images/main_38.jpg" width="2" height="162" alt=""></td>
      <td>
         <img src="images/main_39.jpg" width="278" height="162" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="127" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_40.jpg" width="107" height="35" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="35" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_41.jpg" width="1" height="87" alt=""></td>
      <td>
         <img src="images/main_42.jpg" width="506" height="46" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="46" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/main_43.jpg" width="506" height="41" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="41" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/spacer.gif" width="255" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="59" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="48" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="22" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="14" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="13" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="17" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="2" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="6" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="17" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="12" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="19" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="16" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="17" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="101" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="44" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="3" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="43" height="1" alt=""></td>
      <td></td>
   </tr>
</table>
<End>
</body>
</html>
PROfessional Member
User avatar
Posts: 3477
Joined: Fri Mar 15, 2002 2:30 am
Location: USA

Postby kanaloa » Thu Jan 24, 2008 10:55 pm

You could just center the first table. table align="center"

I wouldn't use tables if you don't have to. Tables are quickly going the way of the dodo. Div tags are MUCH better and more SEO.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: HI & SC
Real Name: John Derrick

Postby jaelanicu » Fri Jan 25, 2008 12:01 am

Wee...! The page width goes all the way to 2788 pixels. :lol:
"Righteous is always honorable, but honor is not always righteous." - Me ^_^
PRO Level 5
User avatar
Posts: 156
Joined: Wed Aug 11, 2004 6:19 pm
Location: Indonesia

Postby Xstream » Fri Jan 25, 2008 12:42 am

jaelanicu wrote:Wee...! The page width goes all the way to 2788 pixels. :lol:


it does? :shocked:
It only goes to 764

thanks John, I'll do that. ^*^
PROfessional Member
User avatar
Posts: 3477
Joined: Fri Mar 15, 2002 2:30 am
Location: USA

Postby kanaloa » Fri Jan 25, 2008 2:15 am

I meant to also say div's have a nice easy way to center them. I'm substituting the "<" with "{" below so the site doesn't think I'm coding, LOL

{div align="center"} YOUR STUFF {/div}

OR

{div style="margin:0 auto"} YOUR STUFF {/div}


The later is technically "better" because it's CSS styling.
"Greatness is not a function of circumstance. Greatness, it turns out, is largely a matter of conscious choice, and discipline." - Jim Collins
President
User avatar
Posts: 11795
Joined: Sun Mar 10, 2002 1:18 am
Location: HI & SC
Real Name: John Derrick

Postby jaelanicu » Fri Jan 25, 2008 2:24 am

Xstream wrote:it does? :shocked:
It only goes to 764

Strange... :eek: I copy & pasted your code snippet and tested it on both Opera 9.24 and Firefox 2.0.0.8 (even in IE). The page width does go up to 2700+ pixels.
"Righteous is always honorable, but honor is not always righteous." - Me ^_^
PRO Level 5
User avatar
Posts: 156
Joined: Wed Aug 11, 2004 6:19 pm
Location: Indonesia

Postby Xstream » Fri Jan 25, 2008 2:32 am

I'll have a live page up in a little while.
PROfessional Member
User avatar
Posts: 3477
Joined: Fri Mar 15, 2002 2:30 am
Location: USA

Next

Return to HTML, CSS, and Scripts

Who is online

Users browsing this forum: No registered users and 6 guests

cron
cron