SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Poor structure of my CSS file...

    Hi guys, well I finally got my personal site finished, and am going over everything with a fine tooth comb before launching it, and the more I look at my css file, the more I do not like it...

    The problem is that it is simply messy, and I am not sure what to do to make it "neater"... So can anyone offer any suggestions please? Here it is...

    Code:
    /* The body tag defines the rules for the entire page. */
    
    body {
    	margin:0px;
    	padding:0px;
    	font-family:verdana, arial, helvetica, sans-serif;
    	color:#333;
    	background-color:white;
    	}
    
    /* The Header section is the top bar, using a few hacks to get things to display properly in multiple browsers. */
    
    #Header {
    	margin:50px 0px 30px 0px;
    	padding:25px 20px 15px 20px;
    	height:56px; /* 14px (Correct Height) + 40px (Padding) + 2px (Borders) = 56px */
    	border-style:solid;
    	border-color:black;
    	border-width:1px 0px;
    	line-height:0px;
    	background-color:#eee;
    	color:#000;
    	font-size:36px;
    	text-align:left;
    	font-family:verdana, arial, helvetica, sans-serif;
    
    	/* Tantek Celic's IE5 hack, see http://glish.com/css/hacks.asp for details. */
    
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	height:14px;
    	}
    
    	/* The "Be nice to Opera 5" hack that must accompany Tantek Celic's IE5 hack above. */
    
    body>#Header {
    	height:14px;
    	}
    
    /* My logo image. */
    
    #Image {
    	position:absolute;
    	top:12px;
    	right:20px;
    	}
    
    /* The content id defines the section of the page where the content will be positioned, this section is fluid and will resize with the browser appropriately.*/
    
    #Content {
    	margin:0px 50px 50px 170px;
    	padding:10px;
    	}
    
    /* The menu id is for the left hand navigation box. */
    
    #Menu {
    	position:absolute;
    	top:150px;
    	left:20px;
    	width:142px;
    	padding:10px;
    	background-color:#eee;
    	color:#000;
    	border:1px solid #000;
    	line-height:17px;
    
    	/* Again, IE5 hack. */
    	
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width:120px;
    	}
    
    	/* Again, "Be nice to Opera 5". */
    
    body>#Menu {
    	width:120px;
    	}
    
    /* The copyright section defines the positioning and formatting for the small copyright text on each page. */
    
    #Copyright {
    	clear:both;
    	padding:20px 0px 0px 0px;
    	text-align:center;
    	font-size:11px;
    	background-color:transparent;
    	color:#999;
    	}
    
    #CopyrightText {
    	position:relative;
    	left:-1.5em;
    	}
    
    /* The h1 tag is used for the sub headings on each page. */
    
    h1 {
    	margin:0px 0px 15px 0px;
    	padding:0px;
    	font-size:28px;
    	line-height:28px;
    	font-weight:normal;
    	color:#c00;
    	background-color:transparent;
    	font-family:verdana, arial, helvetica, sans-serif;
    	}
    
    /* The p(aragraph) tag defines all content text. */
    
    p {
    	font:11px verdana, arial, helvetica, sans-serif;
    	margin:0px 0px 16px 0px;
    	padding-top:20px;
    	}
    
    #Content>p {
    	margin:0px;
    	}
    
    /* Formatting for all list items. */
    
    li {
    	font:11px verdana, arial, helvetica, sans-serif;
    	}
    
    /* Formatting for all links. */
    
    a {
    	font-family:Verdana, Helvetica, arial, sans-serif;
    	font-size:11px;
    	margin-bottom:5px;
    	}
    
    a:link {
    	text-decoration:none;
    	background-color:transparent;
    	color:#000;
    	}
    
    a:visited {
    	text-decoration:none;
    	background-color:transparent;
    	color:#000;
    	}
    
    a:hover {
    	text-decoration:underline;
    	background-color:transparent;
    	color:#c00;
    	}
    
    a:active {
    	text-decoration:underline;
    	background-color:transparent;
    	color:#c00;
    	}
    
    a.ContentLink:link {
    	border-bottom:1px dotted;
    	background-color:transparent;
    	color:#000;
    	}
    
    a.ContentLink:visited {
    	text-decoration:none;
    	background-color:transparent;
    	color:#000;
    	}
    
    a.ContentLink:hover {
    	text-decoration:none;
    	background-color:transparent;
    	color:#c00;
    	}
    
    a.ContentLink:active {
    	text-decoration:none;
    	background-color:transparent;
    	color:#c00;
    	}
    
    .SubPageLink {
    	font-size:12px;
    	}
    
    .IndentedLink {
    	position:relative;
    	left:1.5em;
    	}
    
    a.SelectedLink {
    	font-family:Verdana, Helvetica, arial, sans-serif;
    	font-size:11px;
    	margin-bottom:5px;
    	text-decoration:underline;
    	background-color:transparent;
    	color:#c00;
    	}
    
    span.SelectedLink {
    	font-family:Verdana, Helvetica, arial, sans-serif;
    	font-size:11px;
    	margin-bottom:5px;
    	text-decoration:underline;
    	background-color:transparent;
    	color:#c00;
    	}
    
    .SelectedIndentedLink {
    	position:relative;
    	left:1.5em;
    	font-family:Verdana, Helvetica, arial, sans-serif;
    	font-size:11px;
    	margin-bottom:5px;
    	text-decoration:underline;
    	background-color:transparent;
    	color:#c00;
    	}
    
    /* Formatting for images in portfolio section. */
    
    .LinkImage {
    	border:0px solid #000;
    	}
    
    /* Formatting for text in portfolio section. */
    
    #PortfolioContent {
    	text-align:center;
    	}
    Now I am only new to CSS, and this is my first real go at doing a full CSS driven site, and whilst the code all works, it is simply ugly, as I had only ever planned on it being a temporary thing, and then added to it, and it grew into this...

    So... can anyone please help?

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Run it through a formatting utility like the Styel Sweeper included with Topstyle 3.0
    Wayne Luke
    ------------


  3. #3
    (****** or Deleted)
    Join Date
    May 2002
    Location
    Melbourne, Australia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Wayne, but do you know of any freeware utilities that will do the same thing? The CSS code all validates and is fine, but just looks ugly...

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You might look at the W3C website. They might have a CSSTidy program.
    Wayne Luke
    ------------



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
  •