Grow your CSS skills. Land your dream job.

My first CSS site!

  • # July 9, 2008 at 2:27 pm

    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

    # July 9, 2008 at 4:59 pm

    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) ?

    # July 10, 2008 at 5:50 am

    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

    # July 10, 2008 at 10:33 pm

    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.

    # July 11, 2008 at 6:24 am

    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

    # July 12, 2008 at 4:52 am

    About the design: I really like it. Nice colors, and original design. For the code: don’t forget your meta-lines and please get rid of those inline css and javascripts. You can put all your javascript and use jquery to call it on.

    So in stat of this:

    Code:
    Student Doctors

    Do this:

    Code:
    Student Doctors

    And the css:

    Code:
    div#header img {
    height: 228px;
    width:780px;
    }

    div#menu p {
    text-align: left;
    }

    div#menu a img {
    border:0;
    height: 28px;
    width:200px;
    }

    And the javascript:

    Code:

    And in that menu.js:

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

    I didn’t test the javascript, but this is about the way you should this (I am not a jQuery expert yet, still have to read some tutorials of Chris and others, but didn’t had time for it). The benefit of seperating your xhtml, css and javascript is that your markup is way cleaner and if you have to change something you know where to find it. The markup in index.html, the style in style.css and the javascript in your javascript-file(s). Good luck!

    # July 12, 2008 at 9:44 am

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

    # July 12, 2008 at 5:08 pm

    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. :)

    # July 12, 2008 at 5:22 pm

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

    # July 12, 2008 at 6:17 pm

    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

    # July 13, 2008 at 12:52 am
    "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. :)

    # July 13, 2008 at 10:34 am

    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

    # July 13, 2008 at 10:39 am

    ..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!!

    # July 17, 2008 at 8:39 am

    Anybody? :?

    # July 18, 2008 at 4:00 am

    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.)

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".