SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Everything looking alright here with this CSS build??

    I apologize if the purpose of the forum is not to review code as a whole; I could not find a forum elsewhere on the site that deals explicitly with code. If this thread is too broad, please don't hesitate to close.

    But basically, after a lot of tinkering, this is what I have for my four-column build. I do not have a footer, and do not think I will be adding one. But apart from that, I have laid down the foundation for all I'll need by and large.

    Anything grossly incorrect? Everything works on my browsers but there could be a no-no that just hasn't struck yet.

    Thanks!

    Code:
    /* simple reset to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img, fieldset {
    border: none;
    }
    
    hr {
    display: none;
    }
    
    body {
    font-size: 90%;
    font-family: calibri,helvetica,sans-serif;
    background-image: url('image/shield_background.png');
    background-repeat: repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    text-align:center; /*center #pageWrapper in IE 5.x */
    }
    
    
    #signature {
    position: relative;
    margin: 30px 30px 70px;
    background-image:url(image/CCSignature.jpg);
    repeat: x-axis;
    height: 77px;
    width: 368px;
    border: none;
    }
    
    #signature img {
    display: none;
    }
    
    h1 {
    position: relative; /* wrap floats */
    padding: 0 0 0 0;
    font-weight: bold;
    font-size: 115%;
    font-family: "Droid Serif", helvetica, georgia, sans-serif;
    font-color: black;
    overflow: hidden;
    }
    
    p {position: relative;
    padding: 10px 0 0 0;
    font-size: 105%;
    }
    
    li {
    font-size: 105%;
    padding-left: .3em;
    padding-top: .3em;
    }
    
    
    #textWrapper {
    margin-left: auto;
    margin-right: auto;
    text-align:left;
    width: 992px;}
    
    #contentWrapper {
    }
    
    #navBar {
    margin: 0;
    padding: 0;
    background-color: white;
    list-style: none;
    font-size: 1px;
    font-family: "Droid Sans", calibri, helvetica, sans-serif;
    padding-top: 10px;
    text-align: center;
    border-bottom: 2px dotted #666;
    white-space: nowrap;
    }
    
    #navBar li {
    display:inline;
    }
    
    #navBar hr {
    display: block;
    background-color: black;
    }
    
    #hrNull {
    display: none;
    }
    
    #navBar a {
    display:-moz-inline-block;
    display:-moz-inline-box;
    display: inline-block;
    font-size: 18px;
    white-space: nowrap;
    text-decoration: none;
    color: black;
    padding: 10px 60px;
    }
    
    #navBar a:active,
    #navBar a:focus,
    #navBar a:hover {
    background: rgb(6,11,85) 0 no-repeat;
    }
    
    #navBar a:hover {
    color: gold;
    }
    
    #bcgColor {
    margin: 0 auto;
    width: 992px;
    height: 100%;
    background-color: white;
    background-repeat: repeat-y;
    }
    
    #column1, #column2, #column3, #column4, #column5, #column6, #column7 {
    top: 230px;
    float: left;
    padding: 1.5em 1.3em;
    }
    
    #column1 {
    left: 24%;
    width: 210px;
    }
    
    #column2 {
    left: 48%;
    width: 210px;
    }
    
    #column3 {
    left: 62%;
    width: 210px;
    }
    
    #column4 {
    left: 86%;
    width: 210px;
    }
    
    #column5 {
    left: 62%
    width: 500px;
    }
    
    #column6 {
    left: 48%;
    width: 680px;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you want code review then I'd suggest the Website Reviews section

    I'll request a move.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Here is my take though. You shouldn't support IE5x, thus I'd remove the text-align:centers you have in there to center IE5.

    PNGS need to be accounted for for IE6 (since they don't understand PNG transparency), a background imge on the body shouldn't be used (if you are trying to line something up) because a 1px jog can occur

    You can write shorthand code, aka instead of margin-left:auto;margin-right:auto; you ca just do margin:0 auto

    Eric Meyers reset shouldn't be used as it's too bulky, I'd make your own mini reset

    Borders don't come with most elements (like <div>s) so there isn't a need to specify border:0

    On elements like #navBar you set margin/padding to 0, but your reset does that anyway . Redundant.

    Your column placement also shouldn't be done via offset coordinates . I also see no position relative/absolute/fixed set on them, so the top: values you are setting won't even work!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,250
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)
    To quote: http://www.sitepoint.com/forums/show...5&postcount=12
    What Ryan meant was that we have a specific forum for Reviews and as you titled your thread "Code Review Request" then it could be perceived that you were looking for general reviews on how the sites works, looks and feels. Those types of questions must be asked in the review forum so that we don't have people posting "does my site look ok" type of questions and cluttering up the forums

    However, questions about bugs and fixes and css problems are fine here It's just the review type of questions that you shold avoid but any other fixes you need looked at then fire away

    Usually it's better to ask one or two questions at a time as a whole list frightens people away
    OK?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Here is my take though. You shouldn't support IE5x, thus I'd remove the text-align:centers you have in there to center IE5.

    PNGS need to be accounted for for IE6 (since they don't understand PNG transparency), a background imge on the body shouldn't be used (if you are trying to line something up) because a 1px jog can occur

    You can write shorthand code, aka instead of margin-left:auto;margin-right:auto; you ca just do margin:0 auto

    Eric Meyers reset shouldn't be used as it's too bulky, I'd make your own mini reset

    Borders don't come with most elements (like <div>s) so there isn't a need to specify border:0

    On elements like #navBar you set margin/padding to 0, but your reset does that anyway . Redundant.

    Your column placement also shouldn't be done via offset coordinates . I also see no position relative/absolute/fixed set on them, so the top: values you are setting won't even work!
    Strangely, Google has failed me.

    What are offset coordinates?

    And technically, isn't the placement of the columns in the HTML placement "enough"? I understand that you should declare positions when possible but is there any harm in utilizing the way browsers let things "stack"?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Offset coordinates are top: bottom: left: and right:

    On the column1-6 you set a top value offset..which isn't even recognized since no position is set

    Why would yo uwant to declare positions (and by that I mean offset values like top/right/bottom/left) ?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Yeah, those top and left declarations shouldn't even be doing anything - makes no sense for those to even be present.

    Me, I'm not wild about calling them "column#" either, since I'd be asking WHY is this a separate column, but that's just me. There's a reason I write my entire markup out around REAL content before I even THINK about layout.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Yeah, those top and left declarations shouldn't even be doing anything - makes no sense for those to even be present.

    Me, I'm not wild about calling them "column#" either, since I'd be asking WHY is this a separate column, but that's just me. There's a reason I write my entire markup out around REAL content before I even THINK about layout.
    Which top and left?

    And ah, I did have real content. You can't have a website with stuff to fill it with.

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Offset coordinates are top: bottom: left: and right:

    On the column1-6 you set a top value offset..which isn't even recognized since no position is set

    Why would yo uwant to declare positions (and by that I mean offset values like top/right/bottom/left) ?
    I wasn't sure how the browsers would handle un-set columns. I set the widths and they consistent fell where they belonged. However, I wasn't sure if declaring their coordinates would be necessary because, in the event something isn't placed correctly, I thought setting a left coordinate (I think of them as margins) would fix it.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well they aren't margins, and they aren't even being used because no position is set .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well they aren't margins, and they aren't even being used because no position is set .
    Hey Ryan,

    I've added a position:relative to the #column1, #column2 ... section and that seems to make any attribute/element unnecessary. I took out the top:240px

    Thank you!

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Exactly . Good job. Anything else you need answered?

    But technically, the position:relative isn't even needed, so you can remove that too.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Exactly . Good job. Anything else you need answered?

    But technically, the position:relative isn't even needed, so you can remove that too.
    Now that you mention it:

    Can I make a DIV wrapper to place a background image? Or is that still a no-no? And it should still be PNG, correct?

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,745
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You sure can . It's never been a no-no lol.

    You can have png sure, whatever file type you desire, although make sure that if it has transparency in it, and you're supporting IE6, you have some sort of PNGfix in place (like twinhelix)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •