Help with sizing down webpage [Archive]

jbrowne23

06-14-2008, 03:27 PM

Hey everyone,
I have a page I'm working on that is huge on a 1024x768 monitor but looks great on 1280x*** monitors. This page was a template and I need to size it down so that users dont have to scroll to the right to see the entire page on a 1024x768 monitor. I have tried sizing down the css width but it didnt work. Pleeease help! The script is below:

-----------------------------------------------------
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></meta>
<meta name="keyword" content=""></meta>
<meta name="description" content=""></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<meta name="Keywords" content=""></meta>

<link rel="stylesheet" type="text/css" href="code/biology.css" />

<title></title>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>

<body>

<div id="envelope">

<table width="1100" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>

<div id="leftcolumn-top">



</div>

<div id="leftcolumn-home">
<div id="genericwrap">



<span class="green">Schloarships<br />& Fellowships<br /></span>
<span class="black">Undergraduate<br />
<a href="#">SCHOLARSHIP OPPORTUNITIES</a>
<br /> <br />
07/08 <a href="#">GRADUATE SCHOLARSHIP</a> from Idaho Trout Unlimited <a href="#">APPLICATION</a> due Dec. 1, 2007. <br /> <br />
</span>
<span class="black"><a href="#"><img src="images/get_reader.gif" /></a></span>



</div>
<p> </p>
</div>

<div id="centralcolumn-top">



<img src="images/bob_w_hawk.jpg" width="580" height="384">



</div>

<div id="centralcolumn-home">

<p>


<span class="biggreen">Welcome to the Department of Biology</span>


</p>
<p>Enter a welcome message and other information about the Dept. of Bio.</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab style8" tabindex="0">News</li>
<li class="TabbedPanelsTab style6 style8" tabindex="0">Events</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<ul>
<li class="style4"><a href="#">Women making history</a></li>
<li class="style4"><a href="#">2008 Foundation Scholars Award</a></li>
<li class="style4"><a href="#">Accomplished under 40 honorees</a></li>
</ul>
</div>
<div class="TabbedPanelsContent style4">
<ul>
<li><a href="idahobotforay.shtml">Idaho Botanical Foray</a></li>
</ul>
</div>
</div>
</div>
<p>  </p>
</div>

<div id="rightcolumn-top">



</div>

<div id="rightcolumn-home">
<div id="genericwrap">

<p>


<span class="green">Internships & Jobs<br />
</span>
<span class="black"><a href="#">2008 POSITIONS</a><br />
Last updated on 5/21/08</span></p>
<p class="black">See full job & internship list <a href="internships.shtml">here</a>.</p>
<p><span class="green">Seminars</span></p>
<p><span class="black"><a href="#">VIEW SEMINAR SCHEDULE</a><br />
Contact department if you would like to be added to the seminar email list.<br />
</span>


</p>
</div>
</div>

<div id="header">



</div>

</td>
</tr>
</table>
</div>

<script type="text/javascript">

</script>
</body>
</html>

chasery

06-14-2008, 05:11 PM

<table width="1100" cellpadding="0" cellspacing="0" align="center">

Change the width to like 800px or 100%. 100% will stretch the table to the resolution of the usable screen where as the 800px will set it to be exactly that in every resolution you view in.

I also just noticed there is an external stylesheet. Could you post the code from that?

jbrowne23

06-15-2008, 03:54 PM

hey thanks, the stylesheet code is below:

-------------------------------------------------------
/* CSS for Department of Biology */

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
text-align:left;
background: #FFFFFF;
background-position: top center;
background-image:url(../images/blank.gif);
background-repeat: repeat-x;
margin: 0 auto;
width: 1100px;
border-left-style: solid;
border-left-color: #333333;
}

#envelope { /* Envelopes page to help maintain content layout */
position: absolute;
width: 200px;
text-align:left;
border-left-style: none;
border-left-color: #333333;
border-left-width: medium;
color: #000000;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: 200px;
}

#leftcolumn-top { /* Positioning of lefthand column -- Global Top of Page */
position: absolute;
margin-top: 30px;
margin-left: 0px;
margin-bottom: auto;
width: 250px;
height: 394px;
z-index:10;
overflow:hidden;
}

#centralcolumn-top { /* Positioning of middle column -- Global Top of Page */
position: absolute;
margin-top: 30px;
margin-left: 250px;
margin-bottom: auto;
width: 600px;
padding: 10px 10px 10px 10px;
z-index:11;
}

#rightcolumn-top { /* Positioning of righthand column -- Global Top of Page */
position: absolute;
margin-top: 30px;
margin-left: 850px;
margin-bottom: auto;
width: 250px;
z-index:12;
height: 394px;
overflow: hidden;
left: 0px;
top: -1px;
}

#leftcolumn-home { /* Positioning of lefthand column -- Home Page Bottom */
position: absolute;
margin-top: 435px;
margin-left: 0px;
margin-bottom: auto;
width: 248px;
height: 300px;
border-right: 2px solid #000066;
z-index:15;
}

#centralcolumn-home { /* Positioning of middle column -- Home Page Bottom */
position: absolute;
margin-top: 420px;
margin-left: 250px;
margin-bottom: auto;
width: 600px;
padding: 10px 10px 10px 10px;
z-index:16;
}

#rightcolumn-home { /* Positioning of righthand column -- Home Page Bottom */
position: absolute;
margin-top: 435px;
margin-left: 850px;
margin-bottom: auto;
width: 200px;
height: 300px;
border-left: 2px solid #000066;
z-index:17;
left: 12px;
top: -1px;
}

#blocks { /* Assists with Layout of Multi-column Page */
display: table;
position: absolute;
width: 1000px;
margin-top: 435px;
margin-left: 0px;
z-index: 19;
height: 500px;
}

#blocks2 { /* Assists with Layout of Multi-column Page */
display: table;
width: 850px;
z-index: 19;
}

#blocks3 { /* Assists with Layout of Multi-column Page */
display: table;
width: 850px;
z-index: 19;
}

#blocks-row { /* Assists with Layout of Multi-column Page */
display: table-row;
}

#blocks-row2 { /* Assists with Layout of Multi-column Page */
display: table-row;
}

#blocks-row3 { /* Assists with Layout of Multi-column Page */
display: table-row;
}

#leftcolumn-three { /* Positioning of left-column content -- Three Column */
display: table-cell;
vertical-align: top;
width: 210px;
padding: 0px 20px 50px 20px;
background-color: #ABB573;
z-index:19;
}

#midcolumn-three { /* Positioning of mid-column content -- Three Columns */
display: table-cell;
width: 385px;
padding: 0px 20px 0px 20px;
z-index:19;
}

#rightcolumn-three { /* Positioning of rightcolumn content -- Three Columns */
display: table-cell;
width: 385px;
padding: 0px 20px 0px 20px;
z-index:19;
}

#col-span { /* Positioning of right-side two-column span -- Three Columns */
display: table-cell;
width: 810px;
padding: 0px 20px 0px 20px;
z-index:19;
}

#leftcolumn-two { /* Positioning of left-column content -- Two Column */
display: table-cell;
vertical-align: top;
width: 510px;
padding: 0px 20px 0px 20px;
z-index:19;
}

#rightcolumn-two { /* Positioning of right-column content -- Two Column */
display: table-cell;
vertical-align: top;
width: 510px;
padding: 0px 20px 0px 20px;
z-index:19;
}

#header { /* Top-panel links to map, index, etc. -- Global Top of Page */
margin-top: 0px;
margin-left: 0px;
background-color: #000066;
height:19px;
width:1100px;
border-top: 7px solid #000066;
}

#bsulogo { /* BSU Logo & Link -- Global Top of Page */
float: none;
margin: 0px 0px 0px 0px;
}

#bsulogospacer { /* Right-hand Spacer Opposite BSU Logo -- Global Top of Page */
float: none;
margin: 0px 0px 0px 0px;
}

#bsunav { /* Cosmetics for top-panel links to map, index, etc. -- Global Top of Page */
float:right;
font-size:11px;
font-weight: normal;
}

#contact { /* Positioning of Contact Box -- Global Top of Page */
width: 250px;
height: 300px;
line-height: 14px;
padding: 15px 15px 15px 15px;
background-color: #000066;
}

#menu { /* Positioning of Main Menu -- Global Top of Page */
width: 250px;
height: 300px;
line-height: 14px;
padding: 22px 0 0 0;
background-color: #000066;
}

#menu ul { /* Menu Cosmetics -- Global Top of Page */
margin: 0px;
padding: 0px;
list-style-type: none;
}

#menu li { /* Menu Cosmetics */
margin: 0px 0px 0px 0px;
padding: 0px;
border-bottom: 4px solid #000066;
border-top: 4px solid #000066;
}

#menu a { /* Menu Cosmetics -- Global Top of Page */
display: block;
width:232px;
padding: 2px 4px 2px 14px;
text-decoration: none;
}

#menu a:link, #menu a:active, #menu a:visited { /* Menu Cosmetics -- Global Top of Page */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
background: #00246B;
}

#menu a:hover { /* Menu Cosmetics -- Global Top of Page */
background: #1F60A9;
color: #FFFFFF;
}

#contact a:link, #contact a:visited { /* Menu Cosmetics -- Global Top of Page */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
background: #000066;
text-decoration: underline;
}

#contact a:hover { /* Menu Cosmetics -- Global Top of Page */
color: #1F60A9;
text-decoration: underline;
}

#header a:link, #header a:visited { /* Menu Cosmetics -- Global Top of Page */
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: normal;
background: #000066;
text-decoration: none;
}

#header a:hover { /* Menu Cosmetics -- Global Top of Page */
color: #1F60A9;
text-decoration: none;
}

#genericwrap { /* Generic Wrapper to add margins to a block */
padding: 0px 15px 0px 15px;
}

a:link { /* Standard Link */
font-family: Arial, Helvetica, sans-serif;
color: #000066;
text-decoration: underline;
}

a:visited { /* Standard Link */
color: #000066;
text-decoration: underline;
}

a:hover { /* Standard Link */
color: #1F60A9;
text-decoration: underline;
}

.right {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: normal;
background: #000066;
}

.black {
color: #000000;
font-size: 12px;
font-weight:normal;
}

.white {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
}

.smallgreen {
color: #319400;
font-size: 12px;
font-weight:normal;
}

.green {
font-size: 24px;
font-weight: normal;
width: 1015px;
}

.biggreen {
color: #319400;
font-size: 34px;
font-weight: normal;
width: 1015px;
}

.left {
font-size: 100%;
}

.bigbold {
color: #000000;
font-size: 16px;
font-weight:bold;
}

.bigboldw {
color: #FFFFFF;
font-size: 14px;
font-weight:bold;
}

.biggerbold {
color: #000000;
font-size: 18px;
font-weight:bold;
}

.biggerboldw {
color: #FFFFFF;
font-size: 18px;
font-weight:bold;
}

h1 {
color: #CD9701;
font-size: 16px;
font-weight:bold;
}

h2 {
margin: 0 0;
font-size:11px;
font-weight:normal;
}

h3 {
color:#000066;
font-size:70%;
font-weight:bold;
margin: 0px 0 5px 10px;
}

h5 {
color:#3399cc;
font-size:90%;
font-weight:bold;
margin: 0 0 0 0px;
}

h6 {
color:#FFFFFF;
font-size:85%;
font-weight:500;
margin: 0 0 0 0px;
}

img {
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
}

chasery

06-15-2008, 04:09 PM

The way this generic page page is set up is rather sloppy. Its going to take you a while to go through that css document and change all of the widths in there as well. Read the titles of all of those column sections and just start doing the math.

If you set the containing div's width to 800px, than left column + center column + right column <= 800px.

Just start playing around with it, make sure to make a duplicate of the file so in case you screw it up, you can go back. :)

P.S. Go through and read all of the elements in there. There are boxes and what not that have widths, they will be sitting in those newly adjusted divs. once again, if your containing div is smaller than the items within that div, it can cause alignment and breaking issues within your html document.