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.
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.
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.
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
IE5 what's that then?
IE5 what's that then?
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.
Hugo wrote:IE5 what's that
IE5 what's that then?
That's something we used to use with those 14.4 k modems and Qemm!
Hugo wrote:IE5 what's that
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.
ClevaTreva wrote:Hi What
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.
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!
ClevaTreva wrote:Yes you can
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?
Floats Explained. MMM,
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!
TroubZ wrote:I am sure I am
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