CSS Issues...please help 50NP$.

kpm547 · 09-17-2005, 02:04 PM

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(http://cdn.namepros.com/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:info@udac.ca">info@udac.ca</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">
&nbsp;
</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 .
????: NamePros.com http://www.namepros.com/programming/124512-css-issues-please-help.html

The picture of what it is supposed to look like is here.
????: NamePros.com http://www.namepros.com/showthread.php?t=124512

Any help would be appreciated, as I've been working opn it for a while, but can't figure it out. Thanks.

stscac · 09-17-2005, 04:26 PM

Looks fine to me.

Using Firefox 1.06

-Steve

kpm547 · 09-18-2005, 03:27 PM

There's not supposed be any white space below the red rectangle on the bottom left. This only happens when the text in the right gets too long.

kpm547 · 09-19-2005, 10:47 AM

Nobody's got any ideas? I really need some help. How do you keep the red box in the bottom left at the bottom no matter how long the text is in the upcoming messages or the coming events. I will pay 50NP$ to who ever can fix this. Thanks.

TeviH · 09-20-2005, 07:47 AM

I'll tell you what I've done, but I know there are those who will want to run me out of town because of it...

...use tables.

I also have issues with divs displaying correctly in different browsers, especially when they are supposed to be somewhat elastic. I find tables do it all so much more reliably. I just don't find the argument "tables are only meant to display tabular data" very strong when I design my sites. So I use tables and/or divs, whichever works best for the project.

Can your issue be fixed with divs? Most likely. But I personally don't find the trouble worth it, and it could even create more code than is necessary.

If you still want to use CSS, try this: make the "#address div's" outer div "height: 100%" and then position #address to the bottom. I haven't tried it out....

kpm547 · 09-20-2005, 09:39 AM

Originally Posted by TeviH

I'll tell you what I've done, but I know there are those who will want to run me out of town because of it...
????: NamePros.com http://www.namepros.com/showthread.php?t=124512

...use tables.

I also have issues with divs displaying correctly in different browsers, especially when they are supposed to be somewhat elastic. I find tables do it all so much more reliably. I just don't find the argument "tables are only meant to display tabular data" very strong when I design my sites. So I use tables and/or divs, whichever works best for the project.

Can your issue be fixed with divs? Most likely. But I personally don't find the trouble worth it, and it could even create more code than is necessary.

If you still want to use CSS, try this: make the "#address div's" outer div "height: 100%" and then position #address to the bottom. I haven't tried it out....

I know I could do it in tables, but I have been listening to everyone else "tbales are not for formatting" so I've been using divs. But you're right. Divs are good, but you can get into trouble. Tables are really easy. I will try your suggestion for the divs. If it works, you get the NP$.

Thanks.

TeviH · 09-20-2005, 02:37 PM

Good luck!

The argument that interested me in stearing clear of table-less design is the fact that you can then completely change the whole design - even layout - on the fly with a new style sheet.

To say "tables are not for formatting" is ridiculous. Being a good designer means using all available resources. What's gonna happen?! The HTML police gonna lock me up?!

gamex · 09-20-2005, 03:34 PM

Not sure if this will help, but try giving all of the divs a 1px solid #000000 border, maybe this will help you see what the problem is. Most of the times it works for me. If you still have problems, let me know.

My sites used to be tables inside of tables inside of tables too, I just started to use divs only. Built my first site like that at http://www.jlhsband.com, so I am new at not using tables, but I may be able to help.

TeviH · 09-21-2005, 08:42 AM

I'm no fan of tables inside of tables inside of tables! That's bad coding. I like to use one big table to get the main structure right (if necessary) and then I'll use divs inside that one.

I just don't think CSS divs are easy to position - it displays different on different browsers, unless you go crazy adding a million lines of code, and its definitely not at all intuitive. I'd rather use the most efficient and fastest method. Using a table to set everything up to begin with is often the easiest and has less code.

09-18-2005, 03:27 PM	THREAD STARTER #3 (permalink)
kpm547 NamePros Member Join Date: May 2005 Location: Canada Posts: 171	There's not supposed be any white space below the red rectangle on the bottom left. This only happens when the text in the right gets too long. __________________ www.twocrazyducks.com - Two Crazy Ducks Web Hosting - Lethbridge, Alberta www.lasara.org - Lethbridge Area Search and Rescue themuellers.ca - The Mueller Family Webpage jobsitestructures.com - Job Site Structures Ltd. - for all your site office and accomodation needs!

09-19-2005, 10:47 AM	THREAD STARTER #4 (permalink)
kpm547 NamePros Member Join Date: May 2005 Location: Canada Posts: 171	Nobody's got any ideas? I really need some help. How do you keep the red box in the bottom left at the bottom no matter how long the text is in the upcoming messages or the coming events. I will pay 50NP$ to who ever can fix this. Thanks. __________________ www.twocrazyducks.com - Two Crazy Ducks Web Hosting - Lethbridge, Alberta www.lasara.org - Lethbridge Area Search and Rescue themuellers.ca - The Mueller Family Webpage jobsitestructures.com - Job Site Structures Ltd. - for all your site office and accomodation needs!

09-20-2005, 07:47 AM	#5 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	I'll tell you what I've done, but I know there are those who will want to run me out of town because of it... ...use tables. I also have issues with divs displaying correctly in different browsers, especially when they are supposed to be somewhat elastic. I find tables do it all so much more reliably. I just don't find the argument "tables are only meant to display tabular data" very strong when I design my sites. So I use tables and/or divs, whichever works best for the project. Can your issue be fixed with divs? Most likely. But I personally don't find the trouble worth it, and it could even create more code than is necessary. If you still want to use CSS, try this: make the "#address div's" outer div "height: 100%" and then position #address to the bottom. I haven't tried it out.... __________________ www.headlinercreative.com Last edited by TeviH; 09-20-2005 at 07:52 AM.

09-20-2005, 02:37 PM	#7 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	Good luck! The argument that interested me in stearing clear of table-less design is the fact that you can then completely change the whole design - even layout - on the fly with a new style sheet. To say "tables are not for formatting" is ridiculous. Being a good designer means using all available resources. What's gonna happen?! The HTML police gonna lock me up?! __________________ www.headlinercreative.com

09-20-2005, 03:34 PM	#8 (permalink)
gamex NamePros Regular Join Date: Feb 2004 Location: Student @ UConn Posts: 411	Not sure if this will help, but try giving all of the divs a 1px solid #000000 border, maybe this will help you see what the problem is. Most of the times it works for me. If you still have problems, let me know. My sites used to be tables inside of tables inside of tables too, I just started to use divs only. Built my first site like that at http://www.jlhsband.com, so I am new at not using tables, but I may be able to help. __________________ Joe

09-17-2005, 04:26 PM	#2 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,809	Looks fine to me. Using Firefox 1.06 -Steve

09-21-2005, 08:42 AM	#9 (permalink)
TeviH NamePros Regular Join Date: Jul 2005 Location: Florida Posts: 233	I'm no fan of tables inside of tables inside of tables! That's bad coding. I like to use one big table to get the main structure right (if necessary) and then I'll use divs inside that one. I just don't think CSS divs are easy to position - it displays different on different browsers, unless you go crazy adding a million lines of code, and its definitely not at all intuitive. I'd rather use the most efficient and fastest method. Using a table to set everything up to begin with is often the easiest and has less code. __________________ www.headlinercreative.com

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS/ mozilla-IE issues	hazza.mcazza	Programming	1	08-01-2005 08:05 PM
HTML / CSS issues...resize issues, placement, calender	dirtynbl	Web Design Discussion	2	05-01-2005 01:31 PM
IE CSS issues with my site	scuzzo84	Web Design Discussion	2	03-28-2005 09:16 PM
Odd CSS issues in IE	DarKrow	Programming	3	03-20-2004 12:15 AM