well the title says it all..how do i center a div layout? can anyone describe how?
and can sum1 give me a small tutorial or point me to one on div layouts..i can make them but they arnt very good.<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
To center a div you give it a width then wrap it in a div with a style with margin:auto.All the code you need is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>thank you so much guys..i appreciate it.
and can sum1 give me a small tutorial or point me to one on div layouts..i can make them but they arnt very good.<!-- m --><a class="postlink" href="http://www.glish.com/css/">http://www.glish.com/css/</a><!-- m -->
To center a div you give it a width then wrap it in a div with a style with margin:auto.All the code you need is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Center whole layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
<!--
/* text-align: center; will center the layout for IE5-Win and IE6-Win
running quirks mode (no DOCTYPE tag at beginning of document). */
body {
margin: 0;
padding: 0;
text-align: center;
}
/* The auto left and right margins center the layout in standards
browsers, IE6-Win (in standards mode) and IE5-Mac. */
#wrapper {
margin: 0 auto 0 auto;
text-align: left; /* Reset text alignment for Western languages. */
width: 770px;
}
/* Standards browsers will cut off portions of the left and right edges
of a layout if the browser viewport is too narrow, unless the
#wrapper <div> has a left and right border. Internet Explorer is not
affected by this, and the style rules are hidden. Setting the border
color to transparent initially returns a CSS syntax error at the W3C
CSS validator, so for the sake of validation, the border color is
set to transparent on a separate line. */
html>body #wrapper {
border: 1px solid #fff;
border-color: transparent;
border-top: 0;
border-bottom: 0;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<!-- Place all HTML for the entire page here. -->
</div>
</body>
</html>thank you so much guys..i appreciate it.