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.

SEO friendly CSS templates?

Discussion in 'HTML & Website Design' started by Farmer77, Jan 19, 2007.

0
  1. #1
    I searched but couldn't find a similar topic on this forum. Is there a place where I can get SEO friendly CSS templates on the net?
     
    Farmer77, Jan 19, 2007 IP
  2. ccoonen

    ccoonen Well-Known Member

    Messages:
    1,606
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    160
    #2
    Are you talking about CSS templates for a Blog? Web Directory? Web Portal?
    Please tell us which, what software(script) and version and I'm sure we could find you some templates
     
    ccoonen, Jan 19, 2007 IP
  3. Farmer77

    Farmer77 Peon

    Messages:
    232
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm looking for CSS templates just for building a static HTML site.
     
    Farmer77, Jan 19, 2007 IP
  4. kgrad

    kgrad Well-Known Member

    Messages:
    2,414
    Likes Received:
    82
    Best Answers:
    0
    Trophy Points:
    130
    #4
    kgrad, Jan 19, 2007 IP
  5. eepruls

    eepruls Peon

    Messages:
    79
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Hi,

    Not sure if you're looking for the CSS files specifically or CSS-based website templates with the CSS & HTML files. You might want to check out a1websitetemplates.com/templates/specialty_templates/css_templates.php. If this wasn't what you meant, let us know and we'll try to help you out.

    I'm not yet able to post links so the URL is truncated! Sorry!
     
    eepruls, Jan 20, 2007 IP
  6. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #6
    Are you wanting free or custom css templates?
     
    rochow, Jan 20, 2007 IP
  7. fsmedia

    fsmedia Prominent Member

    Messages:
    5,163
    Likes Received:
    262
    Best Answers:
    0
    Trophy Points:
    390
    #7
    fsmedia, Jan 20, 2007 IP
  8. kgrad

    kgrad Well-Known Member

    Messages:
    2,414
    Likes Received:
    82
    Best Answers:
    0
    Trophy Points:
    130
    #8
    kgrad, Jan 20, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I can whip up some CSS templates for you if you want. In fact, I've been thinking of putting them online (mind you, you'd have to provide the graphics, but still...).
     
    Dan Schulz, Jan 20, 2007 IP
  10. Valrod

    Valrod Peon

    Messages:
    189
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Valrod, Jan 20, 2007 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Try something like this (bear in mind this may become obsolete soon):
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

* {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	background: #FFF;
	color: #000;
}

#container {
	height: 100%;
	min-height: 100%;
	margin-bottom: -2em;
}

html>body #container {
	height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */
}

	.skipLink {
		position: absolute;
		left: -999em;
	}
	
	#header {
		background: #00F;
		color: #FFF;
		height: 80px;
		overflow: hidden;
		position: relative;
		width: 100%;
	}	
		h1, h1 span {
			background: url('/images/header.png') no-repeat; /* this is an image that will replace the default header text */
			height: 80px; /* just an example height */
			width: 618px; /* just an example width */
		}
			h1 span {
				display: block;
				margin-bottom: -80px; /* must be the same as the height of the image */
				position: relative;
				z-index: 1;
			}
			
		#header p {
			position: absolute;
				top: 2.25em;
			text-indent: 1.5em;
		}
	
	#main {
		float: left;
		margin-right: -10em; /* equal to the width of the #sidebar DIV container */
		width: 100%; /* DO NOT CHANGE OR REMOVE */
	}
		#menu {
			float: left;
			list-style: none;
			width: 7em;
		}
			#menu li {
				display: inline;
			}
			
			#menu a {
				background: #F00;
				color: #FFF;
				display: block;
				text-decoration: none;
				text-indent: 0.5em;
				width: 100%;
			}
			
			#menu a:hover {
				background: #FF0;
				color: #000;
			}
		
		#content {
			margin: 0 10em 0 7em; /* right margin is equal to the width of the sidebar, left margin is equal to the width of the menu */
		}
			#content h2 {
				text-align: center;
			}
			
			#content .section {
				padding: 0.5em 0;
			}
				#content h3 {
					padding-left: 0.5em;
				}
				
				#content p {
					padding: 0.25em 0.5em;
				}
	
	#sidebar {
		background: #999;
		color: #FFF;
		float: right;
		width: 10em;
	}
		#sidebar h2, #sidebar h3 {
			text-align: center;
		}
		
		#sidebar .section {
			padding: 0 0.25em;
		}
		
		#sidebar p {
			padding: 0 0.5em;
		}
	
	#clearFooter { /* needed to make room for the footer */
		clear: both;
		height: 2em;
	}

#footer {
	background: #FCF;
	clear: both;
	color: #333;
	height: 2em;
	position: relative;
}	
	#footer p {
		padding-top: 0.45em;
		text-align: center;
	}

-->
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">

	#container {
		height: 100%;
	}
	
/* THE FOLLOWING ARE REQUIRED TO FIX THE INFAMOUS 3 PIXEL JOG */
	#menu {
		margin-right: -3px;
	}
	
	#content {
		height: 1%; /* IE 5x and 6 treats height as min-height, so this goes here; also fixes a layout bug in legacy IE versions */
		margin-left: -3px;
	}
	
</style>
<![endif]-->
</head>
<body>
<div id="container">
	<div id="header">
		<h1><span></span>Level 1 Header</h1>
		<p>
			Tag Line
		</p>
	</div>
	<div id="main">
		<h2 class="skipLink">Main Menu (<a href="#content">Skip to Content</a>)</h2>
		<ul id="menu">
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
			<li><a href="#">Menu Item</a></li>
		</ul>
		<div id="content">
			<h2>Level 2 Header</h2>
			<div class="section">
				<h3>Content Section Header</h3>
				<p>
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
				</p>
			</div>
			<div class="section">
				<h3>Content Section Header</h3>
				<p>
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
					Lorem ipsum... Lorem ipsum... Lorem ipsum...
				</p>
			</div>
		</div>
	</div>
	<div id="sidebar">
		<h2>Sidebar Title</h2>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
		</div>
		<div class="section">
			<h3>Section Header</h3>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
			<p>Lorem ipsum...</p>
		</div>
	</div>
	<div id="clearFooter"></div>
</div>
<div id="footer">
	<p>
		Copyright &copy; 2006-2007, The Monster Under the Bed. All Rights To Scare
		Unsuspecting Children Reserved.
	</p>
</div>
</body>
</html>
    Code (markup):
    It's a "faked" 3 column floated design, the only use of absolute positioning is for the "tag line" underneath the main title. It uses some image replacement for the H1 element, but other than that, it's not that "visually stunning" as its sole purpose is to provide a "framework" from which to create a design with. I'm not too happy about the extra DIV container around the menu and content areas, and am looking into using a negative margin to "ride up" the menu the same way I have the sidebar set up.

    I also could have used the * html hack instead of a conditional comment to hold the IE<7 style rules, but there are times when a .htc file will come in pretty handy; since behaviors, expressions and filters (being the proprietary properties they are) don't validate, I thought I'd leave the CC in in case someone has to use it :).
     
    Dan Schulz, Jan 20, 2007 IP
    chem likes this.
  12. iatbm

    iatbm Prominent Member

    Messages:
    5,151
    Likes Received:
    352
    Best Answers:
    0
    Trophy Points:
    360
    #12
    Kind of every valid html/css template with content that comes first in code is considered seo friendly ;)
     
    iatbm, Jan 20, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    The "content first" myth is just a fallacy. The major search engines will find your content regardless of whether it comes before or after the menu in the source code order.

    You also have to keep in mind that people with assistive technologies and non-traditional Web browsers (PDAs, Web enabled cell phones) will thank you if you put the menu above the content, with a skip link to let them "jump" directly to the content.

    It's all about putting the human user first. Do that correctly, and the search engines will have little to no problem finding and indexing your content.
     
    Dan Schulz, Jan 20, 2007 IP
  14. pr0xy122

    pr0xy122 Peon

    Messages:
    1,649
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I was trying CSS only templates, they're not that super.
     
    pr0xy122, Jan 20, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Most of the ones online aren't. Not because the people writing them are lazy, but because the code they're writing is designed to be used by as many people with as many different skill levels in as many different situations as possible.

    Try to cater to everyone, and you'll only find yourself catering to no one. That's my take on it anyway.
     
    Dan Schulz, Jan 20, 2007 IP