CSS Issues...please help 50NP$.
I'm working on this webpage for my church. I have only one small problem. The red box in the bottom right corner is supposed to stay at the bottom always. But it moves with the text in the left bar.
Here's the code:
The webpage can be viewed here .
The picture of what it is supposed to look like is here.
Any help would be appreciated, as I've been working opn it for a while, but can't figure it out. Thanks.
I'm working on this webpage for my church. I have only one small problem. The red box in the bottom right corner is supposed to stay at the bottom always. But it moves with the text in the left bar.
Here's the code:
Code:
<HTML>
<HEAD>
<TITLE>udac webpage</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (udac webpage.psd) -->
<STYLE TYPE="text/css">
<!--
#container {
width:955px;
}
#title1 {
position:absolute;
left:0px;
top:0px;
width:253px;
height:102px;
}
#title2 {
position:absolute;
left:253px;
top:0px;
width:340px;
height:111px;
}
#title3 {
position:absolute;
left:593px;
top:0px;
width:362px;
height:111px;
}
#menu1 {
position:absolute;
left:0px;
top:102px;
width:253px;
height:53px;
}
#building1 {
position:absolute;
left:253px;
top:111px;
width:340px;
height:251px;
}
#building2 {
position:absolute;
left:593px;
top:111px;
width:362px;
height:251px;
}
#getknowus {
position:absolute;
left:0px;
top:155px;
width:253px;
height:49px;
}
#getconnected {
position:absolute;
left:0px;
top:204px;
width:253px;
height:54px;
}
#gethere {
position:absolute;
left:0px;
top:258px;
width:253px;
height:56px;
}
#menu2 {
position:absolute;
left:0px;
top:314px;
width:253px;
height:48px;
}
#upcomingmessage {
left:0px;
width:222px;
padding:0 0 10px 30px;
font-size:80%;
}
#main {
font-size:80%;
margin:0 30px 10px 5px;
}
#address {
left:0px;
bottom:100%;
width:253px;
height:99px;
color:white;
background-image:url(images/address.gif);
font-size:70%;
}
#addresstext {
PADDING: 7px 5px 3px 25px;
}
#footer1 {
position:absolute;
left:0px;
top:0px;
width:253px;
height:25px;
}
#footer2 {
position:absolute;
left:253px;
top:0px;
width:677px;
height:25px;
}
#footer3 {
position:absolute;
left:930px;
top:0px;
width:25px;
height:25px;
}
#content {
position:absolute;
left:0px;
top:362px;
width:955px;
background-image:url(background1.gif);
background-repeat:repeat-y;
font-family:tahoma, sans-serif;
}
#leftbar {
float:left;
width:253px;
background-color:transparent;
}
#rightbar {
float:right;
width:692px;
}
#endfloat {
clear:both;
}
#footers {
position:absolute;
left:0px;
bottom:0px;
width:955px;
height:25px;
}
IMG {
border:0 black none;
}
A.ADDRESS {
color:white;
}
a:hover.address {
color:#AB5633;
}
-->
</STYLE>
<!-- End ImageReady Styles -->
</HEAD>
<BODY BGCOLOR=#CCCCCC LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (udac webpage.psd) -->
<DIV ID="container">
<DIV ID="title1">
<IMG SRC="images/title1.gif" WIDTH=253 HEIGHT=102 ALT="" />
</DIV>
<DIV ID="title2">
<IMG SRC="images/title2.gif" WIDTH=340 HEIGHT=111 ALT="" />
</DIV>
<DIV ID="title3">
<IMG SRC="images/title3.gif" WIDTH=362 HEIGHT=111 ALT="" />
</DIV>
<DIV ID="menu1">
<IMG SRC="images/menu1.gif" WIDTH=253 HEIGHT=53 ALT="" />
</DIV>
<DIV ID="building1">
<IMG SRC="images/building1.gif" WIDTH=340 HEIGHT=251 ALT="" />
</DIV>
<DIV ID="building2">
<IMG SRC="images/building2.gif" WIDTH=362 HEIGHT=251 ALT="" />
</DIV>
<DIV ID="getknowus">
<A HREF="/getknowus/"><IMG SRC="images/getknowus.gif" WIDTH=253 HEIGHT=49 ALT="" /></a>
</DIV>
<DIV ID="getconnected">
<A HREF="/getconnected/"><IMG SRC="images/getconnected.gif" WIDTH=253 HEIGHT=54 ALT="" /></A>
</DIV>
<DIV ID="gethere">
<A HREF="/gethere/"><IMG SRC="images/gethere.gif" WIDTH=253 HEIGHT=56 ALT="" /></A>
</DIV>
<DIV ID="menu2">
<IMG SRC="images/menu2.gif" WIDTH=253 HEIGHT=48 ALT="" />
</DIV>
<!-- content div -->
<DIV ID="content">
<DIV ID="leftbar">
<IMG SRC="images/upcomingmessage.gif" WIDTH=253 HEIGHT=30 ALT="" />
<div id="upcomingmessage">
upcoming messages go here
upcoming messages go here
upcoming messages go here
upcoming messages go here <br />
upcoming messages go here
upcoming messages go here
upcoming messages go here
</div>
<DIV ID="address">
<DIV ID="addresstext">
A congregation of the<br />
Christian & Missionary Alliance<br />
55 Columbia Blvd. West<br />
Lethbridge, Alberta T1K 4B7<br />
Phone: (403)381-7171 Fax: (403)381-7177<br />
Email: <a class="address" href="mailto:[email protected]">[email protected]</a>
</DIV>
</DIV>
</div>
<DIV ID="rightbar">
<IMG SRC="images/comingevent.gif" WIDTH=156 HEIGHT=30 ALT="" />
<DIV ID="main">
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
This is where the main text goes for the webpage.<br>
</div>
</DIV>
<DIV ID="endfloat">
</div>
<DIV ID="footers">
<DIV ID="footer1">
<IMG SRC="images/footer1.gif" WIDTH=253 HEIGHT=25 ALT="" />
</DIV>
<DIV ID="footer2">
<IMG SRC="images/footer2.gif" WIDTH=677 HEIGHT=25 ALT="" />
</DIV>
<DIV ID="footer3">
<IMG SRC="images/footer3.gif" WIDTH=25 HEIGHT=25 ALT="" />
</DIV>
</DIV>
</DIV>
<!-- End ImageReady Slices -->
</BODY>
</HTML>The webpage can be viewed here .
The picture of what it is supposed to look like is here.
Any help would be appreciated, as I've been working opn it for a while, but can't figure it out. Thanks.
Last edited:
