5 replies [Last post]
muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 13 years 16 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

Ok. Here's the deal. I'm working on a site that steals a concept from the Mozart design over at CSS Zen Garden. I'm talking about the fixed background showing through spaces between content on the main body of the page. However, the client that wants the site will probably rarely have enough content that the main body of his page will be longer than his sidebar (we're trying to work with him on this). I can't think of a consistent way of doing this, but I promised my business partner I'd put it to your knowledge of CSS to see if this is possible.

Here's the HTML:


Joshua Chaikin - Redefining the Limits of Impossibility - Home















Welcome



Welcome to the website of Joshua Chaikin.
 



 
Redefining the limits of impossibility.
 



 
This site will have lots of fun stuff on it soon, so come back and see us!
 






Schedule

Friday Nights
6:00pm - 8:00pm
Carlos O'Kelly's Mexican Café
Lawrence, KS


 

June 14-16, 2007
CAM Convention
Ontario, Canada


 


August 9-11, 2007

Midwest Magic Jubilee
St. Louis, MO




Random Image
testImage

 
Picture Title


(XHTML | CSS | 508)


 



And here is the CSS (Please ignore all of the redundant and empty tags. We're going to clean it up before official launch.)

/* Zero everything out */ * {border: 0; padding: 0; margin: 0; float: none;}

/* Alignment classes */
.center {text-align: center;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;
display: block;}

/* Link and Text Styling */
H2 {font-size: 22px}
H3 {font-size: 19px;}
p {font-size: 16px;}
A:link {color: #0cd;}
A:active {color: #9ff;}
A:visited {color: #A7FCC6}
A:hover {color: #4FF;}
ADDRESS {}
hr {}

/* Give block elements a little bit of room at the top and bottom */
h1,h2,h3,h4,h5,h6,div,p {margin: 0 0 1.2em 0;}
ul {margin: 0 0 0 2em;}
cite {text-decoration: underline;}
body {background: #354C3B url('/Clients/jchaikin/images/cards.jpg') no-repeat center top fixed;
color:#A7FCC6;}

/* ######################################################################################################## */
#pageWrapper {
width: 700px;
height: 100%;
position: absolute; left: 50%; top: 0;
background: transparent;
margin-left: -350px;

/*
position: relative;
margin: 20px auto;
padding: 0px;
width: 700px;

*/}
#leftContent {float: left;
width: 513px;
margin-bottom: 0;}
#rightContent {float: right;
width: 187px;}
/* ######################################################################################################## */

/* Header CSS */
div#header {background: url('/Clients/jchaikin/images/header.jpg') no-repeat top;
width:700px;
height:111px;
margin:0;}
div#header h1 {display: none;}
div#header a#headerLink {display: block;
height: 111px;
width: 700px;
text-decoration: none;
margin: 0;}

/* Menu CSS */
div#menu {margin:-1px 0 0 -32px;
height: 20px;}
div#menu ul {list-style-type: none;}
div#menu ul li {display: block;
float: left;
width: 99px;
height: 24px;}
div#menu ul li.first {margin: 0;}
div#menu ul li.last {width: 106px;}
div#menu ul li a {display: block;
width: 100%;
height: 100%;}
div#menu ul li a span {display: none;}
div#menu ul li.first a {}
div#menu ul li.last a {}
div#menu ul li#menuMain {}
div#menu ul li#menuAbout {}
div#menu ul li#menuSchedule {}
div#menu ul li#menuShows {}
div#menu ul li#menuClients {}
div#menu ul li#menuContact {}
div#menu ul li#menuPics {}
div#menu ul li#menuMain a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat 0 -24px;}
div#menu ul li#menuMain a:hover {background-position: 0 1px;}
div#menu ul li#menuAbout a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -99px -24px;}
div#menu ul li#menuAbout a:hover {background-position: -99px 1px;}
div#menu ul li#menuSchedule a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -198px -24px;}
div#menu ul li#menuSchedule a:hover {background-position: -198px 1px;}
div#menu ul li#menuShows a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -297px -24px;}
div#menu ul li#menuShows a:hover {background-position: -297px 1px;}
div#menu ul li#menuClients a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -396px -24px;}
div#menu ul li#menuClients a:hover {background-position: -396px 1px;}
div#menu ul li#menuContact a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -495px -24px;}
div#menu ul li#menuContact a:hover {background-position: -495px 1px;}
div#menu ul li#menuPics a {background: url('/Clients/jchaikin/images/menu.jpg') no-repeat -594px -24px;}
div#menu ul li#menuPics a:hover {background-position: -594px 1px;}
div#menu ul li a:hover {}
div#menu ul li.first a:hover {}
div#menu ul li.last a:hover {}

/* Main Body CSS */
div#leftContent {width:513px;}
div#leftContent h2, div#leftContent h3 {display:block;
background: url('/Clients/jchaikin/images/body_top.jpg') no-repeat;
width: 513px;
height: 32px;
padding: 4px 0 0 20px;}
div#leftContent h2 a {text-decoration: none;}
div#leftContent h3 {display:block;
height: 31px;
padding-top: 5px;}
div#leftContent div#content {width: 513px;}
div#leftContent .paraTop {display:block;
background: url('/Clients/jchaikin/images/body_mid_header.jpg') no-repeat;
width: 513px;
height:6px;}
div#leftContent .firstPara {margin-top: -29px;}
div#leftContent .para {background: url('/Clients/jchaikin/images/body_mid.jpg') repeat-y;}
div#leftContent .paraContent {display:block;
padding: 1px 10px 1px 20px;}
div#leftContent .paraBottom {display:block;
background: url('/Clients/jchaikin/images/body_bottom.jpg') no-repeat;
width: 513px;
height: 8px;}
div#leftContent input.button {background: #10462e; color: #aff}
div#leftContent span.moveButtons {float:right;margin-top:-5px;}
div#leftContent span.moveButtons a {font-size:25px; text-decoration:none;}
div#rightContent {}
div#leftContent div#footer {}

/* Sidebar */
div#rightContent {}
div#rightContent div#content2 {display:block;
background: url('/Clients/jchaikin/images/sidebar_mid.jpg') -1px 0;
width: 186px;}
div#scheduleBar {display:block;
background: url('/Clients/jchaikin/images/sidebar_top.jpg') no-repeat -2px 0;
padding-top:40px;}
div#scheduleBar #scheduleBarHead {display:block;
margin:-32px 0 10px 0;
text-align:center;
font-size: 19px;
font-weight: bold;}
div#scheduleBar p.schedPara {padding: 0 7px 0 7px;;
margin-bottom:7px;
text-align:center;}
div#scheduleBar p.schedPara span.schedDate, div#leftContent span.schedDate {display: block;
font-weight:bold;}
div#scheduleBar p.schedPara span.schedTimes, div#leftContent span.schedTimes {display: block;}
div#scheduleBar p.schedPara span.schedLocation, div#leftContent span.schedLocation {display: block;
font-weight:bold;}
div#scheduleBar p.schedPara span.schedDesc, div#leftContent span.schedDesc {display: block;}
div#scheduleBar p.schedPara span.schedCost, div#leftContent span.schedCost {display: block;}

/* This is the bar that will hold the divider image between schedule elements */
div#scheduleBar span.schedDivider {display:block;
background: url('/Clients/jchaikin/images/sidebar_divider.jpg') no-repeat -2px 0;}
p#imageBar {display:block;
background: url('/Clients/jchaikin/images/sidebar_mid_header.jpg') no-repeat -2px 0;
padding-top:45px;
text-align:center;}
p#imageBar #imageBarHead {display:block;
margin:-38px 0 15px 0;
text-align:center;
font-size: 19px;
font-weight: bold;}
p#imageBar img {padding-bottom:0px; }
hr, span.hr {border-bottom:solid 1px;
width:80%;
display:block;
margin: -15px auto 5px auto;}
span.imageTitle {display:block; font-weight:bold; text-align:center;margin-top:0px;}

p#copyright {display:block;
background: url('/Clients/jchaikin/images/sidebar_divider.jpg') no-repeat -2px 0;
padding:15px 7px 0 7px;
margin-bottom: 0px;
text-align:center;
font-size: 13px}
p#copyright span#validtags {}
span#copyFooter {display:block;
background: url('/Clients/jchaikin/images/sidebar_bottom.jpg') no-repeat -2px bottom;
}

/* Footer CSS */
#footer {height: 75px;
width: 513px;
background: #354c3b;;
margin-top: -20px;
}

/* Page Specific CSS */
/* Schedule */
div.schedule {}
div.schedule {}

/* Shows */
div.show {}
div.show {}

/* Clients */
ul#clients {}
ul#clients li {}
ul#clients li#last {}

ul#clients {}
ul#clients li {}
ul#clients li#last {}

Again, basically what we're trying to do is create a solid color box (same color as the bg) that will fill the difference in height from the bottom of the content to the bottom of the page so the background image on the body doesn't show through where we don't want it.

Here's a link to the page as well as the Zen Garden design that inspired it.

Thanks in advance for your help.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 38 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

If I understand correctly,

If I understand correctly, you want the box that says "This site will have lots of fun stuff on it soon, so come back and see us!" to expand to the end of the sidebar? A modified onetruelayout-type of equal height columns (negative margin compensation for padding excess and overflow:hidden-cut), attached to the last box and the sidebar should do. But the technique has lots of drawbacks.

Edit: the layout works for the Mozart Zen entry because the background consists mainly of horizontal lines. You cards background is too restless, at least to me.

muzishun
Offline
Enthusiast
Lawrence, KS
Last seen: 13 years 16 weeks ago
Lawrence, KS
Timezone: GMT-6
Joined: 2005-02-08
Posts: 106
Points: 0

IChao wrote:If I understand

IChao wrote:
If I understand correctly, you want the box that says "This site will have lots of fun stuff on it soon, so come back and see us!" to expand to the end of the sidebar?

Not quite. Basically we want to have a separate box that is the same dark green color as the main body background color that starts at the bottom of the last box, in this case "This site will have lots of fun stuff on it soon..." Then that will go to the bottom of the page and cover up the card background.

IChao wrote:
A modified onetruelayout-type of equal height columns (negative margin compensation for padding excess and overflow:hidden-cut), attached to the last box and the sidebar should do. But the technique has lots of drawbacks.

Thanks, I'll take a look at it, though I'm not 100% certain we're talking about the same thing yet.

IChao wrote:
Edit: the layout works for the Mozart Zen entry because the background consists mainly of horizontal lines. You cards background is too restless, at least to me.

Do you mean it works visually for that reason? The chaotic aspect of the background is something we were intentionally going for, so that's ok. As for the background not showing through, this layout really works best on a site with significantly more content than what we're dealing with.

Bill Parrott
Co-Owner and Co-Founder
Eternal Second Designs
http//www.EternalSecond.com/

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 38 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

I meant something like

I meant something like this

...
...

  This site will have lots of fun stuff on it soon, so come back and see us!  

#cut p#lastpara .paraBottom { background: #354c3b url(yourpath/body_bottom.jpg) no-repeat scroll 0% 0%; display:block; height: 8px; width: 513px; float: left; margin-bottom: -10000px; padding-bottom: 10000px; position: relative; /*IE6*/ }

#cut {
overflow:hidden;
float:left;
}

Did not check it in IE. And the footer itself has to cover the cards, too.

As mentioned, this overflow setting has lots of drawbacks and issues, see the onetruelayout article. Don't know if they will appear here.

Probably I'm just overlooking a simple technique that would append something to the last paragraph without forcing a vertical scrollbar and without overflow-cutting issues.

moshner
moshner's picture
Offline
newbie
Last seen: 12 years 20 weeks ago
Joined: 2005-11-19
Posts: 6
Points: 0

working!

Thank you so much for your input. My business partner and I (muzishun) were discussing it last night and I ask him to post on here to see if it was possible to do. Thanks for helping out, we really appreciate it. With a few modifications that method worked just fine.

Thanks again.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 11 years 38 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

You're welcome

You're welcome