Re: [css-d] Adding a faux column on my blog

2007-10-25 Thread Ian Bethune 
Thank you very much. I got it to work properly now.

 

From: Rafael [mailto:[EMAIL PROTECTED] 
Sent: Tuesday, October 23, 2007 10:02 AM
To: Ian Bethune
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Adding a faux column on my blog

 

Ian Bethune wrote: 

So far I did what you said and have only gotten 1 column to work. I have
tried many different things but nothing has worked. I did figure out why it
wasn't calling the gif in the first place as I had made an error in the
code. Once I fixed it, it started to work. But I can get the right side to
go if I put that in again or have it repeat-y both. Here is the section of
the code that I've been working in.
 
#content_box {background:#fff url('images/faux.gif') repeat-y left; width:
970px; text-align: left; float: left; clear: both; }

   #content { width: 510px; padding: 0 0 0 10px; float: left;
}
   
   #sidebar { background:#f2f2f2; width: 210px; padding: 0 0 0
10px; float: right; }

   #l_sidebar { background:#f2f2f2; width: 210px; padding: 0 0
0 10px; float: left; }
   
#footer { background:#5f; width: 970px; padding: 1.2em 0 0 0;
border-top: 2px solid #ccc; float: center; clear: both; }
 
Thanks for your quick reply yesterday.
 
Ian
  

Hi, Ian.
The problem is that your background image should have both columns.
Since it only has one (and you set the background at the left) only the left
column works. You're using a fixed layout, so using an image with the widths
you want should give you no problem.

Also, if you're using the faux-column technique, you don't need to set
the background color for the columns anymore, doing so could even give you a
small problem if the image's column width is a little smaller than your
actual columns.

Regards,
Rafael.

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Adding a faux column on my blog

2007-10-23 Thread Ian Bethune 
So far I did what you said and have only gotten 1 column to work. I have
tried many different things but nothing has worked. I did figure out why it
wasn't calling the gif in the first place as I had made an error in the
code. Once I fixed it, it started to work. But I can get the right side to
go if I put that in again or have it repeat-y both. Here is the section of
the code that I've been working in.

#content_box {background:#fff url('images/faux.gif') repeat-y left; width:
970px; text-align: left; float: left; clear: both; }

#content { width: 510px; padding: 0 0 0 10px; float: left;
}

#sidebar { background:#f2f2f2; width: 210px; padding: 0 0 0
10px; float: right; }

#l_sidebar { background:#f2f2f2; width: 210px; padding: 0 0
0 10px; float: left; }

#footer { background:#5f; width: 970px; padding: 1.2em 0 0 0;
border-top: 2px solid #ccc; float: center; clear: both; }

Thanks for your quick reply yesterday.

Ian


From: Rafael [mailto:[EMAIL PROTECTED] 
Sent: Sunday, October 21, 2007 11:31 PM
To: Ian Bethune
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] Adding a faux column on my blog

Ian Bethune wrote: 
I have added a background color to my sidebar on my blog Sox & Dawgs,
http://soxanddawgs.com

I would like the sidebar color to extend to the bottom of each page and not
lengthen it any more than the longest sidebar unless the content is that
long. 

I have read the how to create a faux column with css but have not had any
success. So I turn here for help. 

Any help anyone can give me would be greatly appreciated. Thank you very
much for your time.
  
    I haven't seen the CSS (was too long), but the effect you want can be
achieved by adding the image with the "faux" columns to #content_box, that
way whatever content is the longest it will affect the three "columns".

    Hope this helps.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Adding a faux column on my blog

2007-10-21 Thread Ian Bethune 
I have added a background color to my sidebar on my blog Sox & Dawgs,
http://soxanddawgs.com

I would like the sidebar color to extend to the bottom of each page and not
lengthen it any more than the longest sidebar unless the content is that
long. 

I have read the how to create a faux column with css but have not had any
success. So I turn here for help. 

Any help anyone can give me would be greatly appreciated. Thank you very
much for your time.

Here is my css code.

*/
body { background: #fff; color: #333; font: 62.5% Georgia, "Times New
Roman", Times, serif; text-align: center; }

* { padding: 0; margin: 0; }


/*---:[ global elements ]:---*/

a { color: #5f; text-decoration: underline; }

a:visited { color: #5f; text-decoration: underline; }

a:hover { color: #df; text-decoration: underline; }

a img { border: none; }

blockquote { font-style: italic; font-family: Georgia, "Times New Roman",
Times, serif; color: #555; margin: 0 30px 1.5em 30px; padding: 0 0 0 10px;
border-left: 1px solid #aaa; }

abbr, acronym { border-bottom: 1px dotted #aaa; text-transform: uppercase;
cursor: help; }

code { color: #090; font-family: Courier, monospace; }

pre { margin: 0 0 1.5em 0; overflow: auto; font-size: 1.3em; clear: both; }

p.center { text-align: center !important; }

p.bottom { margin: 0 !important; }

p.unstyled { font-size: 1.4em; }

.flickr_blue { color: #007ae4; text-transform: lowercase; }

.flickr_pink { color: #ff2a96; text-transform: lowercase; }

.green { color: #090; }

.red { color: #f00; }

.orange { color: #f40; }

.purple { color: #909; }



/*---:[ headlines ]:---*/

h1, h2, h3 { font-weight: bold; font-family: Helvetica, Arial, sans-serif;
color: #000; }

h1 { font-size: 3.6em; letter-spacing: -0.03em; }

#masthead h1 { padding: 0.4em 0 0.2em 0; border-top: 1px solid #ccc;
text-align: center; clear: both; }

h1 a, h1 a:visited, h1 a:hover { color: #000; text-decoration: none;
}

h2 { font-size: 2.0em; }

h2 a { color: #000; text-decoration: none; }

h2 a:visited { color: #555; text-decoration: none; }

h2 a:hover { color: #090; text-decoration: none; }

.posts h2 { margin: 0 0 0.1em 0; line-height: 1.2em; }

.pages h2, h2.page_header { margin: 0 0 0.75em 0; padding: 0 0 0.6em
0; background: url('images/hr_title_sep.gif') 0 100% no-repeat; }

h2.archive_head { font-weight: bold !important; font-size: 1.4em
!important; text-transform: uppercase !important; letter-spacing: normal
!important; margin: 0 0 1.8em 0 !important; padding: 0.4em 2px !important;
border-top: 3px solid #000 !important; background:
url('images/hr_dot_black.gif') 0 100% repeat-x !important; }

h3 { font-size: 1.0em; text-transform: uppercase; }

#masthead h3 { margin: 0 0 0.75em 0; font-weight: normal; font-size:
1.4em; text-transform: none; color: #888; text-align: center; }

.entry h3 { margin: 2.5em 0 0.5em 0; }

.entry h3.top { margin: 1.5em 0 0.5em 0 !important; }

h3.comments_headers { font-size: 1.4em; }

h4 { font: italic 1.2em Georgia, "Times New Roman", Times, serif; color:
#888; }

h4 a, h4 a:visited { color: #888; text-decoration: none; }

h4 a:hover { color: #888; text-decoration: underline; }

.posts h4 { margin: 0 0 1.25em 0; padding: 0 0 1.0em 0; background:
url('images/hr_title_sep.gif') 0 100% no-repeat; }



/*---:[ core layout elements ]:---*/

#container { width: 970px; margin: 15px auto 0 auto; }

#content_box {background:#fff; width: 970px; text-align: left;
float: left; clear: both; }

#content { width: 510px; padding: 0 0 0 10px; float: left;
}

#sidebar { background:#f2f2f2; width: 210px; padding: 0 0 0
10px; float: right; }

#l_sidebar { background:#f2f2f2; width: 210px; padding: 0 0
0 10px; float: left; }

#footer { background:#5f; width: 970px; padding: 1.2em 0 0 0;
border-top: 2px solid #ccc; float: center; clear: both; }



/*---:[ header styles ]:---*/

#masthead { background: #fff; width: 970px; /*height: 100px; background:
url('images/logo.gif') no-repeat;*/ /* uncomment the height and background
declarations here if you intend to use a graphic in the header instead of
the h1 */ }

/* #masthead a { display: block; width: 970px; height: 100px; } */
/* uncomment this line if you use a graphic in the header - make sure the
height of your header graphic is equal to the height declared in this line
of code! */

ul#nav { background: #fff; list-style: none; width: 950px; padding: 0 10px;
background: url('images/hr_dot_black.gif') repeat-x; border-bottom: 3px
solid #000; float: left; clear: both; }

ul#nav li { paddi