SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to keep link directly above the footer?

    I'm trying to get a text link to always appear at the bottom right hand corner of my content area, regardless of how much text is there. Sometimes on a page there may only be a couple of lines of text, and the link is falling right below it. I'd like for it to always appear at the bottom. The content box is a fixed height.

    I'll attach the code, it's the "previous" link that I am trying to make fall all the way to the bottom.

    Thank you!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    http://ryanreese.net/temp/sitepoint2.html

    I made up a small thing as an example.

    It's not in the exact place you want the footer but...it just shows you what you can do .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi boozapian, Welcome to Sitepoint!

    As Ryan has shown you how this is done by using Absolute Positioning just be aware of this. The element in which you place th AP'd link must have a bottom padding which is at least the same height of the AP'd div.

    Here is another example of the same basic principle except I have given the height of the AP div and the bottom padding of the left column in ems. Then I gave the containing div (the left column) a slightly larger padding (6.5em) than the AP div (6em). That way it gives some insurance against increased text sizing on the users end.

  4. #4
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I'm just not experienced enough with CSS to know how to make that first part work with my page. The content area is already made, and I'm not sure how to take that and add the the code that you gave (or where to add it). There are already a bunch of DIVs there.

    I'm guessing that the content area (which is on the right side of the page) must be a part of this, but then this square might be part of a larger square, if that makes sense.

    Code:
    <div id="column_wrapper">
        <div id="left">
          <div class="content">
            <h3 class="nomargintop"><img src="../BVD3/images/BVD-6.jpg" width="304" height="202" /><span class="nomargintop"><img src="../BVD3/counseling.gif" alt="" width="304" height="108" /></span></h3>
    </div>
        </div>
        <div id="right">
          <div class="content">Then I have some content here...</div>
        </div>
        <br class="clearfloat" />
      </div>
      <div id="footer">...
    I hope I'm making sense, as you can tell I'm really new, so I appreciate your help!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do you have the CSS to go along with that? Got a live page? Can you be more clearer? Which link / section of code to you want above the footer?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm guessing that the content area (which is on the right side of the page) must be a part of this, but then this square might be part of a larger square, if that makes sense.

    I hope I'm making sense, as you can tell I'm really new, so I appreciate your help!
    Are you saying that the link will be within a div that is positioned at the bottom.

    Go ahead and give us your complete html with doctype and your complete css file so we can run your page on our local machine.

    Or post a link without the www. part. As a new member you can't post links until you have made 10 posts.

    eg: yoursitename.com

  7. #7
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tried posting without the "www". Guess they're on to me. So, I've attached my files. Thanks again for your help.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by boozapian View Post
    Tried posting without the "www". Guess they're on to me. So, I've attached my files. Thanks again for your help.
    It is just a spam prevention effort, as long as it is not a live link you should be able to post it.

    Try this -
    yoursitename (dot) com

  9. #9
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This finally did it:
    hybriddesignDOTnet/66/indexunlocked5DOThtml

  10. #10
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First give your link paragraph a class name :
    Code:
        <div id="right">
          <div class="content">
            <h1><img src="welcome.gif" height="38" width="143"></h1>
            <p>text here</p>
    
            <p class="nextlink"><a href="" style="color: rgb(0, 0, 0);">next → </a></p>
          </div>
        </div>
    and then set the position of #right to relative (to provide the positioning reference for the next link), and then absolutely position the paragraph to the bottom right :
    Code:
    #right {
    	width: 536px;
    	float: right;
    	border-right-width: 0px;
    	border-right-style: none;
    	border-right-color: #E8E8E8;
    	margin-right: 70px;
    	border-top-width: 10px;
    	border-top-style: solid;
    	border-top-color: #CC9;
    	background-color: #FFF;
    	background-image: url(../../BVD3/squiggly.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    	height: 487px;
    	position: relative;
    }
    
    #right .nextlink {
    	position: absolute;
    	right: 40px;
    	bottom: 0;
    }

  11. #11
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had other pages that were using the "right" class and I didn't know if adding that last line would affect them, so I changed the p class to "next" and changed "right" to "next" in the stylesheet. I copied the styles in the "right" class, changed "right" to "next" and then added the line at the bottom that you suggested. I also put the rest in right below it.

    I'm not sure what I'm doing wrong. Would you mind taking a look at it again? It's not showing any changes.

    Thank you.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Remove the height from #right
    Add position:relative; to it.

    On <p class="next"> add "position:absolute;right:0;bottom:0;"
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    There was no need to duplicate the rules as the position:relative would not have affected any other pages. Anyway you could have added a class to the body and changed the rule for this page only.

    Code:
    <body id="p7bod" onload="P7_Uberlink('p7uberlink','p7bod')" class="thispage">
    Code:
    .thispage #right{position:relative}
    However the problem in your page is that although you changed the CSS you haven't changed the html to match.

    Code:
    <div id="next">
                <div class="content">
                    <h1><img src="welcome.gif" width="143" height="38" /></h1>
                    <p>text here</p>
                    <p class="nextlink"><a href="" style="color: #000000;">next &rarr; </a></p>
                </div>
            </div>
    You had it as #right and .next.

    It's not a good idea to set a height for your content as that will never allow your page to grow unless you are going to put scrollbars on the container. You would be better of with a min-height or no height at all and let the content dictate the height.

    Code:
    #right{min-height:487px}
    * html #right{height:487px}/* ie6 treats height as min-height anyway*/

  14. #14
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Remove the height from #right
    Add position:relative; to it.

    On <p class="next"> add "position:absolute;right:0;bottom:0;"
    I can't adjust the #right because that will affect other pages on my site. So I just duplicated it but called it #next, and then named the <p> the same. Then I made the changes you outlined. What am I doing wrong? It's still not showing up correctly.

    This is what I have after the changes you suggested:
    Code:
    <p class="next"><a href="" style="color: #000000;">next &rarr; </a></p>
    and
    Code:
    #next {
    	width: 536px;
    	float: right;
    	border-right-width: 0px;
    	border-right-style: none;
    	border-right-color: #E8E8E8;
    	margin-right: 70px;
    	border-top-width: 10px;
    	border-top-style: solid;
    	border-top-color: #CC9;
    	background-color: #FFF;
    	background-image: url(../../BVD3/squiggly.gif);
    	background-repeat: no-repeat;
    	background-position: bottom;
    	position: relative;
    
    }
    
    #next .nextlink {
    	position:absolute;right:0;bottom:0;
    }
    Thanks again for the help.

  15. #15
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    ...the problem in your page is that although you changed the CSS you haven't changed the html to match.

    Code:
    <div id="next">
                <div class="content">
                    <h1><img src="welcome.gif" width="143" height="38" /></h1>
                    <p>text here</p>
                    <p class="nextlink"><a href="" style="color: #000000;">next &rarr; </a></p>
                </div>
            </div>
    You had it as #right and .next.
    Ok, thanks. I didn't know I had to change the <div> too.

    It's not a good idea to set a height for your content as that will never allow your page to grow unless you are going to put scrollbars on the container.
    All of my associates want to keep that as a fixed height that way the content box will not extend beyond the two images to the left of it. Also, that is why we were wanting the "next" link at the bottom, so when the content fills up that fixed space, the user can click next and go to the next page where content is continued.

    I changed the file to <div class="next">, you can see if you refresh, and the "next" link is on the right now, but it's not at the bottom right above the green/tan color band- it's way up by the content. And that white content area got collapsed. The style of the font somehow changed too.

    So I also put the page back as it was, hybriddesignDOTnet/66/indexunlocked4DOThtml, just so the fonts and (the height of the) content area are as they should be.

    Thank you!
    Last edited by boozapian; Apr 7, 2009 at 13:52.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You need to make <div class="content"> into <div id="next">

    Remove the right margin on #next

    On #next set height:477px;

    On "#next .nextlink" set margin:0;

    THERE you go
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by boozapian View Post

    All of my associates want to keep that as a fixed height that way the content box will not extend beyond the two images to the left of it. Also, that is why we were wanting the "next" link at the bottom, so when the content fills up that fixed space, the user can click next and go to the next page where content is continued.
    And what happens when the user resizes the text?

    All the content will break out of the container and look very silly. The web isn't a printed page and part of designing a web page is allowing for all possibility because you can never be certain what and where your page is being viewed. A few simple steps such as not setting a height on text content will go along way towards making more accessible pages.

    You should set a min-height or use ems for the height.


    I changed the file to <div class="next">, you can see if you refresh, and the "next" link is on the right now, but it's not at the bottom right above the green/tan color band- it's way up by the content. And that white content area got collapsed. The style of the font somehow changed too.
    This is because you created a new #next id to replace your #right id but you didn't also change all the styles that you had styled using #right .content {}. You would also need to duplicate the same styles using #next .content{}.

    As I have already said this is a wasteful and slightly silly approach because you should just add position:relative to #right as Centauri said right back at the start. It will do no harm and save you miles of code.

    Use this with the html from the link below.

    Code:
    #right {
        width: 536px;
        float: right;
        border-right-width: 0px;
        border-right-style: none;
        border-right-color: #E8E8E8;
        margin-right: 70px;
        border-top-width: 10px;
        border-top-style: solid;
        border-top-color: #CC9;
        background-color: #FFF;
        background-image: url(http://www.hybriddesign.net/BVD3/squiggly.gif);
        background-repeat: no-repeat;
        background-position: bottom;
        height: 487px;
        position:relative
    }
    .nextlink {
        position:absolute;right:0;bottom:0;
    }
    "hybriddesignDOTnet/66/indexunlocked4DOThtml"

    You should also learn some shorthand as you could remove over 50% of your code. For example #right could simply be this.
    Code:
    #right {
        width: 536px;
        float: right;
        margin:0 70px 0 0;
        border-top:10px solid #CC9;
        background:#FFF url(http://www.hybriddesign.net/BVD3/squiggly.gif) no-repeat 0 100%;
        height: 487px;
        position:relative
    }
    That's 7 lines of code as opposed to 15 lines of code.

    Lastly think, a little bit more about what you are doing here as the issues are quite obvious. If you are going to style something using #right .content then obviously .content will only be available whenever it is inside #right


Bookmarks

Posting Permissions

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