canceling the <H2> tag space....

Discussion in 'HTML & Website Design' started by ophir.oren, Jan 4, 2007.

0
  1. #1
    I've put a <h2> tag inside my unsorted list:
    
<ul id="listMenu">
      <li><h2><a href="#">לינק 1</a></h2></li>
      <li><h2><a href="#">לינק 1</a></h2></li>
</ul>
    Code (markup):
    I'm attaching 2 images to show how it looks with and without the <h2> tag. what should I do to make it normal?
     

    Attached Files:

    ophir.oren, Jan 4, 2007 IP
  2. SERPalert

    SERPalert Guest

    Messages:
    1,003
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    0
    #2
    All I know is, you can do it with CSS. I've done it, but I looked and cannot find an example. So, it's possible, but I don't know how :)
     
    SERPalert, Jan 4, 2007 IP
  3. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I know it's possible with CSS. I'm asking if anyonw knows the right CSS code.... I've been searching google but can't find a solution....
     
    ophir.oren, Jan 4, 2007 IP
  4. SERPalert

    SERPalert Guest

    Messages:
    1,003
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    0
    #4
    SERPalert, Jan 4, 2007 IP
  5. Corey Bryant

    Corey Bryant Texan at Heart

    Messages:
    1,126
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Add 
    margin: 0px
    Code (markup):
    to your h2 styles
     
    Corey Bryant, Jan 4, 2007 IP
  6. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    thanks :)

    also, that article pointed in the upper post really helps understanding some of the basic concepts....
     
    ophir.oren, Jan 4, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Also, why are you using headings inside list items?
     
    Dan Schulz, Jan 4, 2007 IP
  8. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I was told it's good for SEO
     
    ophir.oren, Jan 4, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    It's poor semantics. And frankly, whoever told you that probably needs to have the side of his/her head introduced to a brick.

    What's the full HTML code for your site design look like? Can you post it here?
     
    Dan Schulz, Jan 5, 2007 IP
  10. JEET

    JEET Notable Member

    Messages:
    3,832
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #10
    Then why not use h1 instead of h2? ;)
     
    JEET, Jan 5, 2007 IP
  11. ophir.oren

    ophir.oren Peon

    Messages:
    141
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I'm also following other examples I've seen. In your expiriance, is there any truth in that method?
     
    ophir.oren, Jan 5, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Use headings for section headers only. Yes, you can (and should) put keywords in them, but only as long as they are relevant to the page's content in question.

    Here's an example of what I mean:
    
<!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 {
	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">

/* THE FOLLOWING ARE REQUIRED TO FIX THE INFAMOUS 3 PIXEL JOG */
	#menu {
		margin-right: -3px;
	}

	#container {
		height: 100%;
	}

	#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">
		<strong class="skipLink">Main Menu (<a href="#content">Skip to Content</a>)</strong>
		<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>Page Title</h2>
			<div class="section">
				<h3>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>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):
    Bear in mind that I left the metadata out since this is only a coding example. If you were to replace the Lorem Ipsum placeholder text with real content (while preserving the existing structure) you'd have a nice organic document structure that is already well on its way to being optimized for the search engines. All that would (basically) remain is to add the appropriate meta data in the HEAD section, and to place keywords judiciously in the page.
     
    Dan Schulz, Jan 5, 2007 IP