...

View Full Version : Resolved I need help to centre some text. text-align:center; does not do it.



effpeetee
11-28-2008, 10:55 AM
I have almost finished adapting this program of Avril's (http://exitfegs.co.uk/avril3.html). One thing remains and that is to centre the thumbnail text without using hard spaces and not altering anything else.:eek:

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

Frank

abduraooft
11-28-2008, 03:04 PM
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.

effpeetee
11-28-2008, 03:34 PM
Many thanks abduraooft. That did the trick. (http://www.exitfegs.co.uk/avril3.html) I will definitely need to get this relationship thing nailed down. Do you have a reference?

Frank

abduraooft
11-28-2008, 03:56 PM
That did the trick. (http://www.exitfegs.co.uk/avril3.html) 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)


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.
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 )
The above would move the text and/or images to the right side, but do not give an impression that they are centered
Surely, they are centered, but the question is where their centre reside?
To find the answer put a border around those inner divs by

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;
}

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.

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/showthread.php?p=617640#post617640 may help you!

effpeetee
11-28-2008, 04:55 PM
Thanks again.
That seems to have done the trick.

Here it is. (http://www.exitfegs.co.uk/avril3.html) (I hope)



Frank

abduraooft
11-28-2008, 05:02 PM
Yes, the floats are now cleared :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum