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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    521
    Thanks
    83
    Thanked 0 Times in 0 Posts

    Adding style to a line of text

    Hello

    I have ths in my <footer> tag:

    Code:
    <footer>            
    
    <p>&copy; 2019 mySite | All Rights Reserved</p>
            
    </footer>
    The whole line is in a purple font-colour (#BC7DF7) with this CSS:

    Code:
    footer {
        width: 928px;
        height: 30px;
        padding: 9px 0 15px;
      }
    
        footer p {
            line-height: 1.7em;
            padding: 0 0 10px;
            text-align: center;
            font: 125% 'Trebuchet MS', Candara,'Droid Sans','Segoe UI',Arial,Sans-serif;
            color: #BC7DF7;
        }
    How may I keep the styling as it is in the purple font except that the '|' symbol between the copyright and 'All Rights Reserved' is in white?

    Thanks!

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,490
    Thanks
    3
    Thanked 624 Times in 610 Posts
    Hi there Blue1,

    how about...

    HTML:-

    Code:
    
    <p>&copy; 2019 mySite<span>|</span>All Rights Reserved</p>
    CSS:-

    Code:
    
    footer p  span {
        margin: 0 0.5em;
        color: #fff;
     }

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    521
    Thanks
    83
    Thanked 0 Times in 0 Posts
    That was quick, coothead, even for your standards!

    Thank you!

  4. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,490
    Thanks
    3
    Thanked 624 Times in 610 Posts

    Quote Originally Posted by Blue1 View Post
    That was quick, coothead, even for your standards!
    that must have been due to a double dose of Sanatogen

    coothead
    ~ the original bald headed old fart ~

  5. #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    521
    Thanks
    83
    Thanked 0 Times in 0 Posts
    LOL....or a brandy!

  6. #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,490
    Thanks
    3
    Thanked 624 Times in 610 Posts

    Quote Originally Posted by Blue1 View Post
    LOL....or a brandy!
    I am rather partial to Brandy Snaps

    coothead
    ~ the original bald headed old fart ~

  7. #7
    New to the CF scene
    Join Date
    Apr 2019
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post
    hello !

    here's the code please try:

    HTML:

    <p>&copy; 2019 mySite <span class="pipe"> | </span> All Rights Reserved</p>
    CSS :

    .pipe {
    color: #fff;
    }
    Thank you !

  8. #8
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,378
    Thanks
    4
    Thanked 484 Times in 472 Posts
    I'd also suggest losing the P since two fragments do not make a grammatical paragraph... I'd probably lose the FOOTER tag for a DIV and structure that actually works like a HR, if you put the spaces around the SPAN you won't need to screw with margins, and the pixel width, height, and padding when you've got a percentage font-size is throwing up all kinds of warnings in that there may be deep rooted issues with the entire layout. In fact I bet dimes to dollars your footer would render all screwed up on all my machines since I run a non-standard font metric. Fixed widths in pixels are pretty much a giant middle finger to accessibility and usability.

    Also this:

    Code:
    font:125%/170% 'Trebuchet MS',Candara,'Droid Sans',sans-serif;
    Would let you ditch that line-height declaration and axe the Segoe UI and Arial. If you're going to use the condensed font property you might as well use it fully. Likewise both of those fonts are Microsoft core fonts, and the odds of either existing when Trebuchet MS doesn't is effectively zero.

    Also if you're going to have no other span, skip the class and just style it off the parent wrapper... and you no longer have to say the year on a website copyright disclaimer. (been that way for about a decade now)

    I'll keep the (garbage) FOOTER tag for now...

    Code:
    <footer>
      &copy; mySite <span>|</span> All Rights Reserved
    </footer>
    Code:
    footer {
      max-width:58em;
      padding:0.56em 0 1.5em;
      text-align: center;
      font:125%/170% 'Trebuchet MS', Candara,'Droid Sans','Segoe UI',Arial,Sans-serif;
      color:#B77;
    }
    
    footer span {
      color:#FFF;
    }
    Is realistically about all I'd have there. Max-width so it's fluid, you want more height either up the line-height or pad it more, everything in EM so it's elastic instead of telling users with non-standard font metrics to go suck an egg with PX.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    521
    Thanks
    83
    Thanked 0 Times in 0 Posts
    Many thanks to you both and to Shadow especially for your insightful comments and code and MS guidelines.

    Best regards

  10. #10
    New to the CF scene
    Join Date
    Apr 2019
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    HTML:
    <p>&copy; 2019 mySite<span>|</span>All Rights Reserved</p>
    CSS:
    span{
    color:white;
    }


 

Tags for this Thread

Posting Permissions

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