SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to align my site...

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Will post a band-aid fix consisting of modified css or instructions to modify shortly (not a rewrite.)

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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 */

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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 !!!

  10. #10
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so i have nothing to do ...? or its nt a problem ? then its okay !

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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;}

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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;
    }

  15. #15
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by anturj View Post
    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.

  16. #16
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.)
    Last edited by TechnoBear; Oct 1, 2012 at 10:59. Reason: Fixed quote code

  19. #19
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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?

  21. #21
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by anturj View Post
    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 ...
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  23. #23
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    BD
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ...

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,466
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •