SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Thread: CSS Critique?

  1. #1
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    CSS Critique?

    I don't use CSS often, so it would be good to know if I've got glaring errors, if there are shortcuts I could be using etc Thanks!

    Code:
    body,td		{ font-family: arial, helvetica; font-size: 12px; }
    
    A			{ text-decoration: underline; color: #000000; }
    A:link		{ text-decoration: underline; color: #000000; }
    A:active	{ text-decoration: underline; color: #000000; }
    A:visited	{ text-decoration: underline; color: #000000; }
    A:hover	{ text-decoration: underline; }
    
    #logo
    {
    	position: absolute;
    	left: 15;
    	top: 15;
    }
    
    #menu
    {
    	position: relative;
    	font-size: 10px;
    	padding-left: 5px;
    	padding-top: 2px;
    	padding-right: 2px;
    	padding-bottom: 2px;
    	display: block;
    	width: 100;
    }
    
    
    #menuwrapper
    {
    	margin-top: 92;
    }
    
    #menu, #lightbrown
    {
    	background-color: #BC9752;
    }
    
    #lightgreen, #topcell
    {
    	background-color: #9C9E8C;
    }
    
    #contentwrapper
    {
    	width: 406;
    	position: absolute;
    	top: 92;
    	left: 135;
    }
    
    #content
    {
    
    }
    
    #topcell, #botcell, #footer
    {
    	border-color: #000000;
    	border-style: solid;
    	border-top-width: 2px;
    	border-left-width: 2px;
    	border-right-width: 2px;
    	padding: 5px;
    }
    
    #topcell
    {
    	border-bottom-width: 0px;
    	font-weight: bold;
    	font-size: 12px;
    	text-align: center;
    }
    
    #botcell, #footer
    {
    	border-bottom-width: 2px;
    	margin-bottom: 15px;
    	background-color:#C7C8BD;
    }
    
    #footer
    {
    	position: absolute;
    	bottom: 10;
    	left: 135;
    	width: 406;
    	text-align: center;
    }
    For reference, an example page is: www.jobcave.com
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Jeremy,

    To save on the bandwidth some you can use the 3-digit code for color instead of 6. For example, if your color is #000000, you can use #000 instead. Both will render black. However, this only works if the two digits for R, G, or B are the same. A color like #29846D would not work, but #000066 can be shortened to #006.

    Also, if all of your <a> tags are to be underlined, then you can get rid of the multiple declarations on your page. Underline is the default. Your declarations may look something like this:
    Code:
    a {color: #000;}
    a:visited {color: #000;}
    That's all you'd need to get all links, visited or not.

    [EDIT:]You may want to try another unit measure besides pixels. Pixel measurements won't let the user change text size if they're visually impaired, etc. Try ems or relative sizes (i.e. "small, x-small"). It's more accessibility-friendly.

    I know CSS is hard at first, but after some experience it gets very easy, and the hard part becomes keeping up with specs and browser support.

    Hope this helps!
    Last edited by vgarcia; Feb 13, 2003 at 15:28.

  3. #3
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    cool,I'll make the adjustments now, thanks
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  4. #4
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ammended code

    Code:
    body,td		{ font-family: arial, helvetica; font-size: smaller; }
    
    A		{color: #000; }
    A:link		{color: #000; }
    A:active	{color: #000; }
    A:visited	{color: #000; }
    
    #logo
    {
    	position: absolute;
    	left: 15;
    	top: 15;
    }
    
    #menu
    {
    	position: relative;
    	font-size: smaller;
    	padding-left: 5px;
    	padding-top: 2px;
    	padding-right: 2px;
    	padding-bottom: 2px;
    	display: block;
    	width: 100;
    }
    
    
    #menuwrapper
    {
    	margin-top: 92;
    }
    
    #menu, #lightbrown
    {
    	background-color: #BC9752;
    }
    
    #lightgreen, #topcell
    {
    	background-color: #9C9E8C;
    }
    
    #contentwrapper
    {
    	width: 406;
    	position: absolute;
    	top: 92;
    	left: 135;
    }
    
    #content
    {
    
    }
    
    #topcell, #botcell, #footer
    {
    	border-color: #000;
    	border-style: solid;
    	border-top-width: 2px;
    	border-left-width: 2px;
    	border-right-width: 2px;
    	padding: 5px;
    }
    
    #topcell
    {
    	border-bottom-width: 0px;
    	font-weight: bold;
    	font-size: 1em;
    	text-align: center;
    }
    
    #botcell, #footer
    {
    	border-bottom-width: 2px;
    	margin-bottom: 15px;
    	background-color:#C7C8BD;
    }
    
    #footer
    {
    	position: absolute;
    	bottom: 10;
    	left: 135;
    	width: 406;
    	text-align: center;
    }
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Looks good!

  6. #6
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  7. #7
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also shortcut a lot of your code that uses the same attributes. Shortcutting really helps me to keep things short and understandable for later editing.

    Ex. Instead of:
    a {color:#000;}
    a:visted {color:#000;}

    Use the shortcut:

    a, a:visited {color:#000;}

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cool

    Code:
    body,td		{ font-family: arial, helvetica; font-size: smaller; }
    
    A, A:link, A:active, A:visited
    {
    	color: #000; 
    }
    
    #logo
    {
    	position: absolute;
    	left: 15;
    	top: 15;
    }
    
    #menuwrapper
    {
    	position: absolute;
    	top: 92;
    }
    
    #menu
    {
    	position: relative;
    	font-size: smaller;
    	padding-left: 5px;
    	padding-top: 2px;
    	padding-right: 2px;
    	padding-bottom: 2px;
    	display: block;
    	width: 100;
    }
    
    #menu, #lightbrown
    {
    	background-color: #BC9752;
    }
    
    #lightgreen, #topcell
    {
    	background-color: #9C9E8C;
    }
    
    #contentwrapper
    {
    	width: 406;
    	position: absolute;
    	top: 92;
    	left: 135;
    }
    
    #content
    {
    
    }
    
    #topcell, #botcell, #footer
    {
    	border-color: #000;
    	border-style: solid;
    	border-top-width: 2px;
    	border-left-width: 2px;
    	border-right-width: 2px;
    	padding: 5px;
    }
    
    #topcell
    {
    	border-bottom-width: 0px;
    	font-weight: bold;
    	font-size: 1em;
    	text-align: center;
    }
    
    #botcell, #footer
    {
    	border-bottom-width: 2px;
    	margin-bottom: 15px;
    	background-color:#C7C8BD;
    }
    
    #footer
    {
    	position: absolute;
    	bottom: 10;
    	left: 135;
    	width: 406;
    	text-align: center;
    }
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #menu, #lightbrown
    {
    background-color: #BC9752;
    }

    #lightgreen, #topcell
    {
    background-color: #9C9E8C;
    }


    #topcell, #botcell, #footer
    {
    border-color: #000;
    border-style: solid;
    border-top-width: 2px;
    border-left-width: 2px;
    border-right-width: 2px;
    padding: 5px;
    }

    #botcell, #footer
    {
    border-bottom-width: 2px;
    margin-bottom: 15px;
    background-color:#C7C8BD;
    }
    Ha! My bad. After my last post, I see you are already using it...

  10. #10
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, just not on the links
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  11. #11
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    things like
    Code:
    	border-top-width: 2px;
    	border-left-width: 2px;
    	border-right-width: 2px;
    can be shortened down to (assuming the top width you want is 0px)
    Code:
    border-width: 0 2px 2px;
    for instance...
    Last edited by redux; Feb 13, 2003 at 16:21.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  12. #12
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Cool! Adjustments made I'm loving this

    Code:
    body,td		{ font-family: arial, helvetica; font-size: smaller; }
    
    A, A:link, A:active, A:visited
    {
    	color: #000; 
    }
    
    #logo
    {
    	position: absolute;
    	left: 15;
    	top: 15;
    }
    
    #menuwrapper
    {
    	position: absolute;
    	top: 92;
    }
    
    #menu
    {
    	position: relative;
    	font-size: smaller;
    	padding: 5px 2px 2px 2px;
    	display: block;
    	width: 100;
    }
    
    #menu, #lightbrown
    {
    	background-color: #BC9752;
    }
    
    #lightgreen, #topcell
    {
    	background-color: #9C9E8C;
    }
    
    #contentwrapper
    {
    	width: 406;
    	position: absolute;
    	top: 92;
    	left: 135;
    }
    
    #content
    {
    
    }
    
    #topcell, #botcell, #footer
    {
    	border-color: #000;
    	border-style: solid;
    	border-width: 2px 2px 2px 0px;
    	padding: 5px;
    }
    
    #topcell
    {
    	border-bottom-width: 0px;
    	font-weight: bold;
    	font-size: 1em;
    	text-align: center;
    }
    
    #botcell, #footer
    {
    	border-bottom-width: 2px;
    	margin-bottom: 15px;
    	background-color:#C7C8BD;
    }
    
    #footer
    {
    	position: absolute;
    	bottom: 10;
    	left: 135;
    	width: 406;
    	text-align: center;
    }
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  13. #13
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's good isn't it?

    I've been messing with full css layouts recently as well...

  14. #14
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    ... how do you do comments in CSS?
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  15. #15
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /* Just Like this */

  16. #16
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and even more shorthands are possible...notice the font and border ones, and the border-width with only 3 values

    three values: top is set to the first, right and left are set to the second, bottom is set to the third
    from http://www.w3.org/TR/REC-CSS1#border-width


    Code:
    body,td		{ font: smaller "arial, helvetica"; }
    
    A, A:link, A:active, A:visited
    {
    	color: #000; 
    }
    
    #logo
    {
    	position: absolute;
    	left: 15;
    	top: 15;
    }
    
    #menuwrapper
    {
    	position: absolute;
    	top: 92;
    }
    
    #menu
    {
    	position: relative;
    	font-size: smaller;
    	padding: 5px 2px 2px;
    	display: block;
    	width: 100;
    }
    
    #menu, #lightbrown
    {
    	background-color: #BC9752;
    }
    
    #lightgreen, #topcell
    {
    	background-color: #9C9E8C;
    }
    
    #contentwrapper
    {
    	width: 406;
    	position: absolute;
    	top: 92;
    	left: 135;
    }
    
    #content
    {
    
    }
    
    #topcell, #botcell, #footer
    {
    	border: solid #000;
    	border-width: 2px 2px 0px;
    	padding: 5px;
    }
    
    #topcell
    {
    	border-bottom-width: 0px;
    	font: bold 1em;
    	text-align: center;
    }
    
    #botcell, #footer
    {
    	border-bottom-width: 2px;
    	margin-bottom: 15px;
    	background-color:#C7C8BD;
    }
    
    #footer
    {
    	position: absolute;
    	bottom: 10;
    	left: 135;
    	width: 406;
    	text-align: center;
    }
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  17. #17
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Originally posted by redux
    things like
    Code:
    	border-top-width: 2px;
    	border-left-width: 2px;
    	border-right-width: 2px;
    can be shortened down to (assuming the top width you want is 0px)
    Code:
    border-width: 0 2px 2px;
    for instance...
    Originally posted by platinum
    It's good isn't it?

    I've been messing with full css layouts recently as well...

    kinda like some kind of brotherhood, eh ? ? ?
    Last edited by Kiddeath91; Feb 13, 2003 at 18:53.

  18. #18
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hardly surprising, since we're in the CSS thread
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  19. #19
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh -

    That footer thing still bugs me though, check out here if you manually resize the content upwards or your browser can't display all the content in that window - its plonks it right at the bottom of the browser window It should be at the bottom of the page!

  20. #20
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I changed mine by putting the footer in my #contentwrapper, and just offsetting it by a load. That way, as long as the #contentwrapper is at least 80% the length of the page I'm covered. If not, no biggie though

    J
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  21. #21
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    J, if you want just quick error-checking and some pointers, you could always put it through the W3C Validator, though it can be awfully cryptic. :-)

    ~~Ian


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •