Website question

Discussion in 'HTML & Website Design' started by Evan B., May 8, 2008.

  1. #1
    Ok well I have about my website. Well when I view my site on a computer the home page is like its not the right size. Well what I want is it to be able to resize to you computer resolution. What would i have to do or put in to make that work. My site is www dot thielscollisioncenter dot com
    Please let me know thnx.
     
    Evan B., May 8, 2008 IP
  2. dashenman

    dashenman Active Member

    Messages:
    71
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    63
    #2
    Evan B. -

    I've viewed the page on my computer and it looks just fine. I really don't think the site code is the problem. I'm sure the situation for you is that the computer monitor resolution you were viewing the site on is set to a high resolution and your site appears smaller...

    If you access your computer Control Panel and then "Display" you can click on the "Settings" tab and set the monitor resolution to a lower "Less" setting to make the screen resolution more normal. You have to play around with it until you get it set to where you want it.

    Hope this helps!

    Steve
     
    dashenman, May 8, 2008 IP
  3. Evan B.

    Evan B. Peon

    Messages:
    118
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yea that is what I thought. But would you happen to have a code that makes it automatically changes the site? My screen is set at 1920x1200. Which is fricken huge.
     
    Evan B., May 8, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You mean, like this forum here at Digital Point? It's always the size of your screen : )

    For width, simply not setting one is the easiest way to make a page stretch even across a 26" monitor with 1800+ resolution (whether such a page on such a monitor is worth looking at, I dunno). The body is always 100% width. If there's a container around the web page, it would be a block element too, thus 100% width of the page, unless you restrict it by setting a width (I didn't look at the website, this just goes for everything).

    Height is more difficult. You can have a 100%-height model but it has to be done understanding that 100% means you can't add anything more to the height. No margins or padding or anything on the element that was set to 100% height. Except in IE6, cause it's stupid. IE lets things start at 100% and then grow. But Ie aside, other browsers assume 100% means 100% and will not let anything grow. So, you have to set it up right.

    Usually something like (pseudocode):
    doctype, head stuff
    <body>
    <container>
    <rest of page/>
    </container>
    <footer></footer>
    </body>

    CSS:

    * {
    margin: 0;
    padding: 0;
    }

    img {
    border: 0;
    }

    ul, li {
    list-style: none;
    }
    /**end reset*/

    html, body {
    height: 100%;
    }

    body {
    other stuff;
    position: relative;
    }

    #container {
    min-height: 100%;
    position: relative;
    }
    * html #container {
    height: 100%; /*IE6*/
    overflow: visible;
    }

    #footer {
    height: 2.5em; <--this number has to just be the same as
    margin-top: -2.5em;<-this number
    position: relative;
    overflow: hidden;
    }


    Footer gets pulled up over the bottom of the page (page is 100%,so you'd otherwise never be able to scroll down far enough to see the footer.

    Some pages look like ass with this technique. Not all designs are suited for it. But if you want the page to grow to meet the screen, this is pretty much what you do.

    There is an option, with the widths, to have a min and max width. Min width forces a scrollbar below a certain width which can preserve your layout. Max width can stop a design from looking stupid at super huge screens.

    IE6 of course does not understand min and max width-- there's a javascript solution and a trick using super thick borders, an extra container, and floats if JS isnt' your thing (you can find it, somewhere, at www.pmob.co.uk/temp )
     
    Stomme poes, May 8, 2008 IP
  5. lilac2

    lilac2 Peon

    Messages:
    367
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You cannot get it to resize your resolution, only your browsing window (with javascript) or you can make the page contents stretchy (with CSS).
     
    lilac2, May 9, 2008 IP
  6. Evan B.

    Evan B. Peon

    Messages:
    118
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Here is the script for the homepage.


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    	<head>
    				
    				<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
    		<title>Thiel's Collision Center - Chamberlain, SD</title>
    		<style type="text/css" media="screen">
    		<!--
    #clear  { top: -234px; left: -7px; width: 100px; height: 100px; visibility: visible; display: block }
    .Tech_copy { color: black; font-size: 11px; line-height: 15px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
    .Tech_head { color: black; font-weight: bold; font-size: 14px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
    .bighead   { color: maroon; font-weight: bold; font-size: 24px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
    .class     { color: black; font-size: 13px; line-height: 18px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
    .box { padding-left: 15px }
    .deals  { color: #800000; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
    .style6 {
    	font-size: 16px;
    	font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    	font-weight: bold;
    	color: #FF0000;
    }
    .style8 {color: black; font-size: 13px; line-height: 18px; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular; font-weight: bold; }
    .style9 {color: #660000}
    -->
    		</style>
    <bb:menulib c="0">
    <script type="text/javascript" src="GeneratedItems/menumachine.js"></script>
    </bb:menulib>
    	</head>
    
    	<body onLoad="void(0);" background="images/back.gif" STYLE="background-image: url(images/back.gif); background-repeat: repeat-x;" bgcolor="#890c08" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
    		<table width="779" border="0" cellspacing="0" cellpadding="0" align="center">
    			<tr height="32">
    				<td width="779" height="32"><img src="images/spacer.gif" alt="" height="28" width="1" border="0">
    				</td>
    			</tr>
    			<tr>
    				<td width="779" valign="top" align="left">
    					<table width="778" border="0" cellspacing="0" cellpadding="2" align="center" bgcolor="#ffe900">
    						<tr>
    							<td width="778" valign="top" align="left">
    								<table width="780" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
    									<tr>
    										<td valign="top" width="780">
    											<table width="780" border="0" cellpadding="5" align="center">
    												<tr>
    													<td colspan="3" valign="top"><img src="images/thielsmast.gif" alt="" height="155" width="769" usemap="#thielsmastc03a3301" border="0"><map id="ID" name="thielsmastc03a3301"><area shape="poly" coords="21,107,79,78,162,71,251,81,300,103,254,134,152,142,68,137" href="index.php" alt=""></map></td>
    												</tr>
    												<tr>
    													<td rowspan="2" colspan="3" valign="top"><img src="images/spacer.gif" alt="" name="locker" height="25" width="766" border="0"></td>
    												</tr>
    												<tr>
    													
    												</tr>
    											</table>
    										</td>
    									</tr>
    									<tr>
    										<td valign="top" width="780">
    											<table width="762" border="0" cellspacing="0" cellpadding="8" align="center">
    												<tr>
    													<td class="box" valign="top" height="282" style="background-image:url(images/backcrack.gif)">
    														<p><img src="images/store.gif" alt="" height="148" width="259" align="right" border="0"><span class="bighead">Welcome to Thiel's<br>
    
    															</span><span class="class">Accidents happen. Cars break down. Tires go flat. It's a fact of life. So where do you turn when it's your car in need of repair? Thiel's Collision Center's towing and wrecker service will get your car off the road. We repair or replace glass, refinish paint, perform alignments, and fix collision damage in a dependable, customer-friendly manner. If it's time to drive something new, we'll help you get your old classic ready to roll or put you in one of our vehicles from the lot. Stop in today and we'll give you a fair estimate for your vehicle. Thiel's Collision Center knows cars. Let us get to know you.<br>
    															</span></p>
    														<p><a class="deals" href="sales.php">Car Sales</a> <span class="class">Click here to view car sales.</span></p>
    														<p><a class="deals" href="employment.php">Employment Opportunities </a><span class="class">The latest job opportunities at Thiel's.</span></p>
    														<p><a class="deals" href="shelby.php">Shelby Restoration Project  </a> <span class="class">Click Here to view the Shelby</span></p>
    
    														<div>
    															<p><a class="deals" href="specialad.php">Thiel's Sure Deals </a><span class="class">Click here to view this month's special offer at Thiel's.</span></p>
    														</div>												  
    													</td>
    
                                                      </p></td>
    												  <td valign="top" bgcolor="#eeeeee">
    														<table width="64" border="0" cellspacing="0" cellpadding="0" style="background-image:url(images/midtech.gif)">
    															<tr>
    																<td><img src="images/techtop.gif" alt="" height="90" width="146" border="0"></td>
    															</tr>
    															<tr>
    																<td style="padding-right:15px; padding-left:15px"><agl:container>
    																  																  																																				<table width="113" border="0" cellspacing="0" cellpadding="0">
    																			<tr>
    																				<td><span class="Tech_head">Tires</span>
    																					<hr noshade width="100%">																				</td>
    																			</tr>
    																			<tr>
    																				<td><span class="Tech_copy">Be sure to check the pressure in your tires regularly.  The pressure changes with the tempurature.  Your tire pressure could change as much as 10% from winter to summer.</span></td>
    																			</tr>
    																		</table>
    																																																					</agl:container><span class="Tech_copy"><br>
    																		<br>
    																	</span></td>
    															</tr>
    															<tr>
    																<td><img src="images/bottech.gif" alt="" height="15" width="146" border="0"></td>
    															</tr>
    														</table>													</td>
    												</tr>
    											</table>
    											<table width="780" border="0" cellspacing="0" cellpadding="6">
    <tr><td><p align="center" class="class"> <!-- Begin BidVertiser code -->
    <SCRIPT LANGUAGE="JavaScript1.1" SRC="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=104406&bid=273620" type="text/javascript"></SCRIPT>
    												 
      <noscript>
      <a href="http://www.bidvertiser.com">internet marketing</a>
      </noscript>
      <!-- End BidVertiser code --> </td> </tr>											
    <tr>
    													<td><img src="images/bottomdrive.gif" alt="" height="57" width="766" border="0"></td>
    												</tr>
    											</table>
    										</td>
    									</tr>
    								</table>
    							</td>
    						</tr>
    					</table>
    				</td>
    			</tr>
    		</table>
    		<div id="bbML" style=" position: absolute; z-index: 1000; top: 202px; left: 87px; width: 782px; height: 39px; visibility: visible">
    			<bb:menu height="30" width="768" i="1" v="1.5"><script type="text/javascript"><!--
    bbL=bbMenu.length;bbMenu[bbL]=new _bbroot(bbL,"bbML",0,0,0,0,0,0,1,15,4,"","","",1,0,400,"locker","#DDDDDD",1,0,"Verdana,Geneva,Sans-serif",11,0,0,"left",5,5,0.05,0.2,0,"#DDDDDD",1,0,"Verdana,Geneva,Sans-serif",11,0,0,"left",5,5,0,0,0,/*URL*/"GeneratedItems/spacer.gif",0,0,5,5);
    /*begin_bbMenuDefs*/
    bbMenu[bbL].bM("bbMenu1","","servies",74,28,"",/*URL*/"images/services.gif",/*URL*/"images/services_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eronv","bbMenu1","Refinishing",96,25,/*URL*/"refinish.php","","","#dddddd","white","black","#880000","","","","",1);
    bbMenu[bbL].bM("m10eronw","bbMenu1","Restoration",96,25,/*URL*/"restore.php","","","#dddddd","white","black","#880000","","","","",1);
    bbMenu[bbL].bM("m10eronx","bbMenu1","Collision Repair",96,25,/*URL*/"collision.php","","","#dddddd","white","black","#880000","","","","",1);
    bbMenu[bbL].bM("m10erony","bbMenu1","Glass Repair & Replacement",96,40,/*URL*/"glass.php","","","#dddddd","white","black","#880000","","","","",1);
    bbMenu[bbL].bM("m10eronz","","Align",83,28,/*URL*/"align.php",/*URL*/"images/align.gif",/*URL*/"images/align_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo0","","Suspension",165,28,/*URL*/"suspension.php",/*URL*/"images/suspens.gif",/*URL*/"images/suspens_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo1","","Accessories",88,28,/*URL*/"accessories.php",/*URL*/"images/access.gif",/*URL*/"images/access_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo2","","Sales",80,28,/*URL*/"sales.php",/*URL*/"images/autosale.gif",/*URL*/"images/autosale_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo3","","Towing",59,28,/*URL*/"towing.php",/*URL*/"images/tow.gif",/*URL*/"images/tow_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo4","","Certified",100,28,/*URL*/"certified.php",/*URL*/"images/certified.gif",/*URL*/"images/certified_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo5","","Faq",41,28,/*URL*/"faq.php",/*URL*/"images/faq.gif",/*URL*/"images/faq_over.gif","white","black","navy","white","","","","",0);
    bbMenu[bbL].bM("m10eroo6","","About",76,28,/*URL*/"about.php",/*URL*/"images/about.gif",/*URL*/"images/about_over.gif","white","black","navy","white","","","","",0);
    /*end_bbMenuDefs*/
    bbMenu[bbL].buildLayers();
    //-->
    </script></bb:menu></div>
    	</body>
    
    </html>
    Code (markup):
     
    Evan B., May 9, 2008 IP
  7. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    if you can edit that post, put all that html into a
    code block
    Code (markup):
    by using bbcode (code)(/code) use [ instead of ( and ] instead of )
     
    X.Homer.X, May 9, 2008 IP
  8. zuccs

    zuccs Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Read up on fluid (or elastic) website layouts.

    Getting the resolution of each user and then resizing is a bit messy. And you will run into problems anyway if a user has javascript turned off...
     
    zuccs, May 10, 2008 IP