Absolute slew of problems…

[AnnieSeiler]

Hi guys! I’m working on a CSS assignment for class, remaking a library’s webpage. I’m having massive amounts of trouble, though, trying to align things correctly, get the footer to stay the hell at the bottom of the page, get the first header to align vertically, eventually get the sidebar to float correctly, etc.

I’ve got 3 main divs with relative positions, and absolutes within those three. As you can see, the footer (which is within div3) is showing up at the top over the main header bar, but the main content (div2) is showing up more or less where it’s supposed to be. Except for the gray bar, which is slightly FUBAR.

The right sidebar I haven’t even touched except to put it in. The Nav links don’t work – they’re all set to pages that I’m going to want to make eventually.

I’m using DreamWeaver to edit, but because of the stupid firewall at my work, I can’t upload as quickly as I want. The current incarnation of my design is at http://terpconnect.umd.edu/~ahudd07/Library/.

I really want to finish coding this, but am just about frustrated enough to start over using one of Dreamweaver’s templates. And that would just be cheating.

Help?

[TheDoc]

Your coding looks very clean, so bravo on that, it’s a good start.

You haven’t, however, set a Doctype, which is pretty important. (just search "doctype" in Google for more info)

Your main nav is wrapped in a <p> tag. This is a no-no on many different accounts, so remove it.

You have an H2 header of "Navigation" before your nav, this is unnecessary (redundant). You can remove that.

Speaking of your navigation, you have a <div> that is wrapping your <ul>. Did you know that you can actually just style the <ul> just like you would the <div>? This means you don’t have to have redundant divs wrapping everything. So instead of:

Code:

• blah blah

You can just do:

Code:

• blah blah

You also have a few errors in your CSS file which will cause things to look a little different than you intended:
http://jigsaw.w3.org/css-validator/vali … =1&lang=en

You need to assign a unit of measure any time you give a size. So for padding, for example, you can’t put:

Code:

padding: 5.5;

You need to put:

Code:

padding: 5px;

or

Code:

padding: 5.5em;

Note that ems and pixels are VERY different units of measurement.

I would also use a CSS Reset (Google that for more info if you want). I use the most simple form myself, throw this in the top of your CSS file:

Code:

* { margin:0; padding:0; }

Each browser has its own default margin and padding that it applies to certain elements on a page. What this line of code does is reset that so that you have full control over everything. It’s very important to do, and missing it is the cause of lots of headaches for people just starting out.

That should help ya fixing some of those problems!

[AnnieSeiler]

Thank you! This is a huge help to start with.

I appreciate your help. :)

[jinfiesto]

Your markup is very nice. However, you seem to suffer from mild div-itis. Target things directly when you can. Also, in terms of readability; most people consider it good practice to format their CSS in single-line format. You should also specify a doc-type in your HTML, preferably strict.

Now that we’re done doing some basic house-keeping… Your CSS needs serious work. It’s nicely commented, but you’re making lots of conceptual, and syntactical errors.

Like the previous poster, I suggest you use a CSS reset. I use a modified meyer-reset, but his will work just as well, and is admittedly much simpler. Personally, I like removing all browser defaults, but that’s up to you. A css reset is excellent because it decreases the number of "surprises" you’ll get thrown. Also can decrease your difficulty with browsers later on. (This is why I prefer a more extensive reset… It provides a lot of cross-browser consistency.)

Specifying units of measure in your css is the RULE, not the exception. Always specify units (exempting special cases such as shorthand etc…)

Also, it seems you misunderstand ems. They are a typographic measure. Use them for your fonts. Use pixels or percentages for everything else. For the record, 1 em is equal to the measure of the browser default font-size.

At this point, I would strip your HTML down to the bare essentials and restart the css. Keep in mind everything that Doc and I have said here, and you’ll probably nail it this time around. If you have any more problems, we can probably answer them.

Also, as a side note and probably a hint, if you use floats you’ll need to create a .clear class. :P just sayin.

[AnnieSeiler]

Well, overall, not a bad first attempt at CSS.

I’ve updated the page, and am previewing in my browser locally for updates.

I’ve shifted that grey bar so it lines up properly and put the sidebar in a comment so I can ignore it properly now.

My biggest problem is the footer. It’s still chilling at the top of the page! Any clues as to why that is?

[TheDoc]

"jinfiesto" wrote:

Also, in terms of readability; most people consider it good practice to format their CSS in single-line format.

I couldn’t disagree more with this. It is completely personal preference. Personally, I absolutely HATE the single-line format. It has absolutely nothing to do with "best practice".

Here are results from a poll taken not too long ago on this very site!
https://css-tricks.com/poll-results-css-formatting/

"jinfiesto" wrote:

Also, it seems you misunderstand ems. They are a typographic measure. Use them for your fonts. Use pixels or percentages for everything else. For the record, 1 em is equal to the measure of the browser default font-size.

Ems can most certainly be used for width, padding, etc. Though having any type of fluid website is usually not a good idea for a beginner to start learning with, as they can be much more difficult.

I agree with everything else you said though! :D

Annie, as for the footer, I don’t know what the footer is? There’s no "footer" div?

[AnnieSeiler]

There is. It appears on the screen as that "

* El Progreso Memorial Library
* 301 W. Main Street
* Uvalde, Texas 78801
* Phone: 830-278-2017
* Fax: 830-278-4940
* E-Mail Us

" text that runs inline across the top of the screen. There is a footer div, but it’s near the end of the source code and CSS. My prof suggested splitting the page into 3 relative divs and assigning the absolute div’s within those, but I can’t figure out how to get that footer where it’s supposed to be.

As for my div-itis – I know, it’s bad, and I’ll make direct ID’s once I get this thing figured the hell out. I have it broken down like that now cause it’s easier for me to understand with the open and close tags for now.

[TheDoc]

By the looks of it, you shouldn’t need to absolutely position any of the elements on this page. Without rewriting your CSS it’ll be hard to explain exactly. If I have a little time later today I’ll get a closer look at it.

[jinfiesto]

Doc, it’s true that the benefits of single line css are so few, that it may just boil down to personal preference. But, I may point out that it should load faster!

Also, ems are originally a typographic measure. It seems silly to me to use them for anything else! Even when typesetting, font-faces are measured in ems and width and height in respect to the page is measured in picas!

Anyways, those are my strong opinions on those subjects :p I hope I didn’t sound contentious!

Oh, and Annie, that’s an excellent first attempt at CSS! I didn’t mean to rain on your parade :p. I just tend to be very direct!

Also, I agree with doc. Seems like you could (and should) do everything with floats!

[Author]

Posts