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 6 of 6
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation I need help to centre some text. text-align:center; does not do it.

    I have almost finished adapting this program of Avril's. One thing remains and that is to centre the thumbnail text without using hard spaces and not altering anything else.

    I have tried text-align:center; in the #nav divs, but it moves the divs out of place.

    In other words I want it to look as it is but without the hard spaces.

    Glad of any help.

    Frank
    Last edited by effpeetee; 11-28-2008 at 02:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    div#nav1, div#nav2, div#nav3, div#nav4, div#nav5, div#nav6, div#nav7, div#nav8, div#nav9, div#nav10, div#nav11, div#nav12 {avril3.html (line 50)
    color:#90232E;
    float:left;
    font-family:tahoma,verdana,times,sans-serif;
    font-size:0.48em;
    height:100px;
    line-height:12px;
    margin:0px 0px 3px;
    width:180px;
    }
    div#navi1 {/*avril3.html (line 32)*/
    border:1px solid #851E0D;
    float:left;
    margin:-1px 0px 0pt;
    padding:1px;
    width:121px;
    }
    Your inner divs have got a larger width than that of the container #navi1 and navi2. So, to effectively apply text-align:center; to those containers, you may either reduce/remove the width of those divs (width:180px) or increase the width of the container divs div#navi1 and div#navi2 to at least 180px. After that you can apply the text-align:center; to those container divs and the inner elements will inherit this property.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    effpeetee (11-28-2008)

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Many thanks abduraooft. That did the trick. I will definitely need to get this relationship thing nailed down. Do you have a reference?

    Frank
    Last edited by effpeetee; 11-28-2008 at 02:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by effpeetee View Post
    That did the trick. I will definitely need to get this relationship think nailed down. Do you have a reference?
    Frank
    Ha ha..
    I had almost completed a step by step procedure for you to debug the issue by yourself. Then I felt, it might be hard for me to convey, though the issue is very simple. Anyway, here is what I'd do.(So just revert back your code in to the buggy mode)
    1. Add img{display:none;} in to your CSS first. This will hide all images, and there by we will get a better visibility on the issue.
    2. As per the normal rule, add the text-align center. (We can add this to any of the (grant) parent elements, say body , #wrapper , #navi1 etc )
    3. The above would move the text and/or images to the right side, but do not give an impression that they are centered
    4. Surely, they are centered, but the question is where their centre reside?
    5. To find the answer put a border around those inner divs by
      Code:
      div#nav1, div#nav2, div#nav3, div#nav4, div#nav5, div#nav6, div#nav7, div#nav8, div#nav9, div#nav10, div#nav11, div#nav12 {
      ........
      border:1px solid red;
      }
    6. Now the issue would be clear. You'd see the actual width of those inner divs is higher that their parent columns. Fix this as suggested in my first post.
    7. Revert step 1


    (By using firebug we can do the above steps very quickly)

    PS: Your floats are not cleared, and thus your #wrapper is not wrapping your elements in Firefox. http://www.codingforums.com/showthre...640#post617640 may help you!
    Last edited by abduraooft; 11-28-2008 at 03:07 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks again.
    That seems to have done the trick.

    Here it is. (I hope)



    Frank
    Last edited by effpeetee; 11-28-2008 at 04:09 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Yes, the floats are now cleared
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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