I have a website and i made it with css but when somebody visit and if his monitor is small then he need to scroll and check but i want to know how can i alingn my site that if anybody visit then my site will be aligned center automatically like table but i designed my site with css please help me for view go www.akotro.com for confarm how can i to do that…
What you need to do is remove position: absolute from all of those divs. The wrap a div around all of them with a class of “wrap”, and use this:
#wrap {
width: 900px;
margin: 0 auto;
}
Then you’ll need to float the columns in your content area.
On your HTML page,
Move the style tags and statements on lines 15 through 73
<style type="text/css">
...
...
...
</style>
and put them before the <body> tag which is currently on line 10.
You should replace the top line on your HTML page with a valid !DOCTYPE such as:
<!DOCTYPE html>
<html lang="en">
You should validate your html. For example, you cannot use an id more than once:
Line 14: <div [COLOR="#FF0000"]id="login"[/COLOR]>
Line 79: <input name="login" type="text" class="textfield" [COLOR="#FF0000"]id="login"[/COLOR] value="username" size="22" />
Line 189: <input name="login" type="text" class="textfield" [COLOR="#FF0000"]id="login"[/COLOR] />
Line 81: <input name="password" type="password" class="textfield" [COLOR="#FF0000"]id="password"[/COLOR] value="password" size="22" />
Line 193: <input name="password" type="password" class="textfield" [COLOR="#FF0000"]id="password"[/COLOR] />
There are a few other less important errors.
This will assure that your HTML page behaves like your css is telling it to.
thank u dear but in this way my site aligned left but i want to align my site CENTER … here is my footer #footer{
-webkit-border-top-right-radius:15px;
-webkit-border-top-left-radius:15px;
position:absolute;
top:910px;
margin-top:auto;
width:900px;
height:auto;
color:#ffffff;
background:#000000;
margin-left:240px;
padding-top:20px;
padding-bottom:20px;
text-align:center;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
}
@ ralph.m
Will post a band-aid fix consisting of modified css or instructions to modify shortly (not a rewrite.)
Make the following changes to your css:
body {
background-color:#d0e4fe;
[COLOR="#FF0000"]width:900px;[/COLOR] /* added */
[COLOR="#FF0000"]position:relative;[/COLOR] /* added as a reminder */
[COLOR="#FF0000"]margin:0 auto;[/COLOR] /* added */
}
#top {
[COLOR="#FF0000"]/* margin-left:240px; /* delete this property */[/COLOR]
#log {
margin-left:[COLOR="#FF0000"]484px[/COLOR]; /* was 724px */
#clock {
margin-left:[COLOR="#FF0000"]500px[/COLOR]; /* was 740px */
#side {
[COLOR="#FF0000"]/* margin-left:240px; /* delete this property */[/COLOR]
#signup {
margin-left:[COLOR="#FF0000"]10px[/COLOR]; /* was 250px */
#signupf {
margin-left:[COLOR="#FF0000"]320px[/COLOR]; /* was 560px */
#news {
margin-left:[COLOR="#FF0000"]640px[/COLOR]; /* was 880px */
#nhead {
margin-left:[COLOR="#FF0000"]640px[/COLOR]; /* was 880px */
#visit {
margin-left:[COLOR="#FF0000"]640px[/COLOR]; /* was 880px */
#profile {
margin-left:[COLOR="#FF0000"]575px[/COLOR]; /* was 815px */
#content {
[COLOR="#FF0000"]/* margin-left:240px; /* delete this property */[/COLOR]
#footer {
[COLOR="#FF0000"]/* margin-left:240px; /* delete this property */[/COLOR]
wow wow wow man Its just awesome and working properly tnx alot bro for ur kind of help 
u just working on this like u thank u so much
You are very welcome, anturj. Thank you for the feedback. Glad to know it’s working the way you want.
Please remember to fix the <style> tags and the “id” attributes as I mentioned in message #3.
Now you need to learn to write a web site without using position:absolute everywhere. You will be glad when you do.
@ronpat bro i did those but my site is okay but when i tried to check error @ http://validator.w3.org/ it saying 20 more 20 Errors, 1 warning(s) i cant understant that problem and i cant see any problem there !!!
Most of the validation errors are relating a few proprietary markup attributes and those IFRAME elements that contain the facebook stuff, IFRAME has been ‘deprecated’ in XHTML since around last century and isn’t allowed in Strict Doctype - hence some of those errors.
so i have nothing to do …? or its nt a problem ? then its okay !
anturj,
Your site looks fine.
If you are happy with a site that looks fine but has many validation errors, then you can ignore this post. If what you see is all that matters, then this post is useless. If you prefer to understand more about your code, you can follow these steps to reduce the number of validation errors from around 40 to 5.
Best wishes, whatever you choose.
INSTRUCTIONS
To stop more than half of the validation errors, change your <!DOCTYPE> from strict to transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Line 5, change the <meta> tag to:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Line 4, DELETE line 4.
Above line 9 (before the </head> tag), insert the following tag:
<title>Akotro Community</title>
Line 10, MOVE the </head> tag down the page so it is just above the <body> tag.
Line 65, this <div id=“login”> does not seem to be serving a purpose. This div and it’s close tag on Line 75 can be deleted. This will also eliminate one of the validation errors caused by duplicate id’s.
I do not know if duplicate id’s affect the form or not, but you have 2 duplicate ids in the form elements. I am not familiar with forms and cannot help you fix them.
Line 123, needs a proper post-HTML4 close tag: " />" (add the space-slash)
Line 133, “bordercolor” is a deprecated attribute… and it is set to “0” already.
So change line 133
from this:
<table border='0' align='left' cellspacing='10' bordercolor='CCFF99'>
to this:
<table border='0' align='left' cellspacing='10'>
Line 223, “bordercolor” is a deprecated attribute. It should be applied in css.
So delete the bordercolor attribute from the <table> tag (just like you did above),
and add it to the css by adding the following style above the #profile styles (around line 115):
#visit table {border-color:#090;}
o yeeeees bro i did all those and now my site is passed @ http://validator.w3.org/ thank u thank u thank u ronpat bro and others speacial tnx for RONPAT bro… i can see it passed …will u tell me pls that am i correct !!! tnx bro
Oops, I overlooked one more change for validation purposes:
On the index page, Lines 176 and 182, DELETE the height attribute.
<tr[COLOR="#FF0000"] height="15"[/COLOR]>
In your css file, ADD at line 169 (just above #profile)
[COLOR="#FF0000"]#visit td {
height:15px;
}[/COLOR]
Yes indeed, it passes with flying colors! Good job.
You can ignore my last post about the height attribute. I see that you have already fixed that. Good show.
i think it is now okay !!! bro i didnt find the line “On the index page, Lines 176 and 182, DELETE the height attribute.” in my index page some pages are included please will u tell me in which div the problem is doing ? i changed my css
wow wow wow thank u for your kind of help bro i will always remember you
bro will u help me in another problem? my footer is fixed and if my content area ia auto then it is growing but footer is still fixed. how can i do this that if content area is growing then footer is auto matycally go down…
anturj, because your entire page layout depends on position:absolute, the footer CANNOT magically push down as the content grows. The earlier advice from Ralph and me is still very good,
Now you need to learn to write a web site without using position:absolute everywhere. You will be glad when you do.
If you want the footer to magically push down, the top of the page, especially the part that grows, and the footer must be rewritten so they do not depend on absolute positioning.
Where do you want to add content? (I do not see new content on your web site.)
i didnt add any content in my site yet bro … i just test all corrects in my pc with local host i tried many times to design without position but when i tried i saw my header is down 10 px under from upper so i fixed it 0 px with positioning… after that now i want to add comment system so its need to auto down footer when comment grow up… so i need ur help to know how can i make my footer as a automatic grow up with contents heights
What do you want your web page to look like when it’s finished? Make a picture using PhotoShop or another paint program and put the image on your web site so we can talk about it.
Do you know how to work with floats?