CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS Layout

Discuss CSS Layout in the CSS Help forum on Dev Shed.
CSS Layout Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old October 16th, 2002, 09:26 PM
Fireman-x Fireman-x is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2000
Posts: 7 Fireman-x User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
CSS Layout
I'm working on an all CSS layout for my site to increase speed and make things easier on myself, as well as to create something that will actually support standards for once.

However, I've run in to a bit of a problem with one of the layout boxes. I want to create a "bar" that will be located at the bottom of every page. It should be 100% wide and have no margins between it and the sides or bottom of the screen. It needs to be 20 pixels tall. Right now, this is what I have:

PHP Code:
# Stylesheet:
.bottom {
    position: absolute;
    width: 100%;
    background: #000000;
    margin: 0px 0px 0px 0px;
    height: 15px;
    bottom: 0px;
}

.bottomtitle {
    position: relative;
    color: #FFFFFF;
    float: left;
    font-family: verdana, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    padding: 3px 0px 3px 3px;
}

.copyright {
    position: relative;
    color: #FFFFFF;
    float: right;
    font-family: verdana, sans-serif;
    font-size: 8pt;
    padding: 3px 3px 3px 0px;
}

#actual HTML code for the bottom box:

<div class="bottom">
    <div class="bottomtitle">Company Name</div>
    <div class="copyright">
        Copyright (©) 1999-2002 My Company<br />
        Check out our Privacy Policy
    </div>
</div> 


As you can see, I also require right and left aligned text on either side of the box as well.

My problem is that when any text in the content portion of the site becomes longer than the window, it simply "goes behind" the box, rather than just pushing it down to the bottom. Does anybody have any suggestions for this? Is it fixable?
Reply With Quote
  #2  
Old October 16th, 2002, 10:35 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Reply With Quote
  #3  
Old October 16th, 2002, 10:51 PM
Fireman-x Fireman-x is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2000
Posts: 7 Fireman-x User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
That simply moves it to the top of the page, rather than allowing it to stay at the bottom of every page, regardless of the length of the content.
Reply With Quote
  #4  
Old October 17th, 2002, 01:37 AM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Yeah, sorry about that. This is a perennial CSS question, that's replaced the old question about getting a table/table cell to render to the bottom of the document. It's easy to do with scripting, but I haven't seen a pure CSS-based solution. Maybe someone else has one.
Reply With Quote
  #5  
Old October 17th, 2002, 08:18 PM
Fireman-x Fireman-x is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2000
Posts: 7 Fireman-x User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I got it!

What I had to do was nest all of my content in an overall div and then place the bottom bar right below the content in that same div.
Reply With Quote
  #6  
Old October 17th, 2002, 08:29 PM
adios adios is offline
Senior Citizen
Dev Shed Regular (2000 - 2499 posts)
  
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019 adios User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 10
Fireman-x...

Could you post the solution? Very interested...
Reply With Quote
  #7  
Old October 17th, 2002, 08:46 PM
Fireman-x Fireman-x is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2000
Posts: 7 Fireman-x User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Yeah, lemme clean up my code a bit and I'll post it...
Reply With Quote
  #8  
Old October 17th, 2002, 08:54 PM
Fireman-x Fireman-x is offline
Member
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Dec 2000
Posts: 7 Fireman-x User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
test.php:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>CSS Test</title>
<link rel='stylesheet' type='text/css' href='test.css' />
</head>
<body>
<div class="top">This is the Top Bar</div>
<div class="main">
     <div class="left">
          <div class="leftmenu">This is a left menu</div>
          <div class="leftmenu">This is another left menu</div>
     </div>
     <div class="content">Title of Page</div>
     <div class="content">
Some body text goes here....
     </div>
     <div class="bottom">
          <div class="bottomtitle">My Site</div>
          <div class="copyright">
          Copyright (©) 1999-2002 My Site<br />
          Check out our Privacy Policy
          </div>
     </div>
</div>
</body>
</html> 


test.css:

PHP Code:
 BODY {
    margin: 0 0 0 0;
    background: #CCCCCC;
}

.main {
    position: absolute;
    margin: 50px 0px 20px 0px;
    width: 100%;
}

.content {
    position: relative;
    width: auto;
    border: 1px solid #000000;
    margin: 5px 10px 5px 165px;
    padding: 10px;
    z-index: 2;
    background: #FFFFFF;
}

.left {
    position: relative;
    float: left;
    width: 140px;
}

.leftmenu {
    position: relative;
    width: 150px;
    border: 1px solid #000000;
    margin: 5px 0px 0px 0px;
    padding: 5px;
    z-index: 1;
    background: #FFFFFF;
}    

.top {
    position: absolute;
    width: 100%;
    border-bottom: 1px dashed #000000;
    margin: 0px 0px 0px 0px;
    height: 40px;
    background-color: #CCCC99;
    padding: 3px 0px 0px 0px;
}

.bottom {
    position: relative;
    width: 100%;
    background: #000000;
    margin: 0px 0px 0px 0px;
    height: 15px;
    bottom: 0px;
}

.bottomtitle {
    position: relative;
    color: #FFFFFF;
    float: left;
    font-family: arial, sans-serif;
    font-size: 14pt;
    font-weight: bold;
    padding: 3px 0px 3px 3px;
}

.copyright {
    position: relative;
    color: #FFFFFF;
    float: right;
    font-family: verdana, sans-serif;
    font-size: 8pt;
    padding: 3px 3px 3px 0px;
}

.sectiontitle {
    font-family: arial, sans-serif;
    font-size: 16pt;
    font-weight: bold;
    padding: 5px;
} 
Last edited by Fireman-x : October 17th, 2002 at 09:30 PM.
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Layout

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway.