check out the source of this page
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/">http://www.sbertalotto.com/pchelper/</a><!-- m -->
as you can see, its done with tables. i've learned this is a no no and I should use CSS. So I was fiddling with css:
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.html">http://www.sbertalotto.com/pchelper/css.html</a><!-- m -->
My problem is I want all the images and content to center in the browser window no matter what size resolution the user has. I am using absolute positioning right now and I know the content cannot move because of this.
I am not familiar with float and would be appreciative if anyone could me out.
Thanksbody{text-align:center;}<!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">
<!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
-->
</style>
</head>
<body>
<div id="text"><div id="alignment">
<p>contents</p>
</div></div>
</body>
</html>This might be a bit more complete:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
text-align: center;
margin: 0;
padding: 0;
}
#header {
background-color: #ccf;
}
#left {
position: absolute;
width: 120px;
background-color: #fcc;
}
#mainContent {
position: absolute;
left: 120px;
background-color: #ccc;
width: 490px;
}
#right {
position: absolute;
left: 610px;
width: 160px;
background-color: #cfc;
}
#wrapper {
width: 770px;
margin: 0 auto;
position: relative;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header/logo
</div><!-- end header -->
<div id="mainContent">
main content here
</div><!-- end mainContent -->
<div id="left">
Left content goes here
</div><!-- end left -->
<div id="right">
Right content goes here
</div><!-- end right -->
</div><!-- end wrapper -->
</body>
</html>
I've tested it in IE 5.01 - 6.0 on PC, Mozilla 1.6 and Opera 7.2. It works on all those browsers. Apple Safari shouldn't have any problems, nor should Netscape 6 - 7. IE5/Mac probably will. I've found that IE5/Mac doesn't create scrollbars on pages where all it's content is absolutely positioned. If you don't care about IE5/Mac, then keep the above layout. If you want to work in that browser, use floats instead.thanks everyone, you guys rockoops, ok so i tested it in netscape 7.1 and looks like crap, any idea?
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.htmlOriginally">http://www.sbertalotto.com/pchelper/css.htmlOriginally</a><!-- m --> posted by mididelight
oops, ok so i tested it in netscape 7.1 and looks like crap, any idea?
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.html">http://www.sbertalotto.com/pchelper/css.html</a><!-- m -->
That URL got me a Page Not Found error. I went to <!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/">http://www.sbertalotto.com/pchelper/</a><!-- m --> and I get the HTML file, but it's being sent from the server with a mime-type of text/plain.the new url is <!-- m --><a class="postlink" href="http://pchelper.sbertalotto.comAll">http://pchelper.sbertalotto.comAll</a><!-- m --> I get is the HTML source in the browser window because the mime-type sent in the header of the HTML file is text/plain. The Web server seems to be misconfigured. Internet Explorer works fine because it doesn't pay attention to mime-types of files it receives. All other browsers do pay attention to the mime-type. Basically your site will only appear in Internet Explorer/Windows.
First thing is get the server to place mime-type: text/html; as the first line of text sent out with the HTML document. Then IE, and real Web browsers can render the page.
But yes, it does look quite messed up in IE
The next thing is to name the image slices in Image Ready so that the name explains a little about what the graphic is. 1b.jpg is meaningless and too confusing for when you go back and do maintenance on the site.
Then ditch the IMG tags in favor of background images in DIVs. All you need is an empty DIV: <div id="someID"></div>
Rewrite the main content HTML to be semantic. Get rid of the <span class="header"> and replace it with an <h1> tag. Search engines pay closer attention to the HTML tags you use. Your most important header should go in <h1> tags, you second-most important header in <h2>, etc.
Use <strong> instead of <b>. The <strong> tag has more meaning than the Bold tag. Use <em> instead of <i>. The STRONG tag makes text boldface in screen and handheld devices. The <em> tag makes text italisized.
You can ditch the image map in favor of an unordered list of links and positioning them absolutely.
Let me see what I can whip up as an example.
EDIT: Could you post a picture of what the page should look like?Got it to work in the following browsers:
Mozilla 1.6
Opera 7.2
IE 6
IE 5.5
IE 5.01
All of the above are PC browsers. You'll have to do your own Mac browser checking
I've attached a ZIP file of all the images, the CSS file, and the HTML file. Go over and feel free to ask any more questions. There's a lot there if you're just starting out with CSS.thanks alot i am goin to try and implement the changesrather than margin: 0 auto;
try using
margin: 0;
margin-left: auto;
margin-right: auto;
there are some issues with opera about the above (top) coding.check out the url again
<!-- m --><a class="postlink" href="http://pchelper.sbertalotto.com">http://pchelper.sbertalotto.com</a><!-- m -->
and use the scroll bar of the little box in the middle of the page. see something wrong? ya the text goes to high up, I have tried absolute positioning of the box but it doesnt help, I dont know what to do? Does anyone?Add top padding to the div. alternatively change the background image.
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/">http://www.sbertalotto.com/pchelper/</a><!-- m -->
as you can see, its done with tables. i've learned this is a no no and I should use CSS. So I was fiddling with css:
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.html">http://www.sbertalotto.com/pchelper/css.html</a><!-- m -->
My problem is I want all the images and content to center in the browser window no matter what size resolution the user has. I am using absolute positioning right now and I know the content cannot move because of this.
I am not familiar with float and would be appreciative if anyone could me out.
Thanksbody{text-align:center;}<!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">
<!--
#text {text-align: center}
#alignment {text-align: left; margin: auto auto; width:60%;}
p {background:red;}
-->
</style>
</head>
<body>
<div id="text"><div id="alignment">
<p>contents</p>
</div></div>
</body>
</html>This might be a bit more complete:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
<!--
body {
text-align: center;
margin: 0;
padding: 0;
}
#header {
background-color: #ccf;
}
#left {
position: absolute;
width: 120px;
background-color: #fcc;
}
#mainContent {
position: absolute;
left: 120px;
background-color: #ccc;
width: 490px;
}
#right {
position: absolute;
left: 610px;
width: 160px;
background-color: #cfc;
}
#wrapper {
width: 770px;
margin: 0 auto;
position: relative;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
Header/logo
</div><!-- end header -->
<div id="mainContent">
main content here
</div><!-- end mainContent -->
<div id="left">
Left content goes here
</div><!-- end left -->
<div id="right">
Right content goes here
</div><!-- end right -->
</div><!-- end wrapper -->
</body>
</html>
I've tested it in IE 5.01 - 6.0 on PC, Mozilla 1.6 and Opera 7.2. It works on all those browsers. Apple Safari shouldn't have any problems, nor should Netscape 6 - 7. IE5/Mac probably will. I've found that IE5/Mac doesn't create scrollbars on pages where all it's content is absolutely positioned. If you don't care about IE5/Mac, then keep the above layout. If you want to work in that browser, use floats instead.thanks everyone, you guys rockoops, ok so i tested it in netscape 7.1 and looks like crap, any idea?
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.htmlOriginally">http://www.sbertalotto.com/pchelper/css.htmlOriginally</a><!-- m --> posted by mididelight
oops, ok so i tested it in netscape 7.1 and looks like crap, any idea?
<!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/css.html">http://www.sbertalotto.com/pchelper/css.html</a><!-- m -->
That URL got me a Page Not Found error. I went to <!-- m --><a class="postlink" href="http://www.sbertalotto.com/pchelper/">http://www.sbertalotto.com/pchelper/</a><!-- m --> and I get the HTML file, but it's being sent from the server with a mime-type of text/plain.the new url is <!-- m --><a class="postlink" href="http://pchelper.sbertalotto.comAll">http://pchelper.sbertalotto.comAll</a><!-- m --> I get is the HTML source in the browser window because the mime-type sent in the header of the HTML file is text/plain. The Web server seems to be misconfigured. Internet Explorer works fine because it doesn't pay attention to mime-types of files it receives. All other browsers do pay attention to the mime-type. Basically your site will only appear in Internet Explorer/Windows.
First thing is get the server to place mime-type: text/html; as the first line of text sent out with the HTML document. Then IE, and real Web browsers can render the page.
But yes, it does look quite messed up in IE
The next thing is to name the image slices in Image Ready so that the name explains a little about what the graphic is. 1b.jpg is meaningless and too confusing for when you go back and do maintenance on the site.
Then ditch the IMG tags in favor of background images in DIVs. All you need is an empty DIV: <div id="someID"></div>
Rewrite the main content HTML to be semantic. Get rid of the <span class="header"> and replace it with an <h1> tag. Search engines pay closer attention to the HTML tags you use. Your most important header should go in <h1> tags, you second-most important header in <h2>, etc.
Use <strong> instead of <b>. The <strong> tag has more meaning than the Bold tag. Use <em> instead of <i>. The STRONG tag makes text boldface in screen and handheld devices. The <em> tag makes text italisized.
You can ditch the image map in favor of an unordered list of links and positioning them absolutely.
Let me see what I can whip up as an example.
EDIT: Could you post a picture of what the page should look like?Got it to work in the following browsers:
Mozilla 1.6
Opera 7.2
IE 6
IE 5.5
IE 5.01
All of the above are PC browsers. You'll have to do your own Mac browser checking
I've attached a ZIP file of all the images, the CSS file, and the HTML file. Go over and feel free to ask any more questions. There's a lot there if you're just starting out with CSS.thanks alot i am goin to try and implement the changesrather than margin: 0 auto;
try using
margin: 0;
margin-left: auto;
margin-right: auto;
there are some issues with opera about the above (top) coding.check out the url again
<!-- m --><a class="postlink" href="http://pchelper.sbertalotto.com">http://pchelper.sbertalotto.com</a><!-- m -->
and use the scroll bar of the little box in the middle of the page. see something wrong? ya the text goes to high up, I have tried absolute positioning of the box but it doesnt help, I dont know what to do? Does anyone?Add top padding to the div. alternatively change the background image.