Needs some quick hlep with CSS.

Discussion in 'CSS' started by ACrofford, Jun 30, 2008.

  1. #1
    Please look at http://www.andycrofford.com/.

    I would like to vertically align the text in the footer.

    Also, how would I split the footer so I can align something on the right as well?

    Any help you can provide is appreciate.

    This is the code in the footer:

    <div id="footer">Copyright &copy; 2008 <?php bloginfo('name'); ?></div>
    </div><br />
    Code (markup):
    This is the CSS for the footer:

    #footer {
    	background: #5E5E5E;
    	padding: 10px;
    	color: #fff;
    }
    Code (markup):
     
    ACrofford, Jun 30, 2008 IP
  2. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #2
    either div the sections or create p's with short widths and float: left
    bigger problem is with FF and the posts showing up waaaay right.



    <div id="footer">
    <p>Copyright &copy; 2008 <?php bloginfo('name'); ?></p>
    <p class="rightfoot">Add stuff here </p>
    </div>
    </div><br />

    then just
    .rightfoot { float: right; width: 200pt; }
    #footer p { float: left; width: 200pt; }

    tweak till you are happy
     
    shallowink, Jun 30, 2008 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    For the vertical alignment, you can get a similar visual effect by setting the line-height of the p's equal to the height of the footer. Make the font-size half the line-height.

    <div id="footer">
    <p>foo man choo</p>
    </div>

    #footer {
    min-height: 2em;
    }
    #footer p {
    font: bold 1em/2em times, serif;
    }

    Something like that, depends if text wraps.
     
    Stomme poes, Jul 1, 2008 IP