14 replies [Last post]
TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

Hi Gang,

Tis me again,

I have been playing with the advice given me already By ClevaTreva and Hugo over at;
http://www.gm.rmit.edu.au/dev/css_tryout/LSB_2col.htm

In my left column I have some text that is pretty obviously going to end up being a navigiation area.

My question is; at the moment I have separated some text just with some <br / >'s - to assist in my demonstration of what I am after - which is.

How do I have some text permanently at the very bottom of the left column?
Think along the lines of - if the logged in user has administration rights then there would be an "admin" link.

I assume it'll be another DIV.... but don't know how to separate the left column into two sections. Of course the upper 98% of the left column should grow/shrink as the main content window does and the bottom DIV (for the admin link) remain always (geometrically) above the footer.

I hope my textual description has been ok. Please let me know if you need somethng else.

http://csscreator.com/node/20591;
has the history (with regards to CSS and HTML source - if you need it.

Thanks once again - for any assistance anyone might be able to provide.

Smith & Wesson
The original point and click device.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Simplest way would be to

Simplest way would be to ensure that the parent div had a positional context (relative) then make the link display:block and position it absolute; bottom:0; where it will stick.

You do not need to place it in a div, that will lead to divitis but you may consider that the link be expressed in a semantic context such as a <p> element although not absolutely required.

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

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

I almost hate having to ask.

Hugo,
I almost hate having to ask.

But as they say in the classics - "There's no such thing as a stupid question"

But I really have no idea what the heck you're talking about!

I don't even know how to start, in an attempt to try and do it for myself; as I just don't have an understanding of CSS terms.

Smith & Wesson
The original point and click device.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sorry, If you place a

Sorry,

If you place a positioning property on - for the sake of argument - #sidebar i.e position:relative then you are able to use position:absolute on say an anchor and position it using the offset properties in this instance left:0; bottom:0; this will place the anchor to the bottom of #sidebar where it will stay.

Position absolute takes it's reference position from the nearest positioned ancestor (parent element that it's nested in or if not parent then on up the tree until it finds a positioned element (ancestor), this defaults to the body element which is always positioned.

I suggested that you make the anchor display:block as this allows you to format it as block level using width, height, margins etc and you could have it span the full width of it's parent and also to clickable on all of the area including whitespace not just the text (requires dimensions or a haslayout trigger for IE, which would be provided for by width, but while avoiding padding margins on the horizontal axis)

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 2 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

TroubZ wrote:How do I have

TroubZ wrote:
How do I have some text permanently at the very bottom of the left column?

You are going to kick yopurself when you see the answer.

Make another footer row above the other rows in the footer with a fixed height (like the other rows). Give it a right margin sufficient (611px?) to not go over the middle content at all (ie it is only as wide as the left bit. Alter the clearfooterleft to be that much higher. In the fullheightcontier css, alter the negative margin-bottom by this amount too.

Done deal.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Or you can place the element

Or you can place the element absolute to the bottom of the left sidebar and avoid all the extra markup Wink

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 2 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

The left sidebar is actually

The left sidebar is actually fake! Honest guv.

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

A big thanks to both of

A big thanks to both of you...

I realise that there are MANY ways to accomplish the desired results.
Regardless of how difficult it might be (for me to learn / appreciate / understand)

Is either of your two methods a "better practice" than the other?
Or is it simply a case getting it to wkr - is good enough?

Smith & Wesson
The original point and click device.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 2 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

My suspicion is that if you

My suspicion is that if you placed a div abs pos at the bottom of the left column it would sit just under the last bit of content in there, whereas what you want is for it to sit on top? Experimentation is fun

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 44 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sadly if the sidebar is

Sadly if the sidebar is 'fake' (height dictated by it's content and that falls short of the full viewport height) then the absolute positioning will not work in the intended fashion because the actual real bottom of the sidebar/column is just below the last bit of actual content.

I tend to manage to work in an equal height column technique if I have to do full height layouts so can use this technique if required.

Hugo.

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

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

Ahh, the penny has

Ahh, the penny has dropped.

Strike up another one for the learning of CSS.
i think I';ve understood it better by you two guys discussing it than I did by any of your own posts Smile

I sincerey appreciate the ongoing support....

Smith & Wesson
The original point and click device.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 2 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Have you tried it and did it

Have you tried it and did it work?

and somehow a spide has gotten on to your server and left a web Smile

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

Hi

Hi Trevor..

http://www.gm.rmit.edu.au/dev/css_tryout/LSB_2col.htm

Is the current version.
(I have coloured the new footer purple for illustrative purposes only.)

In FF2 and IE7 the screen is perfect. - great work!
I don't have IE6 here at home - so haven't checked it with that yet.

Something I did notice though for FF and IE7 - is that after having added in extra text into the main content(so the web page is longer than my screen), the background image does in fact stay fixed in position!

Another big thumbs up!

Smith & Wesson
The original point and click device.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 2 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Looks OK in IE6 too.

Looks OK in IE6 too.

TroubZ
TroubZ's picture
Offline
Enthusiast
Last seen: 10 years 29 weeks ago
Timezone: GMT+10
Joined: 2007-03-07
Posts: 52
Points: 0

Solved!

Once again, just i case you end up on this thread for looking for answers, please find the relevant code below;

CSS;
/*** Style for LSB 2 Column Template ***/
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
html,body{height:100%}
body{
font-family: verdana, arial, helvetica, sans-serif;
font-size:100.1%; /*** Don't change this setting. Make all other
font-sizes in % (preferred) or ems ***/
color:#000000;
background:#CCCCCC; /*** Background colour of page ***/
min-width:820px; /*** Content Width ***/
text-align:center;
}
input,select{
margin:0px;
padding:0px;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */
#fullheightcontainer{
margin-left:auto;
margin-right:auto;
text-align:left;
position:relative;
width:870px; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-120px; /*** NEGATIVE TOTAL Height of Footer Rows(inc 20px for new footer ***/
background:#D96C00 url(ll.gif) left top repeat-y; /*** Background colour of left column. Also has the left hand side shady border image ***/
}
#wrapper{
display:table-cell;
position:relative;
border-left:9px transparent solid; /*** Moves the content over to reveal the shady border (same width as that). NOT used by IE ***/
background:url(lr.gif) right top repeat-y; /*** Background colour of left AND right columns. Also has the right hand side shady border image ***/
}
* html #wrapper{ /*** for IE to reveal the content over to reveal the shady border (same width as that). ***/
border:none;
margin-left:9px;
}
#outer{
position:relative;
margin-left:200px; /*** Left Column Width ***/
width:652px; /*** Center Column Width (takes into account left shady border width) ***/
background:#FFFFFF; /*** Background colour of center column. ***/
height:100%;
background-image: url(images/Web.gif);
background-attachment : fixed;
background-repeat: no-repeat;
background-position: top;
}
#float-wrap{
width:652px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
width:652px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:right;
height:100%;
display:table;
}
#left{
float:left;
display:inline;
width:200px; /*** Left Column Width ***/
margin-left:-200px; /*** NEGATIVE Left Column Width ***/
position:relative;
}
#clearheadercenter{
height:145px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:145px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:100px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:120px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:870px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#anotherfooterrow{
margin:0px 9px;
margin-right:661px;
background:#ff00ff;
text-align:left;
height:20px;
overflow:hidden;
}

#subfooter1{
margin:0px 9px;
background:#444444;
text-align:center;
height:82px;
overflow:hidden;
}
#header{
z-index:1;
position:absolute;
top:0px;
left:0px;
width:100%;
height:0px;
}
#header-inner{
width:870px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#subheader1{
margin:0px 9px;
background:#D96C00;
text-align:center;
height:25px;
overflow:hidden;
}
#subheader2{
margin:0px 9px;
background:#FFFFFF;
text-align:left;
height:100px;
overflow:hidden;
}
#container-left{}
#container-center{}
#centerfill{display:none}
#shadybottom,#shadytop{
margin:0px;
height:18px;
overflow:hidden;
background:url(lbl.gif) left top no-repeat;
}
#shadytop{background:url(ltl.gif) left top no-repeat}
#shadybottom div{background:url(lbr.gif) right top no-repeat}
#shadytop div{background:url(ltr.gif) right top no-repeat}
#shadybottom div div,#shadytop div div{
margin:0px 18px;
background:#444444 url(lb.gif) 0 9px repeat-x;
height:18px;
overflow:hidden;
}
#shadytop div div{background:#D96C00 url(lt.gif) left top repeat-x}

.color-bar{
height:2px;
margin:0 9px;
background:#DDDDDD;
overflow:hidden
}

ie7css;
#fullheightcontainer{height:auto;min-height:100%}
#centerfill{
display:block;
position:absolute;
top:0px;
width:661px;
height:100%;
background:#FFFFFF url(lr.gif) right top repeat-y;
margin-left:209px;
}

HTML;

Your Page Title Here
@import url("style.css");

@import url("ie7style.css");

This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content
This is the Main Content

This is the Left Sidebar






this is some extra stuff.

A big thanks to everyone who helped out!

Smith & Wesson
The original point and click device.