How to align my site...

**anturj** · Sep 26, 2012 16:21

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...

**ralph.m** · Sep 26, 2012 16:33

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:

Code:

#wrap {
  width: 900px; 
  margin: 0 auto;
}

Then you'll need to float the columns in your content area.

**ronpat** · Sep 26, 2012 17:14

On your HTML page,

Move the style tags and statements on lines 15 through 73

Code:

<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:

Code:

<!DOCTYPE html>
<html lang="en">

You should validate your html. For example, you cannot use an id more than once:

Code:

Line 14:  <div id="login">
Line 79:  <input name="login" type="text" class="textfield" id="login" value="username" size="22" />
Line 189: <input name="login" type="text" class="textfield" id="login" />

Line 81:  <input name="password" type="password" class="textfield" id="password" value="password" size="22" />
Line 193: <input name="password" type="password" class="textfield" id="password" />

There are a few other less important errors.

This will assure that your HTML page behaves like your css is telling it to.

**anturj** · Sep 27, 2012 10:03

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

**ronpat** · Sep 27, 2012 12:24

Will post a band-aid fix consisting of modified css or instructions to modify shortly (not a rewrite.)

**ronpat** · Sep 27, 2012 12:59

Make the following changes to your css:

Code:

body {
    background-color:#d0e4fe;
    width:900px;          /* added */
    position:relative;    /* added as a reminder */
    margin:0 auto;        /* added */
}

#top {
/*  margin-left:240px;    /* delete this property */

#log {
    margin-left:484px;    /* was 724px */

#clock {
    margin-left:500px;    /* was 740px */

#side {
/*  margin-left:240px;    /* delete this property */

#signup {
    margin-left:10px;     /* was 250px */

#signupf {
    margin-left:320px;    /* was 560px */

#news {
    margin-left:640px;    /* was 880px */

#nhead {
    margin-left:640px;    /* was 880px */

#visit {
    margin-left:640px;    /* was 880px */

#profile {
    margin-left:575px;    /* was 815px */

#content {
/*  margin-left:240px;    /* delete this property */

#footer {
/*  margin-left:240px;    /* delete this property */

**anturj** · Sep 28, 2012 01:27

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

**ronpat** · Sep 28, 2012 02:55

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.

**anturj** · Sep 28, 2012 12:33

@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 !!!

**xhtmlcoder** · Sep 28, 2012 12:44

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.

**anturj** · Sep 28, 2012 12:48

so i have nothing to do ...? or its nt a problem ? then its okay !

**ronpat** · Sep 28, 2012 16:03

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:

Code:

<!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:

Code:

<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:

Code:

<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

Code:

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):

Code:

#visit table {border-color:#090;}

**anturj** · Sep 28, 2012 19:43

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

**ronpat** · Sep 28, 2012 19:44

Oops, I overlooked one more change for validation purposes:

On the index page, Lines 176 and 182, DELETE the height attribute.

Code:

   <tr height="15">

In your css file, ADD at line 169 (just above #profile)

Code:

#visit td {
    height:15px;
}

**ronpat** · Sep 28, 2012 19:52

Originally Posted by anturj

i can see it passed ...will u tell me pls that am i correct !!! tnx bro

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.

**anturj** · Sep 28, 2012 19:53

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

**anturj** · Oct 1, 2012 08:49

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....

**ronpat** · Oct 1, 2012 10:46

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.)

**anturj** · Oct 1, 2012 11:40

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

**ronpat** · Oct 1, 2012 21:25

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?

**anturj** · Oct 2, 2012 06:42

actually i want to add comment system in audio video movie and games system... yaap i know abt floats but when i select float:top; its not fully working i can see float work 10px down

**ralph.m** · Oct 2, 2012 06:48

Originally Posted by anturj

i know abt floats but when i select float:top; its not fully working i can see float work 10px down

There's no such thing as float: top ... just :left and :right.

What element does this apply to? I've lost track ...

**anturj** · Oct 2, 2012 08:46

actually i want to add comment box on my site and for that i cant fix my content area or footer but now its fixd so i am facing if content area grow up with any new contents or comment its grow up but footer position is fixed so that its look bad so i want to do footer as a familiar with content area if content grow then footer automatic go down and if content removed then footer automatic come back like FACEbook ...

**ronpat** · Oct 2, 2012 09:32

anturj, Please make a picture and put it on your web server so we can see it. I cannot tell where you want to put the comments box and what you want it to look like.

User Tag List

Thread: How to align my site...

Thread Tools

Display

How to align my site...

Bookmarks

Bookmarks

Posting Permissions