WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] css 101 footer issue

[Resolved] css 101 footer issue

  • ronchicago

    @ronchicago

    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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.

    ronchicago

    @ronchicago

    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.

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

    ronchicago

    @ronchicago

    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;
        }

    ronchicago

    @ronchicago

    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.

    Chrisber

    @chrisber

    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>

    thanks saurus for heading me in right direction.

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

    ronchicago

    @ronchicago

    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…

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] css 101 footer issue’ is closed to new replies.
Skip to toolbar