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.

validation help with bloated CSS code

Discussion in 'CSS' started by GOLGO-13, Nov 2, 2004.

0
  1. #1
    hello! my first post!!
    well i'm trying to make the move to total CSS layouts. i've gotten a lot of input from people which has been VERY helpfull, and based on that input, i've created a rough layout that works (for the most part) in IE6 and netscape7. Even before i validated it, the code seemed bloated and repetitive.. but i dont know enough to know WHAT i can delete!! and when i ran it through a validator... YIKES!!

    can anybody take a look at it, and give me any suggestions? i dont know where to go from here. the code is just a rough layout of colored divs, that i will fill with content later (hopefully after its THINNER and validates!) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSSP</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 


<!-- document styles --> 


html,body 
{ 
margin-left:20px; 
margin-right:20px; 
margin-top:34px; 
margin-bottom:0px; 
padding:0; 
background:#000000; 
background-color:#000000; 
text-align:center;/* centre for ie5 and 5.5. */ 
min-width:800px/* for mozilla to stop sliding off the left side */ 
} 

/*containter and outter divs  oh yeah, and strange netscape comment bug here */ 

#container { 
width:781px;/*set the size*/ 
height:553px;/*my addition*/ 
margin-left:auto;/* centre for compliant browsers */ 
margin-right:auto;/* centre for compliant browsers */ 
background:#FFFFFF; 
text-align:left;/*reset text*/ 
 padding: 0px; 
} 


#section1, 
#section2, 
#data, 
#section4 
{ 
border: 0px; 
margin: 0px; 
min-height: 553px; 
height: 553px; 
float:left; 
display:inline;/* ie double margin fix*/ 
} 


 * html #section1, * html #section2{height:553px} 
 * html #section2{height:553px} 
 * html #data{height:553px} 
 * html #section4{height:553px}/* for ie*/ 

#section1 { background-color: #E14E62; width: 175px; } 
#section2 { background-color: #8E8C20; width: 178px; } 
#data { background-color: #D0ECEF; width: 391px; } 
#section4 { background-color: #E9AAF4; width: 37px; } 


<!-- data content --> 
#top, 
#nav, 
#logo, 
#content, 
#nonprof, 
#nav2, 
#bottom 
{ 
border: 0px; 
margin: 0px; 
min-widtht: 391px; 
width: 391px; 
float:left; 
display:inline;/* ie double margin fix*/ 
} 

 * html #top, * html #nav{height:79px} 
 * html #nav{height:79px} 
 * html #logo{height:79px} 
 * html #content{height:79px} 
 * html #nonprof{height:79px} 
 * html #nav2{height:79px} 
 * html #bottom{height:79px} 


#top { background-color: #FDEB55; height:79px; } 
#nav { background-color: #55EBFD; height:79px; } 
#logo { background-color: #F4CAAA; height:79px; } 
#content { background-color: #8C289E; height:79px; } 
#nonprof { background-color: #8FB42C; height:79px; } 
#nav2 { background-color: #515449; height:79px; } 
#bottom { background-color: #537103; height:79px; } 






</style> 
</head> 



<body> 

<div id="container"> 
   <div id="section1">content</div> 
   <div id="section2">content</div> 
   <div id="data"> 
      <div id="top">top</div> 
      <div id="nav">nav</div> 
      <div id="logo">logo</div> 
      <div id="content">content</div> 
      <div id="nonprof">non prof</div> 
      <div id="nav2">nav2</div> 
      <div id="bottom">bottom</div> 
   </div> 
   <div id="section4"></div> 

</div> 

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

</body> 
</html>
    Code (markup):
    the problems i've been able to notice, are that in NS7, the background color (for the body tag) isint showing (but i'm going to use an image eventually, so no biggie) and the margins dont seem to be working properly in NS7 on my 800*600 monitor. and also in NS7, for some reason, the type of comment tags i'm using, seem to be affecting the margins...??? cant figure that one out.. FYI, these are problems i can live with though.. but i would really like to know how to thin out the code (seems repetitive to me) and get on the road to validation.

    thanks for ANY input!!
     
    GOLGO-13, Nov 2, 2004 IP
  2. flawebworks

    flawebworks Tech Services

    Messages:
    991
    Likes Received:
    36
    Best Answers:
    1
    Trophy Points:
    78
    #2
    First; separate the css from the html. Create a separate css file for the css; and validate it that way. I did testing it; and the background showed up. It'll create less confusion for you. Link to it in between the <head></head> tags like so:

    <link rel="stylesheet" href="val.css" type="text/css" />

    No style tags needed; and I would lose the comments too if the style sheet is yours.
     
    flawebworks, Nov 2, 2004 IP
  3. reh3363

    reh3363 Guest

    Messages:
    147
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #3
    IMO opinion comments are a good thing. If you go back to your code in a few months it will be a little easier to understand. Just don't go overboard with comments and it will be fine.

    Also if you put your style declarations on one line like so:

    

#yourCode { 
background: #fff; width: 100%; padding: 0; margin: 0;
}

instead of

#yourCode { 
background: #fff; 
width: 100%; 
padding: 0; 
margin: 0;
}
    Code (markup):
    And use CSS shorthand like:

    
#yourCode {
padding: 0 4px 5px 10px;
}

instead of

#yourCode {
padding-top: 0;
padding-right: 4px;
padding-bottom: 5px;
padding-left: 10px;
}
    Code (markup):
    Using these techniques can help you reduce your code size.
     
    reh3363, Nov 8, 2004 IP
  4. dyn4mik3

    dyn4mik3 Peon

    Messages:
    126
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    also for some colors with a repeat code like (#000000) you can use the short version #000.
     
    dyn4mik3, Dec 13, 2004 IP