Great info on CSS

tZ · 06-02-2009, 10:26 AM

Your page has 68 errors and 17 warnings. The first step is to make sure the (X)HTML is valid.

The first thing I noticed that is incorrect is the nesting of the img tag within the b tag. A image can't be nested inside a b tag. You shouldn't be using the b tag either. The strong tag is the more appropriate element.

mpg · 06-03-2009, 11:51 AM

Almost all those errors have to do w/ uncoded ampersands. I need to fix all the links & files on the site that have ampersands in them. A few errors are from the AtomZ search code. I have a major problem w/ that search function anyhow, as it doesn't take the searcher to the exact place on the page where the searched word is, just to the top of the page the word is on. Don't know if that's b/c of AtomZ or some other reason.

Removing the <b> & </b> from the gallery code makes the hovered over small images appear larger to the right of the gallery rather than where the default image is. I know the tag was used in HTML to make text bold, but it doesn't do anything to the caption text in the gallery.

DesignVHL · 06-09-2009, 06:59 PM

Hi Steve!

I've told you before your site is a bit of a mess code wise - and not a fan of your template!

But we won't get into that. I don't see how you can fix the alignment - but when I get a bit of time, I'll look at it again.

In the meantime, I'd highly suggest getting Firebug and The Developer toolbar for troubleshooting - these are Firefox browser plugins. Firebug will let you workout your code and update in realtime so you can tinker till you get it right. I find it extremely helpful. Again I will take another look and see if I have any suggestions.

Everything tZ said about your code is true...except I don't even like using the strong tag - I prefer styling w/ css. Not sure why the b tag would be used with in the images...def. makes no sense.

On another note...hope you've been good. I know I'm totally MIA on the p board lately, but so is everyone else! Anyways Nice JG pics...going to see him soon in Chicago and can't wait!

Will try to get back to you soon on your site.

mpg · 06-09-2009, 09:54 PM

Code

Hi Val! Thanks for getting back on this. I don't understand the image gallery coding either, which is why I can't get it to do exactly what I want, but I didn't write it. It does work well & loads pretty quickly aside from the default image placement. Since I moved the "next gallery" to the left of the gallery peeps have been checking out the other pages whereas before few peeps had. I've been real busy posting Bobolink pix so haven't gotten around to fixing the errors. Having to reload all the many pages to account for all the ampersands doesn't thrill me. Thanks for the tip on the plug-ins.

DesignVHL · 06-09-2009, 10:09 PM

Hey no problem steve! I just got an idea....for what your doing...why not setup and use a WORDPRESS blog/site for your needs. You can create blogs/news updates on the fly, and create separate image galleries for each. There are a ton of plugins and modules also that you can play around with. It's a lot of fun! This will get the word out to more people, and will be more visually appealing as you can choose a nice template to use - and simply upload a new header graphic! I've been working more and more with wordpress and it seems like it would be less tedious to deal with, and look more professional! For your needs of constant updates, you'll be less likely to mess up the layout, and everything will be nice and aligned. Everything is done through the browser - although you can use a combination of FTP and the WP dashboard/interface. Play around I think you will come to like it. Here is one site I did with it for an example: www.juliannaraye.com

www.wordpress.com - check it out!

May take some time to setup, but once you do I think you will be very happy! And best of all it is free! I also think you might be able to map it to your website domain. If you can't, you can go more advanced by downloading wordpress and installing it on your own hosted site - that info can be found at http://www.wordpress.org.

I just feel like it is a better way to go than fixing up all the code on your site...much of which is a little outdated.

Let me know what you think...

mpg · 06-10-2009, 02:34 AM

Blog

Thanks for the suggestion. Had a blog for awhile but got rid of it once I decided to add all the music links. 1 immediate & insurmountable problem I saw regarding Wordpress was 3 GB max of space. I already have 7.2 GB on my site & still have 4500 pix to move from Photobucket & another 16,000 or so musician pix I haven't even cropped yet. I think I actually have pix of more bands that haven't been posted than have been. Scary! I'd also like to post 1000s of mind blowing scenery pix from over 200 hikes in CA, OR, WA & UT, but I haven't even scanned them yet.

It would also take forever for me to re-upload & re-caption all those pix, put them all on new pages & re-set up the other 60 non-photo pages in Wordpress. I can search & replace all the ampersands & the other validation problems (if I can figure out what some of them even mean), & although reloading every page will suck, I still think it won't take nearly as long as redoing my whole site.

While I'm fixing the problems, I'm going to add a mailing list request & menu items for comments, Live Music Updates, daily updates & Paypal. I still need to fix the problem of text moving all over the place on the Bands & Musician pages in Firefox. Adding breaks @ the end of the links didn't do the trick if there's more than one line of link buttons. ARRRRGH!!

tZ · 06-10-2009, 12:19 PM

Originally posted by DesignVHL

Everything tZ said about your code is true...except I don't even like using the strong tag - I prefer styling w/ css.

Using spans is not a good approach. A span means nothing while a strong tag suggests a form of hierarchical emphasis.

good:

HTML Code:

<p>This is <strong>important</strong>.</p>

bad:

HTML Code:

<p>This is <span>important</span>.</p>

worse:

HTML Code:

<p>This is <span class="bold">important</span>.</p>

When something is not acting as intended the first thing I always do is make sure the mark-up is valid. That narrows down and normalizes the problem.

DesignVHL · 06-10-2009, 08:50 PM

thanks tZ, I guess I need some brushing up myself.

Definitely good to keep in mind for my next web project. I guess I just assumed that css was the better way to go. Like what if I wanted to make text bold and green or something in a paragraph, wouldn't the span tag need to be used anyways to change the color? Like this:

HTML Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna neque, lacinia quis dignissim at, lacinia quis quam. Class aptent taciti sociosqu ad litora torquent per conubia <span class="bold green">nostra</span>, per inceptos himenaeos. Nunc tempor fringilla sem, eget bibendum augue sollicitudin sit amet. Phasellus iaculis interdum velit.</p>

Or should it be like this:

HTML Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna neque, lacinia quis dignissim at, lacinia quis quam. Class aptent taciti sociosqu ad litora torquent per conubia <strong><span class="green">nostra</span></strong>, per inceptos himenaeos. Nunc tempor fringilla sem, eget bibendum augue sollicitudin sit amet. Phasellus iaculis interdum velit.</p>

lol I feel like I really should know this...gah!

digizan · 06-10-2009, 11:12 PM

Originally posted by DesignVHL View Post

Like what if I wanted to make text bold and green or something in a paragraph, wouldn't the span tag need to be used anyways to change the color?

I'll jump in since tZ seems to be absent. You're making CSS harder than it needs to be. ;-)

If you wanted it bold & green in every paragraph, then you'd do this:

HTML Code:

strong {
  color: #00ff00;
}

HTML Code:

<p>Lorem ipsum <strong>dolor</strong> sit amet...</p>

If you wanted bold & green only in certain places (regardless of the tag it's nested in), then you'd do this:

HTML Code:

strong.special {
  color: #00ff00;
}

HTML Code:

<p>Lorem ipsum <strong class="special">dolor</strong> sit amet...</p>
<blockquote>Lorem ipsum <strong class="special">dolor</strong> sit amet...</blockquote>

If you wanted bold & green only in your sidebar, then you'd do this:

HTML Code:

#sidebar strong {
  color: #00ff00;
}

HTML Code:

<div id="sidebar"><p>Lorem ipsum <strong>dolor</strong> sit amet...</p></div>

If you wanted bold & green only in list items and only in your sidebar, then you'd do this:

HTML Code:

#sidebar li strong {
  color: #00ff00;
}

HTML Code:

<div id="sidebar">
  <ul>
    <li>Lorem ipsum <strong>dolor</strong> sit amet...</li>
  </ul>
</div>

If you wanted bold & green only in a special paragraph and only your sidebar, then you'd do this:

HTML Code:

#sidebar p.special strong {
  color: #00ff00;
}

HTML Code:

<div id="sidebar">
  <p class="special">Lorem ipsum <strong>dolor</strong> sit amet...</p>
  <p>Lorem ipsum <strong>dolor</strong> sit amet...</p>
</div>

If you wanted bold & green only in a table with the id of "foo", then you'd do this:

HTML Code:

table#foo strong {
  color: #00ff00;
}

HTML Code:

<table id="foo">
  <tr>
    <td>Lorem ipsum <strong>dolor</strong> sit amet...</td>
  </tr>
</table>

If you wanted bold & green only in a table with the id of "foo" and only on even rows, then you'd do this:

HTML Code:

table#foo td.even strong {
  color: #00ff00;
}

HTML Code:

<table id="foo">
  <tr>
    <td>Lorem ipsum <strong>dolor</strong> sit amet...</td>
    <td class="even">Lorem ipsum <strong>dolor</strong> sit amet...</td>
  </tr>
</table>

I could go on & on, but you're a smart lady and I'm sure you get the point. I just wanted to show that you can make your styles as broad or as specific as you need.

If it helps, I always use a CSS reset first. Then I set my layout divs & base styles for the overall document—i.e. layout div names, dimensions & backgrounds; base font family, color, and size; heading sizes, etc. Finally, I create styles on a per div basis—i.e. I add background colors/images, set padding & margins, change font sizes/faces/colors/weights, tweak line heights, create fancy bulleted lists, blockquotes, drop-caps, etc.

Naturally, some tweaking is almost always necessary. Others may do things differently, but my method works for me as it helps me avoid redundancy and specificity issues.

It also helps a lot to keep my styles in order with comments: layout, typography, tables, forms, etc. I've also started keeping my style declarations in alphabetical order like this:

HTML Code:

#sidebar blockquote p.quote {
  border: 1px solid #ccc;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size: 85%;
  line-height: 1.25em;
  padding: 0 1em;	
}

It might seem like a lot of extra work, but it's not that bad if you stay on top of it as you go along, and it saves time searching in the long run.

Please excuse any mistakes in my code—it's been a long day!

mpg: I apologize for the thread hijack. Hopefully some of the above will be useful to you also.

Digi

**garricks** · 06-11-2009, 12:04 AM

Digi, you're terrific! That post is a revelation to me. You know I'm print, not web, but I've managed to learn some HTML. This is the first time I've been able to follow along with CSS code and understand what's what. Thank you!

DesignVHL · 06-11-2009, 12:34 AM

Oh man Digi I can't even thank you enough, that was really helpful - definitely opened my mind up on some rules and methods of working things like that out. I had a few aha moments reading through that. And don't worry Steve doesn't mind if I hijack his thread, we go way back on a music message board.

FWIW, I always start off doing things the hard/long way, but eventually work it out. But very thankful when someone like you can explain it to me in a way I can understand it.

I started using a css reset a few projects ago, and actually have setup a nice starting framework using the @import screen.css, which always includes a reset, typography, layout, and nav style sheets. Has helped a lot w/ the specificity issues. Then I'll add in one for forms and tables if need be. I always comment everything. I've always been pretty good with staying organized in that manner (like naming your ps layers

). I look back at some of my older one-page css style sheets and shutter. I'm getting there! I actually think one of your threads a while back influenced me to start working my styles like that.

I like the idea of alphabetizing the declarations - mine in that respect are always different and scattered - no order or rhyme or reason! One style could have height and width first, then positioning. Where in another - I'll have positioning first. But alphabetizing - such a simple and smart solution...I'm on that boat from here on out.

Again can't thank you enough - all makes perfect sense!

digizan · 06-11-2009, 12:36 AM

Awww, you're welcome garricks.

It's kinda funny because when I started using InDesign styles, it was like "Oh! This is just like CSS."

Aaargh!! I knew I couldn't type a post that long witout a mistake.

This section:

If you wanted bold & green only in a table with the id of "foo" and only on even rows, then you'd do this:

HTML Code:

table#foo td.even strong {
  color: #00ff00;
}

HTML Code:

<table id="foo">
  <tr>
    <td>Lorem ipsum <strong>dolor</strong> sit amet...</td>
    <td class="even">Lorem ipsum <strong>dolor</strong> sit amet...</td>
  </tr>
</table>

Should have read:

If you wanted bold & green only in a table with the id of "foo" and only on td cells in even rows, then you'd do this:

HTML Code:

table#foo td.even strong {
  color: #00ff00;
}

HTML Code:

<table id="foo">
  <tr>
    <td>Lorem ipsum <strong>dolor</strong> sit amet...</td>
    <td>Lorem ipsum <strong>dolor</strong> sit amet...</td>
  </tr>
  <tr>
    <td class="even">Lorem ipsum <strong>dolor</strong> sit amet...</td>
    <td class="even">Lorem ipsum <strong>dolor</strong> sit amet...</td>
  </tr>
</table>

digizan · 06-11-2009, 01:09 AM

You're welcome, Val.

It helps sometimes if you can just see somthing as simple as someone stepping through several variations of one rule.

Originally posted by DesignVHL View Post

FWIW, I always start off doing things the hard/long way, but eventually work it out.

Sounds like someone I know...

Originally posted by DesignVHL View Post

I've always been pretty good with staying organized in that manner (like naming your ps layers

)

Ugh, I get soooo annoyed when I see unnamed layers, especially when there are a gazillion of 'em.

Originally posted by DesignVHL View Post

I'm getting there! I actually think one of your threads a while back influenced me to start working my styles like that.

I like the idea of alphabetizing the declarations....such a simple and smart solution...I'm on that boat from here on out.

I'm glad if anything I've said has helped, but I can't take much credit for it because 99% of what I pass on is just things I picked up from others and incorporated into my own workflow.

Digi

urstwile · 06-11-2009, 01:37 AM

Digi, you rock.

Great info on CSS

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment