PDA

View Full Version : First major attempt at css



Spider
04-15-2011, 08:22 AM
I have been adding css elements to my code for about a year now but this is the first page fully css --

BUSINESS COACH for growing companies (http://frederickpearce.com)

I'd appreciate comments, especially regarding the code.

TIA

billbenson
04-15-2011, 02:15 PM
I'll leave comments on the code to others but it looks good on my 28" monitor which has come up before.

Harold Mansfield
04-15-2011, 04:25 PM
The actual CSS looks solid.

Spider
04-17-2011, 08:44 AM
Thanks for your comments.

vangogh
04-19-2011, 11:25 AM
Overall it looks pretty good. A few things I noticed.

1. Try to keep all the tags lowercase. title instead of TITLE. You don't have to do this to make things work in a browser, but it's good practice. At the very least be consistent, either all lowercase or all uppercase.

2. Move all your styles to an external stylesheet. You shouldn't need to have the inline styles or even the styles in the head section.

3. You're still mixing in some presentational html like the center tag. No need to use the center tag. You can center things with css. To center text you can use text-align: center.

4. Nitpicking with this, but you didn't need to use any tables for this page.

Again it looks good overall.

Spider
04-19-2011, 02:03 PM
Thanks, VG. To explain: Although the presentation doesn't look like the previous frontpage, it is, nonetheless, the old code modified as I learn css, so the page is still a bit of a transition. I know I said it was fully css, I should have said 'mostly.' It's fully css except the bits I haven't changed yet! :-D

In the past, I have used caps to help clarity - nested tables, for example, were <TABLE> ... <table>... </table>... </TABLE> -- and -- although <BR> was the same size as <br>, I would differentiate between an important <BR> and an insignificant <br> -- so there's some carryover there.

I probably will move the styles to a separate file eventually, but while learning, it helps to have the code right where the action happens, not in a totally isolated location. For the moment, a separate style sheet would be like trying to paint the front of the house while standing in the back yard!

Currently, tables behave - I am very adept with tables - they obey me! I haven't yet mastered the div - position - float left, right and round the corner. I'll get there!

vangogh
04-19-2011, 04:28 PM
With the uppercase and lowercase it'll only matter to the browser if you use an xhtml doctype in which you need to use all lowercase to be writing valid code. Lowercase is now the industry standard for tags. You can write them in uppercase and they still work, but all lowercase would be considered better coding by most who code.

Try to use indentation to help clarify the nesting. Indentation is usually enough.

Nothing wrong with keeping the styles in the file while learning. In fact one way to learn is to go through and find all the html attributes like bgcolor and replace them with a css equivalent. Once you do move things to separate files you'll see how much easier it is to maintain things. For example I think all of your table cells have valign="top" added to them. Ultimately that becomes

td {vertical-align: top}

once in your stylesheet to have every table cell across the site be vertically aligned to the top.

One way to learn is to start by turning html attributes into inline css. Then take all your inline css and translate it into a single style section in the head of the document. The last step is moving that style section to it's own file.

The table thing was more me having a little fun. :) Mastering floats and positioning is harder than setting a font-size or similar. Get the basics down first and then move into the css needed to layout a design well.

billbenson
04-19-2011, 04:41 PM
One comment on tables. Floats and positioning are hard to get a handle on at first. But keep playing with it on a simple practice page and you will get a feel for it. Additionally, the goal to steer away from tables is only in regard to page layout. If you have tabular data on a page, use tables. That's what they are for and there is no reason not to use them for that application.

Spider
04-20-2011, 11:18 AM
... One way to learn is to start by turning html attributes into inline css. Then take all your inline css and translate it into a single style section in the head of the document. The last step is moving that style section to it's own file...That's exactly what I intend to do.


Bill, I felt the row of 4 pictures and the row of 5 text blocks were rather tabular, so allowed myself to use tables there.

vangogh
04-20-2011, 12:32 PM
I think you're still using the table more for layout than tabular data. Just because something sits in rows and columns as part of the display doesn't make it tabular data. With the images I would have floated each to the left and added some margin between those images that need it. All 4 images might also be inside their own container (probably a div). You'd move the container div around within the overall layout.

You end up having styles for the container div, which will likely be sizing and positioning styles and then have styles set up for how images inside the container are sized and positioned.

Again though this isn't the easier part of css. You're approaching it the right way. Get the basics down first and as your page gets cleaned up with code moving to external stylesheets it becomes easier to understand how to do the harder parts.

Spider
04-20-2011, 02:34 PM
I realize I was stretching the envelope of what is data and what isn't but .... :-)

websonalized
04-21-2011, 08:07 PM
What are you trying to achieve with this page? Is it only for the pleasure of learning CSS? Or is this to present yourself to potential clients?

Spider
04-21-2011, 09:07 PM
..... Both

nlconsulting
05-18-2011, 09:55 PM
VG has really nailed everything thats going on with the code side so far. For a first real attempt its well done. For multiple pages is does become tremendously easier to deal with an external style sheet versus doing everything in line. Transitioning to the new HTML and XML can be very difficult, I had to brush up on everything myself for a couple of sites I've built recently. If you've gotten a feel for the way CSS functions within HTML I would recommend doing trial attempts locally to move everything to an external sheet. That way you don't have any errors or downtime on your site while you get a feel for everything.

Again, its a very good job on things so far and getting used to the minor variations between old HTML and the new just takes some time and practice.

Best of luck,
Nathan