So, I know you guys have seen this a million times. But I need help centering with CSS. I have checked out several threads, and many tutorials, and cannot, for the life of me, figure this one out. Mayb it's just because it's Monday...Well, any help is appreciated, I am a noob. Thanks.
-Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
body, html{
height: 100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:740px;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
</style>
<body>
<div id="wrap">
Center this text, so that when the window is resized, the text stays centered!!!
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {text-align:center;}
#container {margin:0 auto; width:740px; text-align:left; border:1px solid red;}
-->
</style>
</head>document.getElementById()
<body>
<div id="container">
<div id="contents">contents</div>
</div>
</body>
</html>Thanks man!
-DaveOk, one more thing...
I changed the code to this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
text-align:center;
}
#container {
margin:0 0 0 0;
padding:0;
width:740px;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="container">
<div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bannerTop.gif">
</div>
<div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bannerBot.gif">
</div>
</div>
</body>
</html>
There is a gap between the two images. How do I get rid of that?
Thanks
-Dave
-Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style>
body, html{
height: 100%;
}
body {
margin:0;
padding:0;
}
#wrap {
position:relative;
width:740px;
margin:auto;
min-height:100%;
}
* html #wrap {
height:100%;
}
</style>
<body>
<div id="wrap">
Center this text, so that when the window is resized, the text stays centered!!!
</div>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {text-align:center;}
#container {margin:0 auto; width:740px; text-align:left; border:1px solid red;}
-->
</style>
</head>document.getElementById()
<body>
<div id="container">
<div id="contents">contents</div>
</div>
</body>
</html>Thanks man!
-DaveOk, one more thing...
I changed the code to this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>center contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
text-align:center;
}
#container {
margin:0 0 0 0;
padding:0;
width:740px;
text-align:left;
}
-->
</style>
</head>
<body>
<div id="container">
<div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bannerTop.gif">
</div>
<div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/bannerBot.gif">
</div>
</div>
</body>
</html>
There is a gap between the two images. How do I get rid of that?
Thanks
-Dave