If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Apr 2014
    Member #

    Extending content div to footer/weird link colors

    I'm currently in the process of teaching myself web design, so I finally figured I'd dive in and make a Frankenstein test page. It's...going okay so far, except I can't get the content div to go all the way to the footer.

    Here's the page itself, in all its broken-linked, unprofessional glory: Elsa | A test layout by Penelope Revelle

    I'd like for the center content div to extend all the way to the footer on every page, but the various things I've tried don't seem to work.

    Also, some of my links are purple instead of blue, and I can't seem to find any rhyme or reason for it? This is the coding I have to color the links:

    A:link{color: #062766F; text-decoration: none; font-family: Verdana;} 
    A:visited{color: #062766F; text-decoration: none; font-family: Verdana;} 
    A:active{color: #062766F; text-decoration: none; font-family: Verdana;} 
    A:hover{color: #29dbe2; text-decoration: none; font-family: Verdana;}
    Which you can see in the footer that some of the links are blue, as they should, but some of them are not (To the Top, the links to the credits, and the Lorem ipsum in the test page).


  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Oklahoma City
    Member #
    959 times
    I can't get to your page because of the network I'm on right now, but most likely, your content div won't reach the bottom because there isn't enough content in it to push it down that far. You can add content, or give it a min-height all you want, though because as soon as someone with a larger monitor comes along, it'll look wrong. You'll be better off pinning the footer to the bottom of the content div and giving the content div a min-height.

    Regarding the links, the order of the color declarations matters. The trick I learned to remember it is: LoVe, HAte, or Link, Visited, Hover, Active.
    Why it should matter is anyone's guess.

    STRIKE THAT. I just noticed you have an extra character in your color hex. That's the problem.

    Side note, I'd like to help you clean up your code a little.

    First, CSS selectors are always lower case. Second, DRY (Don't Repeat Yourself), in other words group attributes that are the same. Third, you don't have to declare visited or active if they're the same as your default. Here's how I'd write the CSS in your post:
    font-family: Verdana, sans-serif;
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Apr 2014
    Member #
    Ah, thanks so much! Not sure how that extra character snuck in, lol. And I'm working off a 7 year old stylesheet I wrote in high school, so any help cleaning it is...much, much appreciated.

    After a good night's rest I did find a solution to get the effect I wanted - giving the container div the same color background as the content div. So it all works fine now.

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 07:19 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: