My first CSS site!

[DarrenClark]

Hi Guys..

I’ve been working on my first CSS site. Be interested to know what you think about it and how it may possibly be improved (design wise/coding)?

All comments welcome..

Website

(The contributers section is still under construction)

Thanks,

Darren

[Hawke]

Hello there.
First of all, nice of you to now do design in CSS, welcome aboard ;)! The website look fine, basic but hey, it’s working and it’s your first CSS design :D!

Here’s a problem I found … :

Code:

 

 

 

 

 

 

 

 

 

 

 

 

Why ? Oh god why ? I don’t see why there is so many empty p on the index, and why you give them a class ? They’re empty anyway :/

And a suggestion : since your doing the website in CSS now, maybe you could replace the javascript swap image technique with the css trick ? (changing the background-position value) ?

[DarrenClark]

Hi Hawke

Thanks for your reply!

The "&nbsp" had to be put in as when viewing the site in a smaller browser window, the entire menu was not visible. Just thinking, maybe I could make this section have a minimum height, would that work? Also, I didn’t assign a class to these elements on purpose, the text within the "innerwrap" is style 2 and it looks that the &nbsp’s have just adopted that as there in the same section (wasn’t intentional!).

Darren

[iamaw]

Looks good, I like the color scheme and the layout and all…
The header is too big I think. You should also get some images or something in there with your content, all that plain text is putting me to sleep.

And yes, there is always a way to fix display problems in the stylesheet rather than your HTML markup. So if youre adding empty spaces and breaks in the HTML, youre doing something wrong! Go back to the CSS and tweak it until it’s right without the empty spaces congesting your HTML markup.

[DarrenClark]

Thanks..

I’ve amended the stylesheet to remove the nbsp’s!

As for the content, I guess it’s the nature of the site that it has to have so much text. Maybe I’ll look into that!

Darren

[DarrenClark]

Thanks Edwin, I’ll take a look into this..

[Erika]

I like it! Although I think you might be missing a letter in "Obsetrics," I think you did a great job!

It may be time for you to look into CSS sprites for your rollover effects. It’s kind of a big undertaking for a beginner in CSS, but I believe the force is strong in this one. :)

[koewnet]

What Erika is talking about can be learned from ALA’s article called CSS Sprites: Image Slicing’s Kiss of Death.

[DarrenClark]

Thanks guys, I’ll check this out too.

Is the way I’ve done my rollovers wrong, or is this new way you mention the "correct’ way of doing it?

Appreciate your comments!

Darren

[Erika]

"DarrenClark" wrote:

Thanks guys, I’ll check this out too.

Is the way I’ve done my rollovers wrong, or is this new way you mention the "correct’ way of doing it?

Appreciate your comments!

Darren

Thanks koewnet on the assist – my apologies for not providing any resources for you… but I think Chris did a nice article eons ago about sprites, and that was kind of my "a ha!" moment. http://www.csssprites.com is also a nice generator that you can use to cheat once you’ve learned about it. :)

Is the way that you’re doing it wrong? No, and yes. It works, so no… it’s not really wrong. It’s a little wrong because for one, it adds a lot of extraneous code that you don’t really need. One thing that, in one’s attempt to grow as a developer, we should all eventually focus and add to our list of priorities is trying to eliminate excess code. If you choose to do your rollovers in css, it moves all of the code that controls the effect to your CSS… thus removing the need for each "onmouseover" and "onmouseout." It removes the need to have the javascript in the head tags. That saves you a little bit of load time, is easier to manage, prevents the browser from having to load all 438574398589494 images, and makes your code a little prettier. LOL.

If you need any help getting it down pat, feel free to contact me. :)

[DarrenClark]

Hi Guys (again!)..

What’s the difference with Edwin’s method and Erika’s method for the menu?

I’ve tried to follow Edwin’s way, but the images are not changing.

Files are as follows:

HTML
CSS
JavaScript

As far as the JS goes, I have only used the one image rollover with the code Edwin gave me (Home). How would I go about adding more menu rollovers into this? Is it just a case of adding in the following for each part of the menu?

Code:

{
$(“.menulink”).mouseover(function() {
MM_swapImage(‘Image15′,”,’images/aanderoll.jpg’,1);
});
$(“.menulink”).mouseout(function() {
MM_swapImgRestore();
});

Thanks,

Darren

[DarrenClark]

..I have a feeling I have deleted something I shouldn’t have! :o

The "image 15" bit in the js brought me to this conclusion!!

[DarrenClark]

Anybody? :?

[jhallmusic]

If I were you, I’d check out the Sprite article here on Css-tricks.. (http://css-tricks.com/css-sprites-what-they-are-why-theyre-cool-and-how-to-use-them/)

The method you’re using now uses jQuery, but if you’re gonna do it that way, you should replace the whole "MM_swapImage…." stuff with a jQuery method for image replacement. I’m no jQuery pro, but you can do some stuff with the css, or change that img src attribute… anyway, you’ll need to go watch some jQuery videos, and in my opinion, that’s a bigger learning curve than sprites. (you should at some point watch some jQuery videos cause it’s awesome… check out http://www.jqueryfordesigners.com)

Using sprites, you’ll want to simply give each of those <p> elements an id, like "home" for the home page link, give it a background image of the normal home button image, and add in a :hover attribute for all of those <p> elements that switches the background image. It actually switches the position, but you’ll see that soon!

Check out that post of Chris’ and I think you’ll see that it’s going to be much easier.

(On a side note, you might want to change that menu div and those <p>’s to a <ul> with some <li>’s… it’s the way to go yo. Ask the others… they actually know what they’re talking about.)

[DarrenClark]

Thanks for that.. I’ll look into this! :D

[Author]

Posts