WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I bottom-align text in the footer? (15 posts)

  1. stardustgirl
    Member
    Posted 5 years ago #

    Hi! I'm a total WordPress noob, and this is my first foray into fiddling with css and php (my html skills are circa 1999).

    I've made my template based on Kubrick. I've run into a snag trying to get the text in the footer to align at the bottom center. It seems to be at top center. I've looked through the style.css page until I'm blind and can't find a value to change. I was thinking that one of these:

    #footer {
    	padding: 0;
    	margin: 0 auto;
    	height: 250px;
    	width: 1000px;
    	clear: both;
    	}
    
    #footerimg {
    	margin: 0;
    	height: 250px;
    	width: 100%;
    	}
    
    #footer p {
    	margin: 0;
    	padding: 20px 0;
    	text-align: center;
    	}

    would be the place to stick in this bit of code:

    vertical-align: text-bottom;

    but I've tried it in different spots and nothing changes. The site is here, if that helps.

    Am I even close to being on the right track or is it located somewhere else altogether? Thanks! :-)

  2. Saurus
    Member
    Posted 5 years ago #

    It's valign: bottom;

  3. stardustgirl
    Member
    Posted 5 years ago #

    Thanks - I tried placing that in any and all 3 of #footer parts but nothing changed. I'm *very* new to css; can you tell me where to paste that, exactly? And if I should remove any code when I do?

  4. Saurus
    Member
    Posted 5 years ago #

    oops ...

  5. Saurus
    Member
    Posted 5 years ago #

    The container for footer p - you last example. Remove the "text align: center" and put it there. Don't forget the closing semi-colon (;), and make sure the closing brace is where it is now.
    You might want to bookmark THIS site for future reference.

  6. kmessinger
    Volunteer Moderator
    Posted 5 years ago #

    Without seeing your site, I am not sure what you are trying to do. That is why it is good to post a url.

    Imagine your footer as a box. Yours is height: 250px; high so text you enter will be at the top of the box. If you want the text at the bottom, you can change the height of the box or add something ahead of the text.

  7. stardustgirl
    Member
    Posted 5 years ago #

    Saurus - thanks for the info. I've tried that exactly and it just shifted the text to the left top. You can see it here

    kmessinger - Actually, there is a link to my site in my first post...it shows up as a blue link of "here, if that helps" for me. Is it not showing?

    What I'm trying to do is get the "blahblah powered by yaddayadda, etc." to always align at the bottom. I've got part of my graphic in the footer and want any text to stay down in the blue area.

  8. Saurus
    Member
    Posted 5 years ago #

    Sorry ...

    #footer p {
    	margin: 0;
    	padding: 20px 0;
    	text-align: center;
            valign: bottom;
    	}

    That should do it.

  9. kmessinger
    Volunteer Moderator
    Posted 5 years ago #

    Sorry, missed that!

    Sarus has the solution for the css. I always go a less elegant way with html :^) added to footer.php.

    </p>
        <strong><p>&nbsp;</p>
        <p>&nbsp;</p>
        <p align="center">&nbsp;	</p>
        <p align="center">Greetings From The Handbasket is proudly powered by</strong>		<a href="http://wordpress.org/">WordPress</a>
    		<br />
    		<a href="http://journal.stardust-and-alchemy.com/feed/">Entries (RSS)</a>
    		and <a href="http://journal.stardust-and-alchemy.com/comments/feed/">Comments (RSS)</a>.
  10. stardustgirl
    Member
    Posted 5 years ago #

    Hi Saurus - I'm feeling like the css goblins are ganging up on me... it didn't work. It just shifted back to top center. I *swear* I put it in just like the example:

    #footer p {
    	margin: 0;
    	padding: 20px 0;
    	text-align: center;
    	valign: bottom;
    	}

    What am I doing wrong? This is Day 3 of me trying to fix this, and despite reading all kinds of help sites (though this is my first post) I can't find any info on this.

    site link is still here .

  11. stardustgirl
    Member
    Posted 5 years ago #

    kmessinger - would that be the whole footer? Or does it replace specific code (disclaimer: this is my first css / php dabbling ever and I know nada).

    I was hoping to follow as much of the original Kubrick code as possible works-wise, just because if something breaks it would be easier to fix. Since I'm on unfamiliar turf I've been making one tiny change at a time to see what it does. It's taken more than a week to get this far, but I keep plugging away.

  12. kmessinger
    Volunteer Moderator
    Posted 5 years ago #

    </p>
    <p> </p>
    <p> </p>
    <p align="center">  </p>
    <p align="center">

    Put this just before "Greetings"

    I tested it on your code but you can make adjusts up/down by adding or deleting <p> </p>

  13. stardustgirl
    Member
    Posted 5 years ago #

    kmessinger - thanks! That does shove it down toward the bottom. My footer.php now looks (in part) like this:

    <div id="footer">
    <!-- If you'd like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    	<p>
    		<?php bloginfo('name'); ?> is proudly powered by
    		<a href="http://wordpress.org/">WordPress</a>
    		<br /><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a>
    		and <a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a>.
    		<!-- <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
    	</p>
    </div>

    I'm still hoping that someone can point out what I'm messing up in CSS since I can't help but feel like I'm cheating, like spacing over to where one would want a letter instead of learning how to properly use tabs, LOL! Can you tell I come from design and not programming? :-) A friend swears CSS will ultimately make it all easier and I'm hoping that is true once I figure it out.

    Thank you for your help- I really appreciate your time (as does my head which was in danger of being banged against my desk in frustration).

  14. kmessinger
    Volunteer Moderator
    Posted 5 years ago #

    There is the wrong way, the right way and the way that works. I won't tell anyone you cheated. Glad it is ok for now.

  15. stardustgirl
    Member
    Posted 5 years ago #

    A css-savvy friend noticed my howl of angst (I'd blogged about my inability to properly master the art of making text lie at the bottom vs. floating at the top like a dead carp) and provided the following - which worked like a charm! Changing the first value in padding allowed me raise or lower it, and place it where I needed it to be.

    He also alerted me to the existence of the Firebug plug-in for Firefox so I could see and change things *much* easier. I mention all this here in case another total noob is as lost as I am :-)

    #footer p {
    	margin: 0;
    	padding: 170px 0 20px;
    	text-align: center;
    	color: #FFF;
    }
    #footer p a {
    color: #FFF; /* or some other color */
    }

Topic Closed

This topic has been closed to new replies.

About this Topic