html - How can I vertically align text in my div -
this doing head in. can't text align vertically in footer. basic text want in middle links log in end @ top of footer. when log in , have other options display text on right of footer doesn't display. please help.
footer code:
<?php include ("includes/closedb.php"); ?> <footer> <div class="footer-wrapper"></div> <div class="footer-wrapper"> <div class="float-left"><p id="social">site map</p></div> <div id="login"> <?php if (logged_on()) { echo '<li><a href="/logoff.php">sign out</a></li>' . "\n"; echo '<li><a href="/addpage.php">add</a></li>' . "\n"; echo '<li><a href="/selectpagetoedit.php">edit</a></li>' . "\n"; echo '<li><a href="/deletepage.php">delete</a></li>' . "\n"; if (is_admin()) { } } else { echo '<li><a href="/logon.php">admin log in</a></li>' . "\n"; } ?> <?php if (logged_on()) { echo "<div class=\"welcomemessage\">welcome, <strong>{$_session['username']}</strong></div>\n"; } ?> </div> <div class="float-right"><p id="social">© swing , putt 2014</p></div> </div> </footer> </body> </html> css:
.float-left { float: left; color: #000000; text-align: left; padding-left: 10px; } .float-right { float: right; color: #000000; text-align: right; padding-right: 10px; } footer { clear: both; font-size: 12pt; height: 30px; margin-top: -30px; /* negative value of footer height */ position: relative; background-color: #00bfff; padding: 5px; } footer .footer-wrapper { } /* login ----------------------------------------------------------*/ #login { display: block; font-size: 12pt; font-family: arial; float: left; } #login { margin-left: 10px; margin-right: 3px; padding: 2px 3px; text-decoration: none; } #login a.username { background: none; margin-left: 0px; text-decoration: underline; } #login ul { margin: 0; } #login li { display: inline; list-style: none; } hope makes sense. i'm struggling php type stuff.
here have use demo footer links , paste whole html , css. have change css class footer
height: 180px; margin-top: 0px; /* negative value of footer height */
these , add #login li block
float: left; clear: both; margin-bottom: 10px; these 3 property , hope solve problem. have attach demo menu preview image can see right or wrong.
<html> <head> <title>demo title</title> <style type="text/css"> .float-left { float: left; color: #000000; text-align: left; padding-left: 10px; } .float-right { float: right; color: #000000; text-align: right; padding-right: 10px; } footer { clear: both; font-size: 12pt; height: 180px; margin-top: 0px; /* negative value of footer height */ position: relative; background-color: #00bfff; padding: 5px; } footer .footer-wrapper { } /* login ----------------------------------------------------------*/ #login { display: block; font-size: 12pt; font-family: arial; float: left; } #login { margin-left: 10px; margin-right: 3px; padding: 2px 3px; text-decoration: none; } #login a.username { background: none; margin-left: 0px; text-decoration: underline; } #login ul { margin: 0; } #login li { display: inline; list-style: none; float: left; clear: both; margin-bottom: 10px; } </style> </head> <body> <footer> <div class="footer-wrapper"></div> <div class="footer-wrapper"> <div class="float-left"><p id="social">site map</p></div> <div id="login"> <ul> <li><a href="/logoff.php">sign out</a></li> <li><a href="/addpage.php">add</a></li> <li><a href="/selectpagetoedit.php">edit</a></li> <li><a href="/deletepage.php">delete</a></li> <li><a href="/logon.php">admin log in</a></li> </ul> </div> <div class="float-right"><p id="social">© swing , putt 2014</p></div> </div> </footer> </body> </html> 
Comments
Post a Comment