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

Hi Guys,

In a separate forum;
http://csscreator.com/node/20568

I was given some help by ClevaTreva with regards to a CSS layout to have a play with.
(Which I am most grateful for...)

Anyway,
I have a follow-up question for those in the know please.
I would like to include a top border for the main content.
I.e. Have a line between the headers and the main content (a border is not required between the left column and the headers.

I have tried adding border-top:thin; to the main content declarations in the CSS (Also tried adding it into the sub-header) - but it didn't work.
I am sure it is something really simple I am just missing - but can't work it out for myself.

The live link is;
http://www.gm.rmit.edu.au/dev/css_tryout/LSB_2col.htm

The HTML is;

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

@import url("ie7style.css");

This is the Main Content

This is the Left Sidebar

The CSS is;
/*** 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:770px; /*** 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:820px; /*** Content Width ***/
display:table;
height:100%;
margin-bottom:-100px; /*** NEGATIVE TOTAL Height of Footer Rows ***/
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:602px; /*** Center Column Width (takes into account left shady border width) ***/
background:#FFFFFF; /*** Background colour of center column. ***/
height:100%;
}
#float-wrap{
width:602px; /*** Center Column Width (takes into account left and right shady border widths) ***/
float:left;
display:inline;
}
#center{
position:relative; /* fix for IE */
width:602px; /*** 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:143px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearheaderleft{
height:143px; /*** TOTAL Height of Header Rows ***/
overflow:hidden;
}
#clearfootercenter{
height:100px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#clearfooterleft{
height:100px; /*** TOTAL Height of Footer Rows ***/
overflow:hidden;
}
#footer{
z-index:1;
position:relative;
width:100%;
height:0px;
}
#footer-inner{
width:820px; /*** Content Width ***/
margin-left:auto;
margin-right:auto;
height:0px;
}
#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:820px; /*** 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}

Thanks in advance for any assistance you might be able to give me.

Smith & Wesson
The original point and click device.

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

Hi Add a new div inside the

Hi

Add a new div inside the header below the others. Give it css like this:

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

And in the html after the header rows (inside the inner header still):

And then increase the heights of the clearheader bits by the same px height.

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

Hi Trevor, I didn't thin of

Hi Trevor,

I didn't thin of just adding in another DIV.
I assumed that I was going to be adding a border into sub-header two.
Turned out to be a lot simpler than I thought.

The voice of experience, I am sure.

I do have a further question, though sorry.

The CSS/HTML you provided me with (that I have been having a play with works fine and dnady on IE6 and FF2.0. But does not work on IE7.

I am assuming something is awry in the ie7style.css.
The shadow borders do not work.

I ammended it slightly from your original by adding in an extra 50 pixels to the margin, as I made the left column 200px and your's was 150.
Other than that no other changes have occured.

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

If you have any further thoughts, I'd appreciate it.

Smith & Wesson
The original point and click device.

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

Hi I'll take a gander at

Hi

I'll take a gander at the ie7 issue in a bit.

The problem with putting a border on the header (or footer) divs is they have height, and height plus borders = cockup for IE5.x

Such is life.

Trevor

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

IE5 what's that then?

IE5 what's that then?

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 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi What you have done is to

Hi

What you have done is to make your left column 200px wide, and the page width is still 770px.

So, the other column should be 770-200= 570px.

Then, the shady bits are 9px wide each side, so take these off and you get 552px. Look in the css for the old value of 602px and replace with the 552.

The same will apply with the ie fix css, where the width will decrease from 611px by 50px to 561px (ie 552 plus 9px).

Did you like the shadybordermaker? Does a good job, albeit it makes pngs. Convert them to gifs to make them a bit smaller, if you haven't already.

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

Hugo wrote:IE5 what's that

Hugo wrote:
IE5 what's that then?

That's something we used to use with those 14.4 k modems and Qemm!

Smith & Wesson
The original point and click device.

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

Hugo wrote:IE5 what's that

Hugo wrote:
IE5 what's that then?

I am not even going to tell you what my site stats are, but suffice it say that, given the nature of my site, I am disgusted so many still use it. More than use FF2. God help us.

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

ClevaTreva wrote:Hi What

ClevaTreva wrote:
Hi

What you have done is to make your left column 200px wide, and the page width is still 770px.

So, the other column should be 770-200= 570px.

...SNIP...

Did you like the shadybordermaker? Does a good job, albeit it makes pngs. Convert them to gifs to make them a bit smaller, if you haven't already.

Could I not just add 50 pixels to the page width?

And yeah I really like the shadow border maker!
I like the appearance of the page and certainly appreciate the use of your shadybordermaker tool.

Smith & Wesson
The original point and click device.

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

Yes you can make the page

Yes you can make the page wider, but check the code for the width of the footer and header too!

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

ClevaTreva wrote:Yes you can

ClevaTreva wrote:
Yes you can make the page wider, but check the code for the width of the footer and header too!

Hi Trevor...

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

Thanks very much for all your help.
I have managed to get it working in both FF2 and IE7.

I wouldn't mind understanding how it works though.
Is there an exisitng forum topic that explains floats?

Smith & Wesson
The original point and click device.

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

Floats Explained. MMM,

Floats Explained. MMM, where's that old list of links?

ah yes:

http://j-cafe.com/floats.html

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

I am sure I am going to end

I am sure I am going to end up saying thanks quite a lot while I am learning....

But none the less - thanks once again!

Smith & Wesson
The original point and click device.

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

TroubZ wrote:I am sure I am

TroubZ wrote:
I am sure I am going to end up saying thanks quite a lot while I am learning....

But none the less - thanks once again!

As long as you are learning Smile