I have this HTML which I’m working on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>templates</title>
<meta name="description" content="" />
<meta name="author" content="wobben" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" href=styles.css">
</head>
<body>
<div id="container">
<header>
<img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
</header>
<nav>
<p><a href="/">Home</a></p>
<p><a href="/contact">Contact</a></p>
</nav>
<footer>
<p>© Copyright by wobben</p>
</footer>
</div>
</body>
</html>
In the old CSS, the name of the header would be #header. Is that still that way. I’m asking because he image is on another place then the old html4 code.
I did change everything but still no luck.
I have this as html :
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="/js/modernizr-2.0.6.min.js"></script>
</head>
<body>
<div id="container">
<header>
<img src="http://www.tamarawobben.nl/images/3.jpg" alt="" width="750" height="225" />
</header>
And I have this in my css :
header {display: block; height: 225px; width: 758px; margin: 0 1px 10px 1px; background: #fff;}
#container {
width: 760px;
margin: 10px auto;
padding: 1px 0;
text-align: left;
background: #fff;
color: #303030;
}
But still the image is on the left side instead of centered.
Can anyone help me once again.
Roelof
If you want to use the new HTML5 tags while also supporting older browsers, you really need to be using Modernizr. It will help your page handle the newer tags and degrade gracefully on browsers that don’t support CSS3.
Read this article for a good explanation: http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/
To directly answer your question, use the syntax that Jason gave: