mufonix
04-03-2007, 08:36 PM
I know very little about web design so bare with me if you will. My boss asked me to create a site for our organization and I am running into two problems with centering the layout. Also, if anyone has general tips on how I might structure my coding in a better way, I am really interested in learning. (I will post all the code at the bottom of this thread)
Here is the page to give you an idea
http://www.accwt.org/newsite2/index.html
Problem 1:
The actual column centering works fine in firefox and the shadowed wrap appears as it should be. However, when I load the page in IE the whole thing is shifted to the left slightly and the wrap does not show up. Is there a solution for this?
Problem 2:
In my initial site design, http://www.accwt.org/newsite/index.html I had no problem aligning the links to the links to the lower right side of the header. Now--with this centered format, I can not come up with a solid way of getting the links to align where and how I would like them to. Is there something I can do better to fix this problem?
Here is the coding for the HTML document
<!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">
<head>
<title>ACCWT Home Page</title>
<link rel="stylesheet" type="text/css"
href="centerlayout.css" />
<link rel="stylesheet" type="text/css"
href="centerpresentation.css" />
</head>
<body>
<!-- This is the main wrapper, it is an essential design element for the overall page, do not edit -->
<div id="wrapper">
<!-- All Items in the header are placed here. Do not edit unless you are adding or removing links! -->
<div id="header">
<div id="imagepadding" style="padding:2px 3px 0 5px;">
<img src="images/accwt.jpg" align="left" />
</div>
<span class="header">
Appalachian Coal Country
</span><br />
<span class="subheader">
Watershed Team</span>
<div id="links">
<span class="class1"><a href="index.html">Introduction</a></span> |
<span class="class1"><a href="goals.html">Goals</a></span> |
<span class="class1"><a href="volunteer.html">Volunteer</a></span> |
<span class="class1"><a href="sponsor.html">Sponsor</a></span> |
<span class="class1"><a href="projects.html">Projects</a></span>
</div>
<span class="sublinks">
<span class="class2"><a href="staff.html">Staff</a></span> |
<span class="class2"><a href="contact.html">Contact</a></span> |
<span class="class2"><a href="#">OSM Vista Site</a></span> |
<span class="class2"><a href="#">Vistaweb</a></span>
</span>
</div>
<!-- items in the left navigation bar go here -->
<div id="leftbar">
<div id="leftsub">
<div id="leftsubhead">
What's New
</div>
<div id="leftsubbody">
>> ACCWT Now on Youtube!<br />
>> Read More<br />
<br />
>> Announcing the 2007 Clean Streams Practicum<br />
>> Read More<br />
</div>
</div>
<div id="leftsub">
<div id="leftsubhead">
What are we doing?
</div>
<div id="leftsubbody">
<div id="staffimage" style="margin-right:auto; margin-left:auto; text-align: center; padding:5px 0 5px 0;">
<img src="images/index/staff.jpg" align="center" />
</div>
>>Learn More!
</div>
</div>
<div id="leftsub">
<div id="leftsubhead">
Search
</div>
<div id="leftsubbody">
<form id="searchbox_001600415084708438663:aw5t-jh_gg0" action="http://www.google.com/search">
<input type="hidden" name="cx" value="001600415084708438663:aw5t-jh_gg0" />
<input type="hidden" name="cof" value="FORID:0" />
<input name="q" type="text" size="20" /><br />
<input type="submit" name="sa" value="Search" />
</form>
</div>
</div>
</div>
<div id="content">
</div>
</div>
<body>
</body>
</html>
The CSS for the page structure
body {
margin: 0;
padding: 0;
background-color: #E8E8E8;
font-family: Georgia, "Times New Roman", Times, serif;
background-image: url(images/wrap.jpg);
background-repeat: repeat-y;
background-position: center;
text-align: center;
}
#wrapper{
width: 790px;
background-color:#FFFFFF;
height: 1200px;
margin: 0 auto;
}
#header{
width: 790px;
background-color:#03529D;
height: 85px;
text-align: left;
}
/* left bar */
#leftbar{
background-color:#DEDEDE;
width:215px;
float: left;
padding-bottom:5px;
margin-top: 10px;
margin-left: 10px;
}
#leftsub{
background-color: #ffffff;
width: 201px;
margin:6px 6px 0px 6px;
border: 1px solid #C2C2C2;
}
#leftsubhead {
text-align: center;
color: #ffffff;
background-color: #FA891E;
width: 193px;
margin: 3px 3px 0px 3px;
height: 19px;
border-left: 1px solid #FA891E;
border-right: 1px solid #FA891E;
}
#leftsubbody{
text-align: left;
background-color: #ffffff;
width: 193px;
margin: 0px 3px 2px 3px;
border-left: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
border-bottom: 1px solid #C2C2C2;
}
/* left bar end */
#content{
background-color:#FFFFFF;
float: left;
width: 540px;
border: 1px solid #E8E8E8;
margin: 10px 10px 0 0;
text-align: left;
}
The CSS for the page design elements.
/* CSS Document */
/* general fonts and global design features */
h1 {
padding: 0;
margin: 0;
}
h2 {
padding: 0;
margin: 0;
}
h3 {
padding: 0;
margin: 0;
}
h4 {
padding: 0;
margin: 0;
}
h5 {
padding: 0;
margin: 0;
}
.class1 A:link {text-decoration: none; color: white;}
.class1 A:visited {text-decoration: none; color: white;}
.class1 A:active {text-decoration: none; color: white;}
.class1 A:hover {text-decoration: underline; color: white;}
.class2 A:link {text-decoration: none; color: #0A9AE1;}
.class2 A:visited {text-decoration: none; color: #0A9AE1;}
.class2 A:active {text-decoration: none; color: #0A9AE1;}
.class2 A:hover {text-decoration: underline; color: #0A9AE1;}
.cfont1 {
font-weight: normal;
}
.imgright {
float: right;
margin: 2px;
}
.imgleft{
float: left;
margin: 2px;
}
/* header */
.header{
font-size: 29px;
font-weight: bold;
color: #FFFFFF;
position: absolute;
margin-top: 5px;
margin-left: 5px;
}
.subheader{
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
position: absolute;
margin-top:19px;
margin-left: 5px;
}
#links {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
position: absolute;
margin-top: 48px;
margin-left: 350px;
}
.sublinks {
color: #0A9AE1;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 10px;
position: absolute;
margin-left: 405px;
margin-top: 35px;
}
Here is the page to give you an idea
http://www.accwt.org/newsite2/index.html
Problem 1:
The actual column centering works fine in firefox and the shadowed wrap appears as it should be. However, when I load the page in IE the whole thing is shifted to the left slightly and the wrap does not show up. Is there a solution for this?
Problem 2:
In my initial site design, http://www.accwt.org/newsite/index.html I had no problem aligning the links to the links to the lower right side of the header. Now--with this centered format, I can not come up with a solid way of getting the links to align where and how I would like them to. Is there something I can do better to fix this problem?
Here is the coding for the HTML document
<!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">
<head>
<title>ACCWT Home Page</title>
<link rel="stylesheet" type="text/css"
href="centerlayout.css" />
<link rel="stylesheet" type="text/css"
href="centerpresentation.css" />
</head>
<body>
<!-- This is the main wrapper, it is an essential design element for the overall page, do not edit -->
<div id="wrapper">
<!-- All Items in the header are placed here. Do not edit unless you are adding or removing links! -->
<div id="header">
<div id="imagepadding" style="padding:2px 3px 0 5px;">
<img src="images/accwt.jpg" align="left" />
</div>
<span class="header">
Appalachian Coal Country
</span><br />
<span class="subheader">
Watershed Team</span>
<div id="links">
<span class="class1"><a href="index.html">Introduction</a></span> |
<span class="class1"><a href="goals.html">Goals</a></span> |
<span class="class1"><a href="volunteer.html">Volunteer</a></span> |
<span class="class1"><a href="sponsor.html">Sponsor</a></span> |
<span class="class1"><a href="projects.html">Projects</a></span>
</div>
<span class="sublinks">
<span class="class2"><a href="staff.html">Staff</a></span> |
<span class="class2"><a href="contact.html">Contact</a></span> |
<span class="class2"><a href="#">OSM Vista Site</a></span> |
<span class="class2"><a href="#">Vistaweb</a></span>
</span>
</div>
<!-- items in the left navigation bar go here -->
<div id="leftbar">
<div id="leftsub">
<div id="leftsubhead">
What's New
</div>
<div id="leftsubbody">
>> ACCWT Now on Youtube!<br />
>> Read More<br />
<br />
>> Announcing the 2007 Clean Streams Practicum<br />
>> Read More<br />
</div>
</div>
<div id="leftsub">
<div id="leftsubhead">
What are we doing?
</div>
<div id="leftsubbody">
<div id="staffimage" style="margin-right:auto; margin-left:auto; text-align: center; padding:5px 0 5px 0;">
<img src="images/index/staff.jpg" align="center" />
</div>
>>Learn More!
</div>
</div>
<div id="leftsub">
<div id="leftsubhead">
Search
</div>
<div id="leftsubbody">
<form id="searchbox_001600415084708438663:aw5t-jh_gg0" action="http://www.google.com/search">
<input type="hidden" name="cx" value="001600415084708438663:aw5t-jh_gg0" />
<input type="hidden" name="cof" value="FORID:0" />
<input name="q" type="text" size="20" /><br />
<input type="submit" name="sa" value="Search" />
</form>
</div>
</div>
</div>
<div id="content">
</div>
</div>
<body>
</body>
</html>
The CSS for the page structure
body {
margin: 0;
padding: 0;
background-color: #E8E8E8;
font-family: Georgia, "Times New Roman", Times, serif;
background-image: url(images/wrap.jpg);
background-repeat: repeat-y;
background-position: center;
text-align: center;
}
#wrapper{
width: 790px;
background-color:#FFFFFF;
height: 1200px;
margin: 0 auto;
}
#header{
width: 790px;
background-color:#03529D;
height: 85px;
text-align: left;
}
/* left bar */
#leftbar{
background-color:#DEDEDE;
width:215px;
float: left;
padding-bottom:5px;
margin-top: 10px;
margin-left: 10px;
}
#leftsub{
background-color: #ffffff;
width: 201px;
margin:6px 6px 0px 6px;
border: 1px solid #C2C2C2;
}
#leftsubhead {
text-align: center;
color: #ffffff;
background-color: #FA891E;
width: 193px;
margin: 3px 3px 0px 3px;
height: 19px;
border-left: 1px solid #FA891E;
border-right: 1px solid #FA891E;
}
#leftsubbody{
text-align: left;
background-color: #ffffff;
width: 193px;
margin: 0px 3px 2px 3px;
border-left: 1px solid #C2C2C2;
border-right: 1px solid #C2C2C2;
border-bottom: 1px solid #C2C2C2;
}
/* left bar end */
#content{
background-color:#FFFFFF;
float: left;
width: 540px;
border: 1px solid #E8E8E8;
margin: 10px 10px 0 0;
text-align: left;
}
The CSS for the page design elements.
/* CSS Document */
/* general fonts and global design features */
h1 {
padding: 0;
margin: 0;
}
h2 {
padding: 0;
margin: 0;
}
h3 {
padding: 0;
margin: 0;
}
h4 {
padding: 0;
margin: 0;
}
h5 {
padding: 0;
margin: 0;
}
.class1 A:link {text-decoration: none; color: white;}
.class1 A:visited {text-decoration: none; color: white;}
.class1 A:active {text-decoration: none; color: white;}
.class1 A:hover {text-decoration: underline; color: white;}
.class2 A:link {text-decoration: none; color: #0A9AE1;}
.class2 A:visited {text-decoration: none; color: #0A9AE1;}
.class2 A:active {text-decoration: none; color: #0A9AE1;}
.class2 A:hover {text-decoration: underline; color: #0A9AE1;}
.cfont1 {
font-weight: normal;
}
.imgright {
float: right;
margin: 2px;
}
.imgleft{
float: left;
margin: 2px;
}
/* header */
.header{
font-size: 29px;
font-weight: bold;
color: #FFFFFF;
position: absolute;
margin-top: 5px;
margin-left: 5px;
}
.subheader{
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
position: absolute;
margin-top:19px;
margin-left: 5px;
}
#links {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
position: absolute;
margin-top: 48px;
margin-left: 350px;
}
.sublinks {
color: #0A9AE1;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 10px;
position: absolute;
margin-left: 405px;
margin-top: 35px;
}