Need help understanding Home Page's CSS

Paul O’Brien (and others) helped me create a really nice Home Page at the beginning of 2011.

My hope is to clean up my code and get a better grasp of what each line does.

Here is a link to my Home Page (on some free host).

Not sure how to ask for help here since I have numerous questions?! :-/

Any ideas?

Debbie

Well the invalid comment delimiter on line 145 means that the page may not display potential content correctly after that point.

Huh?

Debbie

He means you are missing a >


[FONT=monospace]</div>[/FONT][FONT=monospace]<!-- End of #WRAPPER --

[/FONT]

Okay, but my question was “What is the best way to ask a bunch of questions about my code and what certain CSS lines do??”

Do I just go down my list in one thread?

Post 100 threads?

Other?

Debbie

Yes, in one thread, but perhaps ask one question at a time, starting from the top. It may be that once one question is asked, you make some changes that will clear up other potential questions. Once one question has been solved, then ask the next obvious one. :slight_smile:

Then hang on Ralph, because here I come… :wink:

Debbie

Ralph (and all),

Here is Debbie’s Test Website

And here is my index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<!-- ################## DEBBIE ##################### -->
	<!-- HTML Metadata -->
	<title>Debbie's Site</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<!-- Page Stylesheets -->
	<link type="text/css" rel="stylesheet" href="css/_main.css" />
	<link type="text/css" rel="stylesheet" href="css/_layout.css" />
	<link type="text/css" rel="stylesheet" href="css/top_menu.css" />
</head>

<body>
	<div id="pageWrapper" class="clearfix">
		<div id="pageInner">
			<!-- BODY HEADER -->
			<?php	require_once('components/body_header.inc.php');	?>

			<!-- LEFT COLUMN -->
			<div id="pageLeftCol">
				left
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
			</div><!-- End of #LEFT -->


			<!-- MIDDLE COLUMN -->
			<div id="pageMidCol_3">
				middle
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
			</div><!-- End of #MIDDLE -->


			<!-- RIGHT COLUMN -->
			<div id="pageRightCol">
				right
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quam nisi,
				egestas mattis commodo a, adipiscing eget erat. Vestibulum ante ipsum primis
				in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices
				lacus nec leo mattis vestibulum. Donec pharetra luctus nisl et sollicitudin.
			</div><!-- End of #RIGHT -->

		</div><!-- End of #INNER -->
	</div><!-- End of #WRAPPER -->

	<!-- BODY FOOTER -->
	<?php	//require_once('components/body_footer.inc.php');	?>
</body>

</html><?php //Build Date: 2011-11-12 ?>

Here is part of _layout.css


/******************************************************************************/
/* PAGE LAYOUT STYLES																													*/
/******************************************************************************/
#pageWrapper{
	position: relative;												/* Create Containing Block. */
	z-index: 0;																/* Place below other elements */
	min-width: 760px;
	max-width: 1200px;
	min-height: 100%;													/* WHAT IS THIS?? */
	margin:	0px auto;
	margin-top: -60px;												/* Make space for Footer. */
	background: #FFF;													/* Fill-Color for short Middle Column. */
	text-align: left;	/* ??? */
}

Can someone please help me understand this…


	min-height: 100%;													/* WHAT IS THIS?? */

Debbie

That’s for when you want your pages to stretch to the full height of the browser window (something that’s somewhat unnatural with CSS, but can be done). A thread that details this usage is here:

Do I need that in my code?

Debbie

The layout is broken in the link that you gave. (Middle column extends over right column.)

Do you want a 100% tall page? At the moment it doesn’t look like you are needing that, so I’d say no, but it’s up to you.

Not broken. What I posted is just the outer shell.

I put divs inside the outer column shells with padding to keep everything in their containers.

Debbie

I have a sticky footer.

And if a page was really short, yes, the footer should stay at the screen bottom.

Debbie

OK, then the most useful thread for understanding the CSS related to that is

It explains how to get that working, and will also clarify some of the CSS needed and why it’s in there.

TB is referring to this overlapping, though:

I think Sitepoint’s HTML and CSS books should help you get off the ground, Debbie. :slight_smile:

For the middle column you need an inner nested div with a margin-right of 400px to keep the text clear of the third column. The reason is that you are using the three floated columns layout where the middle column is 100% wide which would normally be too big to fit but is made to fit by using a negative margin on the opposite side of the float to allow content to encroach on that side.

This technique is explained in detail here.

Hi Paul.

Say, had to replace my laptop HDD and don’t have MAMP/NetBeans back up yet…

In the mean-time…

I understand what you are saying, but the whole approach to understanding my current code-base is to break things up into parts.

So what I posted is purposely not complete as you duly noted.

But what I did post, does that look okay so far?

Debbie

I understand why you would want to break things up into parts, but I’m finding it quite hard to follow like this. Could you not post the entire page, replacing the text with lorem ipsum, and replacing images with placeholders if you prefer, so that we can see all elements and how they interact? At the moment, there’s a degree of guesswork involved.

You’re asking if what you’ve posted looks OK, and all I can say is no, not unless you want two columns overlapping. The code in your actual home page presumably doesn’t display like that, so it would be easier to start from that.

Just my opinion, but I’m trying to help. :slight_smile: