1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

My 3rd ever full CSS design. CSS Rocks!

Discussion in 'CSS' started by axemedia, May 8, 2007.

0
  1. #1
    So i finally made the leap into CSS design and have built a few sites for clients.

    This is the 3rd in my recent evolution and I'm kinda proud of it. :)

    http://www.prenatalspa.com

    But I tell ya, I pull out a lot of hair trying to get the stylesheet workin. Then again after I upload it to the server and then can check for the FF vs IE quirks. These take me a while to figure out. And even when I do its a fluke and I dont always know what I changed and why that fix worked. But I'm learning!

    I still don't really know shit about CSS. Still hacking at trial and error and dissecting other people style sheets.

    What do you CSS guru's think of it?
     
    axemedia, May 8, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    Well, here goes my first post in CSS..

    Your site is still not 100% css. If you're going to use CSS you need to give up on using "presentational" attributes such as bgcolor, size, border, etc (you SHOULD still use width and height for images though). The whole point of HTML is to *mark up* your information, not style it.

    You need to view your page without styles and see if the structure makes sense, you have an empty paragraph in your header, and with no style there wouldn't be anything there.. you should at least have an h1 with the site name and then do some image replacement so something shows up there with no styles.

    Looks like you have a class of divitus and classitis.. you are using way too much classes and divs. Use an ID if there's going to be one instance of something such as
    navigation or content, use a class if many of the same elements are getting similarly styled. You can also combine IDs and classes, like <div id="wrapper" class="clearfix">.

    Looking at your stylesheet, I'll give you a few tips. The first would be to use a universal selector to zero out margin and padding on all elements, which eliminates a large portion of browser inconsistency (some browsers use margin on one element (such as <p> or <body>) and others use padding.. setting 0 on all of them will make it much easier for you.

    * { margin:0; padding:0;}

    You should also make use of inheritance, which is when some elements inherit their parents styles, such as font-family (there are a few elements that dont inherit font family though, such as form <input>s, <select>s, and <textarea>s)

    Here is an example of inheritance..

    body {
    font:62.5% Arial, Tahoma, Verdana, sans-serif;
    }

    p {
    font-size:1.1em;
    }

    Since the <p> is a child of the <body>, the font family gets inherited, so you do not have to type font-family all over again, you just have to set a different font size if you want to.

    I know some people will start flaming me for using the 62.5% method, as it ASSUMES the browsers default size is 16 pixels and that can be changed by the user anytime, so 62.5% of 16 pixels is not always 10 pixels (i would say this is rare case though, i have tested on many systems and its been pretty damn consistent so far).

    Oh by the way, an em is basically equal to the parent elements font size. In our case, lets assume the browsers default font size is 16 pixels. 62.5% of 16 pixels is 10 pixels. By default, almost all children of the <body> will be 10 pixels, and the only ones that aren't 10 pixels are the ones that are styled by the browser itself.An example would be the <h1>. If you're using firefox, there is a file called "html.css" which sets styles for some elements, such as an <h1>. If you were to make a first level heading such as <h1>Heading</h1>, without any styles and assuming the browser default is 16 pixels, this would be 32 pixels. The reason is because html.css has a style that gives h1 a font size of 2em, or 2 times the parent elements font size, and the parent element in this case is 16 pixels.

    In our case, we're using 62.5% which makes elements 10 pixels. So, an <h1>Heading</h1> is still getting the 2em from Firefox's "html.css", and 2 times the parent elements font size would be 20 (2*10).

    This is a pretty cool way to style everything, since you're setting everything to 10 pixels, 1em would be 10 pixels. If you have a div and set the width to 10em, it would be 100 pixels (10 times 10).

    Another advantage is that in IE, fonts wont resize if you use pixels, but if you use percentages/ems then they will resize.

    You can assign an element a font-style, font-variant, font-weight, font-size, line-height, and font-family with just one property, the font property.

    Example:

    h2 { font: italic small-caps bold 2em/1.5 Arial, Helvetica, sans-serif; }

    (italic = font style, small-caps = font-variant, bold = font-weight, 2em = font-size, 1.5em = line-height, Arial, Helvetica, sans-serif = font-family.)

    You don't have to specify ALL of those though, the least you need is a font size and font family.

    h2 { font: large Arial; }

    That is as minimalistic as it can get.




    I see that you're using some floats, just a reminder that if you have a floated element and it has a left/right margin, the margin will be doubled in IE.

    div#content { float:left; width:31em; margin-right:20px; }

    In IE, that margin-right of 20 pixels will be doubled to 40 pixels. I dont know why, but the way to fix this is to also add display:inline; (which fixes it to be a margin-right of 20 pixels in IE).



    For backgrounds, you don't have to specify the unit of measurement each time, instead of "no-repeat 0px 0px" you can do "no-repeat 0 0", but you don't really have to specify a background position for that at all, since by default its 0 0 (which is top left i believe).

    I know I didn't cover everything, but I hope the information above helped.
     
    soulscratch, May 8, 2007 IP
  3. Carlito

    Carlito Peon

    Messages:
    679
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Clean code - nice job.
     
    Carlito, May 8, 2007 IP
  4. driven

    driven Well-Known Member

    Messages:
    400
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #4
    Very nice work, Axe. Not only is it clean code but beautiful from an aesthetics standpoint. And combined with your SEO skills, any client would be lucky to have you as a designer :)
     
    driven, May 8, 2007 IP
  5. driven

    driven Well-Known Member

    Messages:
    400
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    138
    #5
    btw- what cms are you using?
     
    driven, May 8, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #6
    Define seo skills?
     
    soulscratch, May 8, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    Looks like he's using static html pages and a php page for the contact. That is unless he modified the server to have PHP in html.
     
    soulscratch, May 8, 2007 IP
  8. axemedia

    axemedia Guest

    Messages:
    1,070
    Likes Received:
    79
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Wow, lots to digest there. Thanks.

    could be cleaner, after I apply some of what soulscratch said.

    ty:)

    none. thats all hand coded

    I'll pass on that one :D

    yes all pages are static html and the one contact page is php to run the form mail script.

    I tried to add a blurb of code in htaccess so that the php page would work with an html extension but the server would not co-operate so I left it as a php extension.
     
    axemedia, May 8, 2007 IP
  9. Rockstar3

    Rockstar3 Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Like it! Looks great!
     
    Rockstar3, Apr 4, 2011 IP