hi there, I would like to know how to center my page both vertically and horizontally with css? if you read this thread, you'll know what I'm talking about. Thanks!!!<br />
<br />
<br />
<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=23006">http://www.htmlforums.com/showthread.ph ... adid=23006</a><!-- m --><!--content-->For me to be able to give you a decent reply I would need to know what kind of format your page is in.<br />
<br />
The first thing I would do I suggest you have a parent table that contains everything. You can the use percentage positioning to align this table. As for a vertical alignment, it depends. Is your content going to stay static, ie will it expand at some point and make the table height grow? If so then I would suggest an Iframe so you can keep the height of the table fixed. You can use scollbars in tables but this more a CSS 2.0 function and would advise against it for a few years.<br />
<br />
Gimme some idea of what your page is like, a link would be good... and then I can suggest what to do as a result.<!--content-->I don't know exactly how you would implement this on your site, but I found a good explanation of how to center stuff using CSS (<!-- m --><a class="postlink" href="http://www.wpdfd.com/editorial/wpd0103.htm#toptip">http://www.wpdfd.com/editorial/wpd0103.htm#toptip</a><!-- m -->) at Web Page Design for Designers (<!-- m --><a class="postlink" href="http://www.wpdfd.com/index.htm">http://www.wpdfd.com/index.htm</a><!-- m -->). I hope that works for you. If you need more explanation, post in this thread again.<!--content-->hey guys, here is a link to my test page.<br />
<!-- m --><a class="postlink" href="http://cloudseven.www4.dotnetplayground.com/cloudseven.asp">http://cloudseven.www4.dotnetplayground ... dseven.asp</a><!-- m --><br />
<br />
as you can see, I have a parent table centered correctly, but this method is screwing up my scrollbar script. it goes out of position when you resize the window and the up and down scroll doesn't work. That's why I want to see if I can use css and see if that works. Thanks for your replies.<!--content-->What you mean is you want the text and scroll bar inside the white block? Under the cloud7 logo? Nothing changes when I resize.<!--content-->First of all, you need to clean up your code. The very first thing in the code should be the doctype, like so:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><br />
<br />
All attribute values need to be quoted. You also have a bunch of other errors. Use the W3C HTML Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) to check your code for errors.<br />
<br />
I realize this doesn't solve your problem, but it may help and it will give you something to do while we try and figure it out.<!--content-->hey doogxela, the link your provided did the job. Thanks. and I will work on the errors you've mentioned.<br />
<br />
<br />
.cdiv {<br />
margin-top: -272px;<br />
margin-left: -360px;<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
}<!--content-->Some more errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fcloudseven.www4.dotnetplayground.com%2Fcloudseven.asp&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->) to look at.<br />
<br />
<br />
Remember to "Quote" all attributes, especially all "#FFFFFF" colors, all URLs, all "50%" sizes, and any other attribute value that contains anything other than a simple "A" to "Z" or "0" to "9" value. In HTML 4.01 it is recommended to quote all attribute values.<br />
<br />
Your <script>, <link>, <head>, and <body> errors are all caused simply by the quotes missing from the type="text/javascript" on every <script> tag.<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<br />
<br />
<br />
Fix all of those then check the link again for any last little problems and typos.<!--content-->I'm having a few problems with your site.<br />
<br />
In Opera 7.0 I get scroll bars both on the side and on the bottom of the browser. The text box is to the left of the area I assume it should be in. It sits on top of the girl, nicely covering her breasts. Opera also isn't showing the transitions you have on the links. It just switches to the hover style without all that fancy schmancy pixelation or whatever it is. Although, I seem to recall it working last time I looked at your page.<br />
<br />
Mozilla 1.3 places the entire content box at the top of the page and halfway off the left side of the screen. So I am only seeing the right half of the site. The text box is in the same location as Opera, over the breasts of the girl.<br />
<br />
IE 6.0 puts the site in the center just like you want it, even when I resize the browser. I do not, however, get a text box. It just isn't there at all.<!--content-->hey there, sorry yeh I'd just uploaded a newer file. the scroller is not there because I was playing around with a hide/show function. if you click on web community, it should show up, but the scroller doesn't work now. I'd just posted another thread for this. as for opera, I'm only coding for ie for now. I'm still pretty new to css so I want to get this site up and then pickup a book and learn more! Thanks.<!--content-->
<br />
<br />
<!-- m --><a class="postlink" href="http://www.htmlforums.com/showthread.php?s=&threadid=23006">http://www.htmlforums.com/showthread.ph ... adid=23006</a><!-- m --><!--content-->For me to be able to give you a decent reply I would need to know what kind of format your page is in.<br />
<br />
The first thing I would do I suggest you have a parent table that contains everything. You can the use percentage positioning to align this table. As for a vertical alignment, it depends. Is your content going to stay static, ie will it expand at some point and make the table height grow? If so then I would suggest an Iframe so you can keep the height of the table fixed. You can use scollbars in tables but this more a CSS 2.0 function and would advise against it for a few years.<br />
<br />
Gimme some idea of what your page is like, a link would be good... and then I can suggest what to do as a result.<!--content-->I don't know exactly how you would implement this on your site, but I found a good explanation of how to center stuff using CSS (<!-- m --><a class="postlink" href="http://www.wpdfd.com/editorial/wpd0103.htm#toptip">http://www.wpdfd.com/editorial/wpd0103.htm#toptip</a><!-- m -->) at Web Page Design for Designers (<!-- m --><a class="postlink" href="http://www.wpdfd.com/index.htm">http://www.wpdfd.com/index.htm</a><!-- m -->). I hope that works for you. If you need more explanation, post in this thread again.<!--content-->hey guys, here is a link to my test page.<br />
<!-- m --><a class="postlink" href="http://cloudseven.www4.dotnetplayground.com/cloudseven.asp">http://cloudseven.www4.dotnetplayground ... dseven.asp</a><!-- m --><br />
<br />
as you can see, I have a parent table centered correctly, but this method is screwing up my scrollbar script. it goes out of position when you resize the window and the up and down scroll doesn't work. That's why I want to see if I can use css and see if that works. Thanks for your replies.<!--content-->What you mean is you want the text and scroll bar inside the white block? Under the cloud7 logo? Nothing changes when I resize.<!--content-->First of all, you need to clean up your code. The very first thing in the code should be the doctype, like so:<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<br />
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><br />
<br />
All attribute values need to be quoted. You also have a bunch of other errors. Use the W3C HTML Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) to check your code for errors.<br />
<br />
I realize this doesn't solve your problem, but it may help and it will give you something to do while we try and figure it out.<!--content-->hey doogxela, the link your provided did the job. Thanks. and I will work on the errors you've mentioned.<br />
<br />
<br />
.cdiv {<br />
margin-top: -272px;<br />
margin-left: -360px;<br />
position: absolute;<br />
top: 50%;<br />
left: 50%;<br />
}<!--content-->Some more errors (<!-- m --><a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fcloudseven.www4.dotnetplayground.com%2Fcloudseven.asp&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=1&outline=1&sp=1&verbose=1">http://validator.w3.org/check?uri=http% ... &verbose=1</a><!-- m -->) to look at.<br />
<br />
<br />
Remember to "Quote" all attributes, especially all "#FFFFFF" colors, all URLs, all "50%" sizes, and any other attribute value that contains anything other than a simple "A" to "Z" or "0" to "9" value. In HTML 4.01 it is recommended to quote all attribute values.<br />
<br />
Your <script>, <link>, <head>, and <body> errors are all caused simply by the quotes missing from the type="text/javascript" on every <script> tag.<br />
<br />
Add alt="some text" to every <img > tag, the text reflecting what is in the dispayed image. On unimportant images, like spacer elements, a minimum of alt="" is fine. For bullet-point images, alt="*" is often used. Search engines do index the alt text. The alt attribute is a required element.<br />
<br />
<br />
Fix all of those then check the link again for any last little problems and typos.<!--content-->I'm having a few problems with your site.<br />
<br />
In Opera 7.0 I get scroll bars both on the side and on the bottom of the browser. The text box is to the left of the area I assume it should be in. It sits on top of the girl, nicely covering her breasts. Opera also isn't showing the transitions you have on the links. It just switches to the hover style without all that fancy schmancy pixelation or whatever it is. Although, I seem to recall it working last time I looked at your page.<br />
<br />
Mozilla 1.3 places the entire content box at the top of the page and halfway off the left side of the screen. So I am only seeing the right half of the site. The text box is in the same location as Opera, over the breasts of the girl.<br />
<br />
IE 6.0 puts the site in the center just like you want it, even when I resize the browser. I do not, however, get a text box. It just isn't there at all.<!--content-->hey there, sorry yeh I'd just uploaded a newer file. the scroller is not there because I was playing around with a hide/show function. if you click on web community, it should show up, but the scroller doesn't work now. I'd just posted another thread for this. as for opera, I'm only coding for ie for now. I'm still pretty new to css so I want to get this site up and then pickup a book and learn more! Thanks.<!--content-->