SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Proper Indentation & Mockup

    Code CSS:
    <!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>Homepage</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {
    	margin:0px;
    	padding:0px;
    }
    body     {
    }
    #container {
    }
    #header {
    }
    #menu {
    }
    #menu ul {
    }
    #menu li {
    }
    #header h1 {
    }
    #header blockquote {
    }
    #readmore {
    }
    #readmore h2 {
    }
    #content {
    }
    #leftcontent {
    }
    #leftcontent img {
    }
    #leftcontent h3 {
    }
    #rightcontent {
    }
    #rightcontent p {
    }
    #rightcontent h2 {
    }
    #everything {
    }
    #everything h4 {
    }
    #twittterupdates {
    }
    #footer {
    }
    #footer h2 {
    }
    	</style>
    </head>
    <body><!-- The Start of the Markup -->
    <div id="container">
    			<div id="header">
    						<ul id="menu">
    								<li><a href="" alt="" title="">Home</a></li>
    								<li><a href="" alt="" title="">About Me</a></li>
    								<li><a href="" alt="" title="">Recent Projects</a></li>
    								<li><a href="" alt="" title="">Code Journal</a></li>
    								<li><a href="" alt="" title="">Contact Me</a></li>
    								</ul>
    										<h1>CSSispoetry</h1>
    										<blockquote>Recent Projects</blockquote>
    																	<div id="readmore">
    																			<h2>Read More</h2>
    																						 </div>
    																						 </div><!End of header-->
    																						 <div id="content">
    																						 <div id="leftcontent">
    																		<img src="" width="" height="" title="">
    															<h3>Location</h3>
    												<h3>Personal Intrests</h3>
    										<h3>Goals</h3>	
    									</div><!--End of left Content-->
    									<div id="rightcontent">
    														<h2>Hypertext Markup</h2>
    															<p>This is some text</p>
    																<h2>Cascading Styles</h2>
    																	<p>This is some text</p>
    																		<h2>Javascript</h2>
    																			<p>This is some text</p>	
    																			</div><!--End of right Content-->
    																			<div id="Everything">
    																<h4>Sitepoint</h4>
    														<h4>Facebook</h4>
    												<h4>College</h4>
    											</div><!--End of Everything-->
    										<div id="twitterupdates">
    									<p>This is some lorem lipsum</p>
    									</div><!--End of Twitter-->
    							<div id="footer">
    					<h2>&copy;Copyright 2009-2010 Blake Tallos</h2>
    					</div><!--End of footer-->
    				</div><!--End of content-->
    			</div><!--End of container-->																						
    		</body>
    	</html>

    As you can see I have an "indention" problem lol. I did the markup and CSS for this template. http://i43.tinypic.com/10dxi4n.png

    would someone correct my indentation for me? And tell me if the markup looks good.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    He gave you good links for that, anyway don't use a full tab because that can stretch your screen. Just put a few spaces, hit spacebar a few times.
    Don't like how you don't set the Content-type to utf-8 but that's just me...oh and you didn't use a fav doctype of mine .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Indentation ends up being a fairly personal thing. You can either

    pick a standard indentation (like Wirth or AT&T styles)
    or
    make your own rules for indentation and stick to them. The more important thing is to make them reliably the same throughout the document.

    I like two spacebars for each nested level in, most of the time. Then stuff doesn't go waay offscreen and wrap if I have some deep nesting.


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
  •