-
Auto-resize website – possible?
I’m in desperate need of help with a website that I “newb-ly” created for a friend’s business. Long story short, I just found out this afternoon that I have to resize this whole website before this Saturday. If I have to start from scratch all over again, it’s 18-20 pages that I’d have to rebuild and I don’t know if it’s possible when I have a 9-5 day job. Is there a code I can use to make the webpage auto-resize on people’s browsers? I really need a temporary fix because my new web developer won’t have time to help me rebuild the whole site until next week. I keep looking around for a temporary code fix, but I can’t find anything that’s helpful.
Here is the website for reference: https://www.triteamtransport.com
I don’t know what I was thinking when I created the website. Made everything way too big. =( If I really have to rebuild everything from scratch, I guess I’ll have to buy myself a ton of Red Bull or something and work like a crazy lady to get it done by the deadline =/
-
2 Replies
-
you are in one hot mess.
no, you can’t do that, or I don’t know of any code I’ve ever ran across.I’ve copied the code for insurance.html and put it in my dreamweaver. I selected it all, made everything liquid ( percentages ) and made the images no wider than 900. My suggestion is to make sites for 1024 width, no larger. This would mean making all the images inside it smaller than 1024 to allow for the edges. All you have to do now is change the .jpg files smaller in width and adjust the width of them in the code. Idea: You can set the side images as background images for both end columns and make the columns 10% width each so they will size for the browser. When using %, All columns have to be in % form and equal up to 100% for the entire table. Don’t cross PX with %, and make SURE the % = 100% total width or you’re gonna have problems.
I’ve verified your code as well.
Here is the background code if you want to do that instead of placing the file in the template. You will put it in whatever table row/column you want.
style="background:#000000 url(/html/images.jpg) top right; "
or you can say top left , whatever you need.
You are going to have to also go in and set a background color for the tables and set the images to align left, right ect so when stretched, you don’t see the tables separate.
It seems like a lot of work, but I made these changes in a matter of 10min. You can use this as a template for the rest. You’re gonna waste time if you start over. Just take one page you have, spend time on it to adjust settings, then copy and paste for all the other pages.
Summery:
1. copy this code.2. Resize the image widths in photoshop, mirror the changes in the code
3. Set your background colors for the tables.
4. Set tables to percentages so they stretch, don’t mix PX and % for tables. If you pad or put in margins, they must also be in % format and added into the 100% equation.
5. put a transparent 1px X 1px image in empty tables to prevent a collapse ( or a non-breaking space. Can’t remember which is better )
6. I set the very bottom row to “no-wrap” so that when shrunk down, it doesn’t wrap. You can change if you wish.
Good Luck, Hope this gives you a boost.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Tri Team Transport - Insurance
<!--
.Tabs {
font-family: "Arial Narrow";
font-weight: bold;
font-style: italic;
text-align: center;
}
.Heading {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 34px;
font-weight: bold;
font-style: italic;
}
.RoundTrip {
font-family: "Arial Narrow";
text-align: center;
}
.EventLabels {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.EventLabels td {
text-align: center;
}
.EventLabels td {
text-align: justify;
font-weight: normal;
}
.Races {
font-family: Arial Narrow;
}
.Tentative {
font-style: italic;
}
.Races {
font-size: 16px;
}
.Races {
font-size: 18px;
}
.Races {
font-family: Arial, Helvetica, sans-serif;
}
.Tentative {
font-family: Arial, Helvetica, sans-serif;
}
.Welcome {
font-size: 23px;
font-weight: bold;
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: center;
}
.WelcomeNote {
font-family: Arial, Helvetica, sans-serif;
color: #000;
}
.WelcomeNote div {
text-align: justify;
font-family: "Arial Narrow";
font-style: italic;
}
.BottomTabs {
text-align: center;
}
.Copyright {
text-align: center;
font-family: "Arial Narrow";
font-style: italic;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Arial, Helvetica, sans-serif;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
AboutLetter {
font-style: italic;
}
.EventLabels td p {
font-family: "Arial Narrow";
}
.EventLabels td p {
font-style: italic;
}
.Letter {
font-style: italic;
font-family: "Arial Narrow";
}
.Insurance {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
}
.insurancebody {
font-family: "Arial Narrow";
}
.insurancebody {
font-style: italic;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 36px;
}
.insurancebody1 { font-family: "Arial Narrow";
}
.insurancebody1 { font-style: italic;
}
-->
Insurance:
There is no extra insurance cost if your bike and bag are valued at less than $3K.
If your bike and gear bag are valued between $3K-$5K, there will be a $10 charge for full insurance coverage for the round trip.
If your bike and bag are valued at $5K+, then full insurance coverage will be an additional $20 for the round trip.
Copyright 2010-2011 Tri Team Transport<!-- Start of StatCounter Code -->
var sc_project=6275974;
var sc_invisible=1;
var sc_security="3bf8e76b";
<!-- End of StatCounter Code --> -
Oh wow! Thank you so much for your help and for being so thorough with your explanation! I will give it a try… If all else fails, I did manage to find a friend at the last minute who can help me chug out these pages =) Thanks again!!!
Reply to this Discussion! Login or Sign Up