Lining up a header, footer, and 3 columns in CSS?

[deanavail]

After reading these great discussions, I have set out to overachieve again, plz advise if u see ways to follow recommended practices for efficient web site management.

 

First a site wide CSS style sheet:borrowing 3 column CSS style sheet at http://glish.com/css/7.asp and modifying the CSS code to make #rightcontent and #left content float at the bottom so as not be fixed. Saved all in a site wide style sheet detailed below.

 

Then the php files which will be called:

the header.php file header php This file references the following CSS :site banner, left content & right content

the footer.php file footer.php this file references the footer CSS

 

Then the actual index.php file which refences the centercontent CSS and has the includes to call up the header and the footer

index.php

 

The index.php code & CSS style sheet code are outlined below:

 

Have questions:

1. How do I modify so that the top of the centercontent lines up with the top of the left and right content?

2. How can the footer float so that it is positioned right at the bottom of the longest of the three colunms?

3. more questions later.....I promise

Thanks All, Dean

 

 

> 

<?php
include $_SERVER['DOCUMENT_ROOT']."/inc/header.php"; 
?>
<link href="Assets/CSS/3col_leftNav.css" rel="stylesheet" type="text/css">
<div id="centercontent"> 
<?php echo "This is a test" ?>
    <p><img src="Assets/Images/traders.JPG" alt="" width="150" height="100"></p>
    <p>GHOST is about .............</p>
    <p> </p>
 <p>Main Body Goes Here........ what can GHOST do for U today </p>
</div>
</div>
<?php
include $_SERVER['DOCUMENT_ROOT']."/inc/footer.php"; 
?>

 

> 

This is the code for the site wide CSS style sheet
/***********************************************/
/* 3col_leftNav.css                             */
/* Use with template 3col_leftNav.html          */
/***********************************************/
body {
margin:5px 5px 0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
#leftcontent {
position: absolute;
left:10px;
top:100px;
width:120px;
border:1px solid #000;
background:#E5EAF1 /*#99ACC7*/;
voice-family: "\"}\"";
voice-family: inherit;
  /* margin-left: 0px; 
   margin-right:121px; */
padding-bottom:10px;
/* <! height: 500px; !> */
}

#centercontent {
background:#FFFFFF;
top:100px;
margin-left: 130px;
margin-right:160px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 130px;
margin-right:160px;
float: none;
}
html>body #centercontent {
   top:100px;
margin-left: 130px;
   margin-right:160px;
}

#rightcontent {
position: absolute;
right:10px;
top:100px;
width:150px;
background:#FFFFFF;
border:1px solid #000;
/* height: 500px; */
voice-family: "\"}\"";
voice-family: inherit;
/* margin-left: 150px;
margin-right:0px; */
  padding-bottom:10px;
/* left: 611px; */
/* left: 462px; */
/* left: 701px; */
}
#banner {
background:#fff;
height:40px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
html>body #banner {
height:39px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}  
h1 {
font-size:14px;
padding-top:10px;
}  
#banner h1 {
font-size:14px;
padding:10px 10px 0px 10px;
margin:0px;
}

#rightcontent p {
}
#footer {
height:20px;
border:1px solid #000;
height:20px;
font-size: 9px;
color: #CCCCCC;
position: absolute;
top: 850px;
width: 100%;
text-align: center;
left: 10px;
}

/************other CSS style declarations*******************/

[davejenbarnes]

Ok, lemme see if I understand what you're saying:

 

You're using the holy grail glish.com skeleton, I got that much.

 

First a site wide CSS style sheet:borrowing 3 column CSS style sheet at http://glish.com/css/7.asp and modifying the CSS code to make #rightcontent and #left content float at the bottom so as not be fixed. Saved all in a site wide style sheet detailed below.

 

But what I don't get is the float at the bottom ...so as not to be fixed part. What exactly do you mean? I think I'm confused because the float property in CSS has the values of left, right, or none, not fixed... the fixed is what's throwing me off because fixed is a value of the position property not the float property. With me so far?

 

As for PHP, I haven't delved into it any more than knowing it's what makes my gallery run, so I can't help ya with that part, nor do I understand it.

 

1. How do I modify so that the top of the centercontent lines up with the top of the left and right content?

Now, by looking at the code you so generously provided, I would assume that the top: 100px; would cause the top of #centercontent to line up with that of your #leftcontent and #rightcontent as long as #leftcontent and #rightcontent also have top: 100px; set as their values. Does it not line up when you use this CSS? What you've done is what I would try... except that I don't know by reading the code how php would show up on a page. I did notice in the snippit of code you provided that you have an extra </div> tag.

 

2. How can the footer float so that it is positioned right at the bottom of the longest of the three colunms?

 

Ok, this is an easy one. Try adding this to your #footer { stuff:

 

clear: both;

 

To quote my favorite book: "Setting a clear property on an element lets you specify that it should appear below any floating elements that would normally cut into it. You can specify that the element should be clear of left-floated elements, right-floated elements, or both." (HTML Utopia: Designing Without Tables Using CSS by Dan Shafer, pg. 332)

 

In other words: If you use it, use it in one of the three possible ways

 

clear: left; clear: both; clear: right;

 

clear is one of the best-kept secrets of CSS. A lot of people want their layout to do what this does but don't know to use it to get the results they're looking for.

 

Best wishes and sorry I didn't completely understand the float/fixed issue!

 

Jennifer

[deanavail]

Thank you Jennifer for taking a look at my post....Ok I am very green so I copy and change things to see if it does what I want it to....I have taken the holy grail glish.com skeleton and just wanted to add a footer to ride just at the bottom of the longest of the three colunms. I have gone back and commented out the

 

voice-family: "\"}\"";

voice-family: inherit;

 

in the declaration of #leftcontent & #centercontent....

 

I also added the clear definition to the box selector for #footer just as you suggested..Thanks fot that tip...

 

unfortunately, I am still missing something because footer is hugging the bottom of centerconent even when left and right content extend beyond it see it here

 

Also, I still can not get #centercontent to lineup with #leftcontent & #rightcontent.

 

I am including the relevant css code for your review...I appreciate you looking at this....Dean

 

 

>/***********************************************/
/* 3col_leftNav.css                             */
/* Use with template 3col_leftNav.html          */
/***********************************************/
body {
margin:5px 5px 0px;
padding:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
 }
#leftcontent {
position: absolute;
left:10px;
top:100px;
width:120px;
border:1px solid #000;
background:#E5EAF1 /*#99ACC7*/;
/*voice-family: "\"}\"";
 voice-family: inherit; */
   /*	margin-left: 0px; 
  	 margin-right:121px; */
 padding-bottom:10px;
/*	<! height: 500px; !> */
 }

#centercontent {
background:#FFFFFF;
top:100px;
margin-left: 130px;
margin-right:160px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 130px;
margin-right:160px;
float: none;
 }
html>body #centercontent {
  	 top:100px;
 margin-left: 130px;
  	 margin-right:160px;
 }

#rightcontent {
position: absolute;
right:10px;
top:100px;
width:150px;
background:#DFDFFF;
border:1px solid #000;
/* height: 500px; */
/*voice-family: "\"}\"";
voice-family: inherit;*/
/*	margin-left: 150px;
margin-right:0px; */
   padding-bottom:10px;
/*	left: 611px; */
/*	left: 462px; */
/*	left: 701px; */
 }
#banner {
background:#fff;
height:40px;
border:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
 }
html>body #banner {
 height:39px;
 }
h1 {
 font-size:14px;
 padding-top:10px;
 }  
#banner h1 {
 font-size:14px;
 padding:10px 10px 0px 10px;
 margin:0px;
 }

#rightcontent p {
padding-left: 5px;
 }
#footer {
height:20px;
border:1px solid #000;
height:20px;
font-size: 9px;
color: #CCCCCC;
width: 100%;
text-align: center;
left: 10px;
clear: both;
padding: 0px;
margin-top: 10px;
 }

[davejenbarnes]

Ok, it is very late on my end of the world, so I (hope you don't mind) snagged your code from the site (thanks for the link. Seeing it misbehaving in action is sooooo helpful) for both your css and index.php, saved it on my computer, and will take a look at it first thing after a refreshing snooze so my eyes aren't stinging and I don't confuse myself! I will mess with it offline and see what I can find then update you with the info. Hopefully there are others out there following this thread with some more expertise than I have, as I am "green" as well, having just finished my first real (not geocities) site as well. I do seem to be able to "trial and error" my way through though, so ... we'll see. Hopefully it won't take long for me to sniff out the culprit.

 

Well, here's to finding the solution!

 

(I love a challange!)

 

Jennifer

 

UPDATE: I am going through the two files that I cut-and-pasted into my webdesign text editing program and right off the bat, I'm noticing that your index.php file references quite a few times a class selector of .style1 or .style2 (et cetera) in the CSS file that is simply not there, so it just uses the default font information indicated in your body element selector. . . I'm going through the index.php line by line. I'll update again later.

 

ANOTHER UPDATE: Well, the solution is always easier than you think it is... ok, what I mentioned above isn't horrible, just a detail I noticed.

 

Aside from what I updated earlier: Here's the basic "problem." The left and right content have postition: absolute; while the centercontent is just content... just there, essentially it has a static position. In both #leftcontent and #rightcontent, if you replace the position: absolute; with float: left; (or right, as appropriate) then your three columns will line up no matter how tall your header gets. Also, now you may take out the top:100px; in the #centercontent, #leftcontent, and #rightcontent as their position is related to the header. If you would like to see what I did, let me know and I'll upload your pages that I copied for you to snag, then delete them after you're done. I am really thinking this would be easier over the phone! hehe... at least this way people can follow along and hopefully get something, anything, out of it, or correct me if I'm wrong!

 

...as always, I'll keep you updated as I'm still doodling at this point.

 

Wooo-hoooo... I went ahead and stayed up late. Hey, it's the weekend!

Thumbs Up

Here's what I figured out which you can of course view source and copy. I would recommend adjusting your code instead of simply cutting and paste-ing my edited version so you learn what you're doing. I replaced all of your <p> </p>'s with <br/> which is a much simpler version and gets the same results. I added comments with <!-- tags throughout. There were many references to your stylesheet and javascript in the body of the document. Those only need to be in there once... in the head of the document. Also, just in case you're curious, your CSS is basically good. There are many things which are in there and not used, and some that should be in there and aren't (those style1, style2, etc.) unless they're just not needed. Oh, and you can see that CSS sheet here, which is really basically the same as yours, but with what I described earlier done. Again, I recommend experimenting and changing it. Cut and paste of course, but make a new reference document instead of replacing yours. That way you learn first-hand.

Edited January 10, 2004 by davejenbarnes

[davejenbarnes]

 

To quote Donkey on Shrek:

 

Let's do that again!!

 

hehe I hope you understand all that typing. Man, that was fun. I'm off to get some sleep. Let me know if any of that stuff confuses you. Good luck!!!!!!!!

 

Oh, and I didn't copy your images which is why on my reference link there're no clouds or pictures. I also added a black 1px border around part at the top that confused me momentarily.

 

Thanks again for the link. It made all the difference in the world to see it firsthand.

 

Later,

 

Jennifer

[davejenbarnes]

One more thing before I sign off and shut down.

 

Kudos to you for making a table-less site!

 

Jennifer

[deanavail]

Dear Jennifer.....Thank You a thousand times for your conscientious and thorough review....I simply hope I can return the favor.......I also wish to say that Dave is lucky to have both you and mambo, a beautiful and talented bride, and one cool cat....went through and cleaned up a bunch of stuff as you suggested

• 1.replaced   with <br> everywhere, note I used <br> instead of <br/>
  2.Eliminated references to layers in header.php for site banner and added CSS ids for #sitename, #sitename_line2, & #sitename_right within the site global CSS style sheet. Much more elegant, I agree
  3.Replaced #leftcontent and #rightcontent position:absolute with appropriate float left and right respectively
  4.I am still going to play with this to see if I was to define #centercontent position:absolute, Top=100px along with left and right content that they may all line up...I shall report on this on this thread weather it works or not.
  

So what do u think of the changes? Do u think I should revise to have an outer frame color like u have on your site? what other cosmetic CSS type changes could you recommend?

 

Kindest Regards, Dean

[davejenbarnes]

Cosmetic CSS type changes? Hmm... I am a big fan of using CSS to do things like you can see and learn here in the listomatic sections especially. I also really like the "rollover" effect with the mouse. Like when you add a hover: #yourcolorhere; kind of thing. If you ever want to experiment with layouts using CSS, this is a neat reference, although I haven't used it myself so I don't know how good a resource it actually is. And this is a good CSS advice place choc-full of links and articles. Perhaps the place I've learned the most is by emailing strangers whose sites I admire and asking them for links to places that have helped them! Oh, and I learned a huge chunk by putting my site's .html and .css files through the validation process at W3C to make my site as compatible, stable, and high-standard as I could. As far as my site's colors, I looked around my home and used colors I've been using in the fabrics (I sew a lot too) which I've decorated the place in and there ya go, my website is a reflection of my home, my real home.

 

If you want to keep experimenting with the three-column layout, I found this tutorial.

 

As far as recommendations, I say go with what you like. Surf around a LOT and don't be afraid to take a peek at sources and calling up their .css documents on their site to check out how they did what they did. Add color around it only if you would like to. There are a billion things you can do now that you're not confined by tables. Do a little dance, have a little fun!! You're on your way!

 

Thumbs Up

 

 

Jennifer

 

 

Don't be afraid to keep asking questions! This place is a wonderful place to learn and teach!

 

Rock Sign

[deanavail]

Thanks Jennifer Thumbs Up .....May I recommend to you that you look at using php includes to string up sections of your site...It is a powerful tool and it renfers quickly...u can see I am no expert but I did manage to string up my site pages using php includes..here a couple of resources

 

Dev Shed PHP

Php net Links

 

Take care.........Dean

[davejenbarnes]

Ahhhh... PHP! Something new for me to delve into Naughty!! I will add that to my list of things to research. I will add, though, that my first priority is somewhat related: I would like to get my gallery to match the theme of my site, and Gallery uses PHP, so there's where I'll get my feet wet and then I'll do the serious "What is PHP?" searching. I love learning about this stuff! I will bookmark those links. Thanks!

 

Jennifer

[deanavail]

Hello Jennifer......

 

any progress with photo/image albums........Dean

[MikeJ]

Dean, your site page now falls apart on my Safari browser. It all shows up crammed on the left side of my browser. I'll try to look through it later and see why it breaks on my browser.

 

My CSS (my css currently breaks the layout on IE 5 and earlier... I haven't had a chance to go back and fix it) uses a 3 column format based on the glish.com template on my site, so I can answer your original question. The way to line up an absolute position left and right column with a floating center column is to remember that the center column is positioned based upon what's above it (whereas the left and right columns would be in an absolute position). So, to figure out where your center column is, you have to add up your top body margin plus your banner height plus any margin you have on your banner, if any.

 

I think the primary advantage (putting the disclaimer that I am not an expert on CSS) of having the left and right columns absolute, is that no matter how small you make the browser window, it will retain 3 columns (none of the columns will drop down, however at some point your center column will get too small).

 

I went ahead and took a screen shot of safari with your current iteration of your site. It's attached. I'll still try to take a look at your current CSS when it's not past 3am.

[deanavail]

Thanks for looking at this 3 column CSS ...I am not familiar with safari...would it make a difference if the columns were specified on a relative ssale as in % versus an absolute scale as in pixel widths.....