SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cleaning up my code

    Hi
    Ive been adding things to my code and now ive been told that i have too much css for the layout im trying to achieve.

    http://neb.enterdesign.com.au/

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    	<title>Neb's Web Development</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	<link rel="stylesheet" type="text/css" href="styles.css">
    
    </head>
    <body>
    
    <div id="wrapper">
    
    	<div id="container">
    	
    		<div id="header">
    			<h1>Neb's Web Development</h1>
    		</div>
    	
    		<div id="content">
    			<h2>HTML and CSS Tutorials</h2>
    			<p>Neb's Web Development, presents you with the best HTML and CSS tutorials on the web.
    			They are perfect, for the beginner, creating their very first webpage, and will show them how
    			to create more advanced webpages using CSS for layout and design.</p>
    			<p>So what are you waiting for! Head over to the tutorials now!</p>
    		</div>
    	
    	</div> <!-- close container -->
    
    	<div id="nav">
    		<ul>
    		
    			<li><a href="#" class="navhead" id="current">Home</a></li>
    			
    			<li class="break"><a href="#" class="navhead">HTML:</a>
    				<ul>
    					<li><a href="#">Introduction</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    				</ul>
    			</li>
    			
    			<li class="break"><a href="#" class="navhead">CSS:</a>
    				<ul>
    					<li><a href="#">Introduction</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    					<li><a href="#">Something</a></li>
    				</ul>
    			</li>
    			
    		</ul>
    	</div>
    
    	<div id="footer">
    		<p>&copy; (name) 2007</p>
    	</div>
    
    </div> <!-- close wrapper -->
    
    </body>
    </html>
    Code:
    *
    {
    margin: 0;
    padding: 0;
    }
    
    body
    {
    background-color: #A7B8BF;
    font: 100.01&#37;/1.17 Arial, Helvetica, sans-serif;
    }
    
    #wrapper
    {
    width: 46.5em;
    margin: .6em auto;
    background-color: #EEEEFF;
    }
    
    #container
    {
    width: 37em;
    float: right;
    }
    
    #header
    {
    text-align: center;
    background: #EEEEFF url(images/tr.gif) no-repeat top right;
    }
    #header h1
    {
    font-size: 2.5em;
    padding: .3em;
    }
    
    #content
    {
    }
    #content h2
    {
    text-align: center;
    text-decoration: underline;
    padding: .6em;
    }
    #content p
    {
    padding: .6em;
    }
    
    #nav
    {
    float: left;
    width: 9em;
    line-height: 1.27;
    background: #F7F7F7 url(images/tl.gif) no-repeat top left;
    }
    #nav ul
    {
    list-style-type: none;
    background: url(images/bl.gif) no-repeat left bottom;
    padding: .6em 0;
    }
    #nav ul ul 
    {
    background: none;
    padding: 0;
    }
    #nav ul ul a
    {
    padding-left: 1.85em;
    }
    #nav a
    {
    display: block;
    }
    #nav a:link
    {
    text-decoration: none;
    color: #000000;
    }
    #nav a:visited
    {
    text-decoration: none;
    color: #000000;
    }
    #nav a:hover
    {
    }
    #nav a:active
    {
    }
    #nav .navhead
    {
    padding-left: .6em;
    }
    #nav .break
    {
    margin-top: .6em;
    }
    
    #footer
    {
    clear: both;
    background-color: #a7b8bf;
    }
    #footer p
    {
    padding: .5em;
    text-align: center;
    }
    
    /* Start IE6 Holy Hack */
    * html #footer, * html #nav a
    {
    height: 1%;
    }
    /* End IE6 Holly Hack */
    I think its the fact that i have a container and a wrapper? If i get rid of the container, and float the header and content seperately, that wouldnt work, so should I get rid of the container and header and just have the title in the content?

    Oh and also how could i equalise the content with the nav, so that i can add the bottom right rounded corner?

    Any other comments on the code? Semantics? etc? Some people say you can build layouts for IE6 without using any hacks, am i doing anything wrong?

    And finally, can anyone please... choose colours that look good, for me? I know i have made a thread on choosing colours before, but I am having trouble choosing something that people like, so if someone can just tell me 3 hex codes, for the background, header/content and nav, would be greatly appreciated.

    Thanks
    Last edited by AutisticCuckoo; Feb 13, 2008 at 08:38.

  2. #2
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, too much CSS code? Seem to be being picky.

    Try compounding your CSS classes for style values, e.g.

    #content h2, #content p {
    padding: .6em
    }

    #nav a:link, #nav a:visited {
    text-decoration: none;
    color: #000000
    }

    Remove any null classes.

    There's a cool site where users submit colour palates, I've forgot the address tho

  3. #3
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan told me before that i have too much code for the layout i am trying to achieve

  4. #4
    SitePoint Addict limepickle's Avatar
    Join Date
    Jan 2006
    Location
    Aldridge UK
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a cool site where users submit colour palates, I've forgot the address tho
    http://www.colourlovers.com/

    Is this the one?

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2007
    Posts
    150
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by limepickle View Post
    Yeah, absolutely awesome site


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
  •