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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Tag line unmoving and margin round div unmoving.

    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?
    Code:
    .caps {text-transform: uppercase; font-weight: bold; color:navy; text-align: center;}
    rest of tagline
    Code:
    #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.

    Code:
    .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.
    Last edited by quartzy; 11-15-2010 at 01:11 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your link is dead.

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

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    re

    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.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    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.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.
    Last edited by SB65; 11-15-2010 at 02:39 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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...
    Code:
     
    #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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    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.
    Last edited by quartzy; 11-15-2010 at 03:53 PM.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.
    Last edited by SB65; 11-15-2010 at 04:02 PM.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    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.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

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

  • Users who have thanked SB65 for this post:

    quartzy (11-15-2010)

  • #14
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Re

    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

  • #15
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    No worries. Firebug is indispensable for this sort of thing.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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