WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] css 101 footer issue (9 posts)

  1. ronchicago
    Member
    Posted 6 years ago #

    i wish to change the color and weight of my footer text. yes, i know, i wish i had a bigger problem. it is just one line of text with links to xhtml validate, credits, etc. currently it's tagged as <h6>. i can get it to look and behave as i want ( i can keep the <h6> link properties ) by creating a <h7> tag which seemed like easiest way for me.

    there's a problem of course. validator says <h7> not defined. i looked up all the <h6>'s ( theme css and default css ) and added <h7> so i must be missing a very basic concept here.

    please advise. thanks.

  2. Saurus
    Member
    Posted 6 years ago #

    H tags define text style, in this case Headlines. If you just want to style basic text, use a P tag instead and define it in your styles.css file. You can use something like ...

    .footer {
            font-size: 95%;
    	font-style: normal;
            font-weight: normal;
    	font-family: Arial, Helvetica, sans-serif;
    	color: white;
    	margin-top: 0;
    }

    ... or adjust any way you like. Then indicate your markup as ...

    <p class="footer">

    ... and insert whatever parameters you want for the links. And before anyone feels the need to "correct" the way I indicated the CSS ... yes - you CAN use shorthand to put the elements in one line. I just choose to code mine as above for clarity.

  3. ronchicago
    Member
    Posted 6 years ago #

    ok, this code works beautifully for the text that is not a link. thanks saurus.

    however this causes the linky text in the footer to go to the default css for "a" tag.

    i have not successfully written code for an alternate "a" style within a newly created class. again, i don't mind if the hover state is default, but the all others i need to control and i only want the underline to appear when i mouse over.

  4. Saurus
    Member
    Posted 6 years ago #

    can you supply a link to your blog so we can see the issue?

  5. ronchicago
    Member
    Posted 6 years ago #

    here is the blog = http://designapplause.com

    the "fusia" text is p-class and the links are default. note: i am only using fusia so i can better "see" what i am doing...admittedly the comment links show an underline in the rest state but we want the footer links to behave like headline links with underlines only in hover state.

    i tried this but it does not work...

    .footer {
      a:link, a:visited {
        color:#FF00FF;  /* 11/22/08 fushia!  */
        text-decoration: none;
        }
    	a:hover {
        color: #FF00FF;
        text-decoration: underline;
    	line-height: 150%;
        }
    	a:active, a:focus {
        color: #FF00FF;
        text-decoration: none;
        }
  6. ronchicago
    Member
    Posted 6 years ago #

    after a great deal of READING this works! ...

    .footer {
    	color: #B7B7B7; /* 11/21/08 # FF00FF fushia!  */
    	font-family: Didot, Georgia, serif;
    	font-weight: lighter; /* work!  */
    	font-size: 1em;
    	line-height: 1em;
    	margin: 0 0 1em;
    }
    .footer a  {
    	color: #B7B7B7;
    	text-decoration: none;
    }
    .footer a:hover {
     	color: #B7B7B7;
    	font-weight: lighter;
            text-decoration: underline;
    }

    thanks saurus for heading me in right direction.

  7. Chrisber
    Member
    Posted 6 years ago #

    there's a problem of course. validator says <h7> not defined. i looked up all the <h6>'s ( theme css and default css ) and added <h7> so i must be missing a very basic concept here.

    The basic concept you are missing is that the only valid heading tags are <h1> though <h6>. There is no such thing as <h7>

  8. Saurus
    Member
    Posted 6 years ago #

    thanks saurus for heading me in right direction.

    You are quite welcome - glad to be of some help.

  9. ronchicago
    Member
    Posted 6 years ago #

    chrisber, where were you two months ago?! ;-)

    after saurus's suggestion i went back to css, html structure and learned the heading system. also learned a bit more about pseudo-element selectors and inheritance.

    appreciate you calling the h7 thing out as i did not...

Topic Closed

This topic has been closed to new replies.

About this Topic