View Full Version : Tag line unmoving and margin round div unmoving.

Nov 15th, 2010, 01:35 AM
I have the word Lewisham under my tag line and it will not budge or move over about 3 spaces. I have tried text-indent on the span and I have tried text-align: center; but it still remains in the same place. Any ideas?
.caps {text-transform: uppercase; font-weight: bold; color:navy; text-align: center;}

rest of tagline

#right_header p.logtitle {
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: gray;
position: absolute; top: 1.50em; left: 60%;
padding: 0;
margin: 0;

site is: puddypaws.co.uk/test.html with prefix of www

The other problem I have is that there is a space around my div when I want it to sit flush, cannot figure out why it is there.

.leftside {
position: absolute;
width: 25%;
height: auto;
background: #9999CC;
float: left;
margin: 0; padding:0.88em;
#leftside, #rightside p {margin-bottom: 0.88em; padding: 0;}

any pointers appreciated.

Nov 15th, 2010, 09:20 AM
Your link is dead.

(Incidentally, it makes it easier for people trying to help if you include the actual url).

Nov 15th, 2010, 02:54 PM
What do you mean, my link is dead. And I did provide an url, but due to problems with server did not want it live.

Nov 15th, 2010, 03:08 PM
You should actually make the link a link by using the link button in your message window. Type your url then highlight it and click the link button. And yes I tried your link yesterday and it was dead.

Nov 15th, 2010, 03:24 PM
There are problems with the server for the site I am developing so the link is piggybacking on another site that is why I did not want to make it live.

Though a more friendlier tone would have been nice.

Sorry about the dead link, it is now working.

Nov 15th, 2010, 03:32 PM

Try position:relative, it's the absolute that's making it ride over the text. You may need to adjust other things, like giving it a right and bottom margin to make the text wrap around it correctly.

Nov 15th, 2010, 03:37 PM
Text-align isn't going to work on the span because it's an inline not a block element. Try adding a padding-left to the span to move it in a bit.

To sit your blue box flush with the green frame you need to set left and top in your css to 1.88em (the width of the green frame itself) to position it correctly. It's usually good to set these anyway for cross-browser compatibility. This assumes you actually want it absolutely positioned, as DrDos highlights above.

Nov 15th, 2010, 03:40 PM
Hello quartzy,
Yes, again with the ap when it's really not needed.
There is no width on .logtitle so the text-align:center; you've put on .caps doesn't have anything to center on.

Try it a different way...

#right_header p.logtitle {
background: #ff0;
width: 150px;
float: right;
margin: 10px 100px 0;
font-family: Arial, Verdana, sans-serif;
font-size: 90%;
color: gray;
/*position: absolute; top: 1.50em; left: 60%; */
.caps {
text-transform: uppercase;
font-weight: bold;
margin: 0 0 0 10px;

Nov 15th, 2010, 04:47 PM
Ex! thanks I like that look never though a background would work, but changed the yellow and moved it over a bit. You had pos abs in quotes, but I have removed the pa now.

Someone above mentioned to set the left and top to 1.88em, do they mean the margin on the innerbox? Not sure what he means. I changed the margins and catasprophe so changed it back, so I still have the problem of the blue box having a margin round it. Maybe he means set a margin of 1.88em on the blue box, which I will try now.

Nov 15th, 2010, 05:00 PM
Someone above...

Me, actually.

...mentioned to set the left and top to 1.88em, do they mean the margin on the innerbox?

I meant the left and top settings of your absolutely positioned element #leftside. But if you've taken this out, it no longer applies.

Nov 15th, 2010, 05:04 PM
You had pos abs in quotes, but I have removed the pa now.

The ap was commented out so you would know that it was not being used. In CSS you comment with /*text not to be read in CSS*/
In the markup you comment with <!--text not to be read in markup-->

See commenting -

Nov 15th, 2010, 05:24 PM
Ok, understood. I do know about comment marks but just not why you had done that.

SB65 Sorry if I irked you, Dr Dos suggested to remove the Absolute postion so I did, still searching for a fix though for the box.

thanks to you all for helping me, it has been a while since I coded and was not too good then.

Nov 15th, 2010, 05:47 PM
SB65 Sorry if I irked you

No, not irked at all. My (obviously unsuccessful) attempt at humour on a Monday afternoon....

If you're trying to get rid of the white gap between the green frame and blue box, it's caused by the padding:

.textbox_inner {
background:none repeat scroll 0 0 #FFFFFF;

Take that off, and maybe pad #rightside a bit to compensate.

Nov 15th, 2010, 06:08 PM
thanks so much for letting me know it was the padding, been searching all afternoon for the answer on the net. Dont know why, it was not obvious to me now. Also dont even know why I had the padding in the first plac.e

Nov 15th, 2010, 06:18 PM
No worries. Firebug (http://getFirebug.com) is indispensable for this sort of thing.

Nov 15th, 2010, 06:50 PM
I thought Firebug was for javascript errors how can that help with extra padding? Done a little JS but removed Firebug as I dont do it now.

Nov 15th, 2010, 06:53 PM
Ok I got you now, to inspect elements, how clever

Nov 15th, 2010, 07:31 PM
Firebug is great for all pages....really helpful for element and css inspection.

Nov 15th, 2010, 08:06 PM