...

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



quartzy
11-15-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%;
font-weight:bold;
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.

SB65
11-15-2010, 09:20 AM
Your link is dead.

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

quartzy
11-15-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.

teedoff
11-15-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.

quartzy
11-15-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.

DrDOS
11-15-2010, 03:32 PM
http://www.puddypaws.co.uk/test.html

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.

SB65
11-15-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.

Excavator
11-15-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%;
font-weight:bold;
color: gray;
/*position: absolute; top: 1.50em; left: 60%; */
}
.caps {
text-transform: uppercase;
font-weight: bold;
color:navy;
margin: 0 0 0 10px;
}

quartzy
11-15-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.

SB65
11-15-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.

Excavator
11-15-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 -
http://webdesign.about.com/cs/css/ht/htcommentcss.htm
and
http://www.tizag.com/htmlT/htmlcomments.php
and
http://www.tizag.com/phpT/comment.php

quartzy
11-15-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.

SB65
11-15-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;
margin:1.88em;
padding:0.31em;
}

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

quartzy
11-15-2010, 06:08 PM
Hi
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

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

quartzy
11-15-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.

quartzy
11-15-2010, 06:53 PM
Ok I got you now, to inspect elements, how clever

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

quartzy
11-15-2010, 08:06 PM
:thumbsup::)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum