Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Location
    Canada
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Urgent! Need Helps! <center>, <float>, and <align> not working.

    Hi masters,
    I got a html design problem about using css, float and center.

    we just lunch a free online business directory site. Our users reported a problem about some web pages display not correctly. We have checked this issue and found out these problems only happen on search page , home page and directory page on our site OCEANsTown. com.

    If you use normal browse size, maximum size, to view these pages. web page will display correct. When you use mobile device or change the browser size, the center web content will move to below the left nav bar or become distortion.

    we use <float : left> for the left nav bar and use <center> or <div align: left> for the center web content. Do we do anything wrong?


    Please help! Many thanks!!
    ===========================================
    I just added my code below. please check it out. Thanks!
    Last edited by powertony; 05-31-2012 at 01:15 AM. Reason: add more information

  • #2
    New Coder
    Join Date
    May 2012
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    I think the problem lies in hard-coded pixel that you have given to your center division.Try doing something like this:

    Code:
    <div id="main"> 
    <table>
    <tr>
    <td width="20%">
    left navigation
    </td>
    <td  width="70%">
    your login & search
    </td>
    </tr>
    </table>
    </div>

  • Users who have thanked sayannayas for this post:

    powertony (05-30-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Location
    Canada
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sayannayas View Post
    I think the problem lies in hard-coded pixel that you have given to your center division.Try doing something like this:

    Code:
    <div id="main"> 
    <table>
    <tr>
    <td width="20%">
    left navigation
    </td>
    <td  width="70%">
    your login & search
    </td>
    </tr>
    </table>
    </div>
    ===========================================

    first of all, I like to thank you for your quick help. Because our web page is quite complicate, we may need different solutions.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Location
    Canada
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by powertony View Post
    Hi masters,
    I got a html design problem about using css, float and center.

    we just lunch a free online business directory site. Our users reported a problem about some web pages display not correctly. We have checked this issue and found out these problems only happen on search page , home page and directory page on our site oceanstown.com.

    If you use normal browse size, maximum size, to view these pages. web page will display correct. When you use mobile device or change the browser size, the center web content will move to below the left nav bar or become distortion.

    we use <float : left> for the left nav bar and use <center> or <div align: left> for the center web content. Do we do anything wrong?


    Please help! Many thanks!!
    the below is my code
    ====for left side
    #l_nav-list {
    float: left;
    padding: 25px; padding-left:18px;
    margin: auto;

    width:200px;

    }




    <div id="l_nav-list">
    <table bgcolor="#FFFFFF" width="95%" style="color: #333333;"><tr><td valign="top" align="center">




    ====== for center part
    <div align="center" style="padding:1em; padding-right:0.8em; padding-left:1.5em; padding-top:0.5em; width:900px; margin: auto;"><div class="topicPageBanner" style="width:780px;" ><h3 class="topicPageBanner" >Top Online Business Directory</h3></div><br><div align="left" style="width:785px; ">
    <br>
    <table style="background-color: #e5f7df; padding:0.3em; padding-top:0.8em; padding-left:0.3em; border-style:solid; border:1; border
    -width:thin; border-color:#d9f0d1; width:780px; ">

    ========
    Last edited by powertony; 05-31-2012 at 01:13 AM. Reason: more information about my problem

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,590
    Thanks
    0
    Thanked 644 Times in 634 Posts
    With

    <div align="center" style="padding:1em; padding-right:0.8em; padding-left:1.5em; padding-top:0.5em; width:900px; margin: auto;">

    it is probably the obsolete (since 1997) align="center" that is preventing the margin:auto from centering the div.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New to the CF scene
    Join Date
    May 2012
    Location
    Canada
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    With

    <div align="center" style="padding:1em; padding-right:0.8em; padding-left:1.5em; padding-top:0.5em; width:900px; margin: auto;">

    it is probably the obsolete (since 1997) align="center" that is preventing the margin:auto from centering the div.
    Thank you for reply.
    I do not get what do you mean. Do you mean I should not use align='center'? Any suggestion?

  • #7
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Quote Originally Posted by powertony View Post
    Do you mean I should not use align='center'?
    Exactly!
    <tag align="center"></tag> and it's close equivalent <center><tag></tag></center> is the far obsolete Html ways of <tag style="margin:auto;"></tag>

    Some browsers may still support the obsolete html ways, some may ignore them, while they may break the code in other browsers.

    The only secure way is to use the css way.


  •  

    Tags for this Thread

    Posting Permissions

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