7 replies [Last post]
annanina
annanina's picture
Offline
Regular
San Francisco Bay Area, USA
Last seen: 11 years 10 weeks ago
San Francisco Bay Area, USA
Timezone: GMT-8
Joined: 2005-09-28
Posts: 19
Points: 2

Hello All,

Even though I've been playing around with CSS quite a few times now, I am still not enlightened with all the positioning possibilities. For this project, I adapted an existing CSS layout.
It is *almost* done, but I have one

left, that I don't know how to position.

• You can have a look at the site to see how it works.
http://www.drummm.com/redesign/

• Now please have look at the screenshot how it is *supposed* to look like:
http://www.drummm.com/redesign/drummm.png

What I need:

ONE red layer (div?) on the right side.
I would take care of the images IN the red layer through putting a table with 3 rows in it (I know it probably would be better to NOT use tables at all, but at this point, this is beyond my knowledge).
The layer should scale in lengths as the footer does, and should be positioned below the header and right next to the navigation.

I spent hours and hours with this, and finally gave up. I *almost* had it, but then other things didn't work anymore. My hope is that I can just ADD a style up, without changing anything else, but I sense I might be wrong...

1) Here is the HTML code:

*** DRUMM – Building Connections Through Rhythm ***

2) Here is the CSS code:

/* CSS Document */

html, body {height:100%}
/* end hide */
body {
padding:0;
margin:0;
text-align:center;
min-width:798px;/* for mozilla*/

}
#outer{
min-height:100%;
height:100%;
width:798px;
border-left:2px solid #961711;
border-right:2px solid #961711;
background-color: #FFFFFF;
text-align:left;
margin:auto;
position:relative;
}

* html #outer{height:99.9%; float: left;
} /*For ie as treats height as min-height anyway - also addreeses rounding bug at bottom of screen in IE*/

#header{
background:#FF0000;
position:relative;
top:0px;

}
* html #header{height:70px}

#navitop {
width: 508px;
position:relative;

}

* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
margin-bottom:-1px;
}

#footer {
background-image: url(http://www.drummm.com/redesign/images/footer.gif);
width:798px;
clear:both;
height:16px;
background-color: #FF8080;
color: #000000;
text-align:center;
left:0;
bottom:0;
position: absolute;
}

#clearfooter {width:100%;height:52px;clear:both} /* to clear footer */

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 13 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Take a look at Faux Columns.

Take a look at Faux Columns.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

annanina
annanina's picture
Offline
Regular
San Francisco Bay Area, USA
Last seen: 11 years 10 weeks ago
San Francisco Bay Area, USA
Timezone: GMT-8
Joined: 2005-09-28
Posts: 19
Points: 2

@Tyssen

Thank you Tyssen.

That is a great idea, but not the ideal solution for what I need.

The thing is, and I thought I don't need to include that in my original posting, that I need to put images IN the layer I want to create.

I thought I will have a right aligned column/div with a red background, in which I put a table with three rows just for the photos and other content I want to have there.

If i use this trick with a background image, yes it will display a red column on the right, but I still need to position elements IN this column.

I want to keep the main content and the right-column separate, so for me it seems like I definitely need a separate layer for this right column.

Am I wrong?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 13 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

annanina wrote:Am I

annanina wrote:
Am I wrong?

Yes, you haven't grasped the concept properly. You can put as much content in your columns as you like (and no, you don't need to use a table for your images). The background-color goes on the container of both columns so has no effect on the actual content of either column.

Even if the colour/bg-image went in each individual column (which it doesn't with this technique) because it's in the background, it doesn't affect what content you place in the column.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

burlster
burlster's picture
Offline
Leader
Bournemouth
Last seen: 4 weeks 5 days ago
Bournemouth
Joined: 2007-05-31
Posts: 693
Points: 45

I'd have gotten away with it too...

I always think of Faux Columns like an episode of Scooby Doo. You can have as many characters (columns) running down a corridar as you like, but the background is subtly just repeating over and over (e.g. painting - clock - painting - clock). Therefore, they can run for as long as it takes to catch that bad guy and the background is uneffected.

:thumbsup:

Have YOU said Hello yet?
The CSSCreator Hello Thread

annanina
annanina's picture
Offline
Regular
San Francisco Bay Area, USA
Last seen: 11 years 10 weeks ago
San Francisco Bay Area, USA
Timezone: GMT-8
Joined: 2005-09-28
Posts: 19
Points: 2

THANKS!!!!

hi guys,

i totally understood the concept, but i guess i had some kind of block and didn't continue to think with it. women and technique, you know Wink

now i got it, and the faux column thing is a great idea, such as a blank/white pixel to trick with positioning, back in the "HTML and table only" days...

you rock!!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

burlster wrote:I always

burlster wrote:
I always think of Faux Columns like an episode of Scooby Doo. You can have as many characters (columns) running down a corridar as you like, but the background is subtly just repeating over and over (e.g. painting - clock - painting - clock). Therefore, they can run for as long as it takes to catch that bad guy and the background is uneffected.

:thumbsup:
Shock The scary thing is It's not a bad analogy , if not a little deranged.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Triumph (not verified)
Anonymous's picture
Guru

Hugo wrote: The scary

Hugo wrote:
Shock The scary thing is It's not a bad analogy , if not a little deranged.

A little? Laughing out loud Shock