1 (edited by thuitamaina 2016-02-15 09:37:30)

Topic: How do I achieve this?

1) How do I align the search form in the menu of my website such that the button lies on the right of the textbox and the form is vertically at the centre of the menu box just like the other menu items?
2) How do I make the side-bar images as well as the footer appear automatically after contents above them? Currently I am using the <br> tag to keep them from appearing on top of contents above them.
My website is: www.thuitamaina.com

Here is the code for the menu bar:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css" type="text/css">
<link type="text/css" rel="stylesheet" href="lightbox-form.css">

<script src="lightbox-form.js" type="text/javascript"></script>
<style>
form.hidden {
    display: none;
}
input.hidden {
    display: none;
}
textarea.hidden {
    display: none;
}
select.hidden {
    display: none;
}
label.hidden {
    display: none;
}
p.hidden {
    display: none;
}
</style>
</head>
<body>

    <div id="background">
        <div id="page">
            <div id="header">
                <div id="logo">
                    <img src="http://www.codingforums.com/images/logo.jpg" alt="LOGO" height="240" width="852">
                </div>
                <div id="navigation">


                    <ul>
                        <li class="selected">
                            <a href="index.php">Home</a>
                        </li>
                        <li>
                            <a href="about.php">About</a>
                        </li>
                        <li>
                            <a href="archives.php">Archives</a>
                    
                        </li>
                                                 <?php include 'contact_form.php'; ?>
                         <li>
                                                <a href="#" onClick="openbox('Contact', 1)">Contact</a>
                        </li>
                        <li>

                               <?php include 'feedback_form.php'; ?>                         
                                                <a  href="#" onClick="openbox('Feedback', 1)">Feedback</a>
                        </li>
                        
                        <!--<li>
                            <a href="news.html">News</a>                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>                                          
                                                -->                                        
                                                <li>
                                               
                                                 <input type="text" size="9">
                                                 <?php include 'search_form.php'; ?>                         
                                                <button a href="#" onClick="openbox('Search Results', 1)">Search</button></a>
                                                 
                                                </li>                    
                                                 </ul>
                </div>
            </div>
            <div id="contents">
                <div id="adbox">
                    <!--<img src="http://www.codingforums.com/images/sea-sound.jpg" alt="Img">
-->                    <?php include 'subscription_form.php'; ?>Do you want to receive regular updates of new inspirational and thought-provoking stories via email? <button onClick="openbox('Subscription', 1)" target="_parent">Yes Please!</button>                <!--<p>
                        This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
                    </p>
-->                </div>

Here is the html code that contains the side-bar and footer:

<div id="sidebar">
                    <div class="section">
                                                <?php include 'advert_form.php'; ?>
                        <a href="#" onClick="openbox('Advertize on this Website', 1)"><img src="images/advert1.jpg" alt="Img"></a>
    <br><br><b>Recent Entries</b><br>
<?php 
 
              // Include database connection settings
              include('clinton.php');
  
              $result = mysql_query("SELECT * FROM Stories_by_thuita order by Date DESC limit 0,3");    
  
              while($row = mysql_fetch_assoc($result))  
                 {                 
                    $Index=$row['Index']; 
                    echo '<a href="selected_story.php?Index='.$Index.'">' .$row['Title'] . '<br>';
                      echo '<i> on <span class="listMeta">' . date ('F d, Y', strtotime($row['Date'])) . '</span></i></a><br><br>';
                 
                 }  
     
  
          ?>
 
                </div>
                    <div class="section">
                        <br><br><br><br><br><br><br><br><br><br><?php include 'piano_form.php'; ?>
                        <a href="#" onClick="openbox('Learn Piano', 1)"><img src="images/advert2.jpg" alt="Img"></a>
 <br><br><b>About the Author</b><br>
Name: Thuita J. Maina <br>
Nationality: Kenyan<br>
Location: Kiserian, Rift Valley, Kenya<br>
Mission: To be a cheerful, discerning man of integrity<br>
                    </div>
                    <div class="section">
                        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><?php include 'advert_form.php'; ?>
                        <a href="#" onClick="openbox('Advertize on this Website', 1)"><img src="images/advert3.jpg" alt="Img"></a>
                    </div>
                </div>
            </div>
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><div id="footer">
            <div>
                <ul class="navigation">
                    <li class="active">
                        <a href="index.php">Home</a>
                    </li>
                    <li>
                        <a href="about.php">About</a>
                    </li>
                    <li>
                        <a href="archives.php">Archives</a>
                    </li>
                    <?php include 'contact_form.php'; ?>
                         <li>
                                                <a href="#" onClick="openbox('Contact', 1)">Contact</a>
                        </li>
                    <li>

                               <?php include 'feedback_form.php'; ?>                         
                                                <a  href="#" onClick="openbox('Feedback', 1)">Feedback</a>
                        </li>
                    <!--<li>
                        <a href="news.html">News</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact</a>
                    </li>
-->                </ul>
                <div id="connect">
                    <!--<a href="http://pinterest.com/fwtemplates/" target="_blank" class="pinterest"></a>--> <a href="https://www.facebook.com/thuitamaina" target="_blank" class="facebook"></a> <a href="https://twitter.com/thuitamaina" target="_blank" class="twitter"></a> <a href="https://plus.google.com/+ThuitaJMainaTJ/about" target="_blank" class="googleplus"></a>
                </div>
            </div>
            <p>
                © 2016 by Thuita J. Maina. All Rights Reserved
            </p>
        </div>
    </div>
</body>
</html>

Below is the CSS style sheet for my website:

/* Website template by freewebsitetemplates.com */
body
 {
    background: #ffb744 url(../images/bg-body.jpg) repeat left bottom;
    font-family: "Times New Roman", Times, serif;
    margin: 0;
        text-align: justify;
}
#background {
    background: url(../images/bg-pattern.jpg) repeat-x center top;
    min-height: 1318px;
}
#page {
    width: 960px;
    margin: 0 auto;
}
img {
    border: 0;
}
/*------------------------------ Sprites ------------------------------*/
#navigation li, #navigation li a:hover, #navigation li.selected a {
    background-image: url(../images/bg-menu.png);
    background-repeat: repeat-x;
}
#contents div.box, #contents div.box > div, #contents div.body {
    background-image: url(../images/content-box.png);
    background-repeat: no-repeat;
}
#main div.box, #main div.box > div, #main div.box > div > div {
    background-image: url(../images/bg-box.png);
    background-repeat: no-repeat;
}
/*------------------------------ HEADER ------------------------------*/
#header {
    margin-bottom: 20px;
    padding-top: 20px;
}
/** Logo **/
#logo {
    float: left;
    margin-bottom: 20px;
    margin-left: 49px;
}
/** Navigation **/
#navigation {
    background: url(../images/bg-navigation.png) no-repeat;
    clear: both;
    height: 50px;
    width: 860px;
    margin: 0 auto;
    padding: 1px;
}
#navigation ul {
    display: inline-block;
    width: 860px;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
    background-position: 0 -118px;
    background-repeat: no-repeat;
    height: 49px;
    width: 122px;
    margin: 0;
    padding-left: 1px;
    text-align: center;
}
#navigation li:first-child {
    background: none;
    margin-left: 0;
    padding-left: 0;
}
#navigation li a {
    color: #fff;
    display: block;
    font: bold 14px/48px Arial, Helvetica, sans-serif;
    height: 49px;
    text-decoration: none;
    text-transform: uppercase;
}
#navigation li a:hover {
    background-position: 0 -59px;
    color: #6d6157;
}
#navigation li.selected a {
    background-position: 0 0;
    color: #e4e1bd;
}


/*------------------------------ CONTENTS ------------------------------*/
#contents {
    display: inline-block;
    width: 865px;
    padding: 0 47px;
}
#contents h1 {
    color: #316e66;
    font: 26px/30px "Times New Roman", Times, serif;
    margin: 18px 0 20px;
    padding-left: 2px;
    text-transform: uppercase;
}
#contents div.body h1, #contents h2 {
    color: #316e66;
    font: 30px/30px "Times New Roman", Times, serif;
    margin: 0 0 18px;
    text-transform: uppercase;
}
#contents h2 {
    font-size: 22px;
    margin: 0 0 30px;
}
#contents h2 a {
    color: #2c9688;
    text-decoration: none;
}
#contents p {
    color: #5a4535;
    font-size: 15px;
    line-height: 30px;
    margin: 0;
    padding: 0 0 24px 2px;
}
#contents p a {
    color: #5a4535;
}
#contents p a:hover, #news div.sidebar ul li a:hover {
    color: #917157;
}
/** box-shadow **/
#contents div.box {
    background-position: left bottom;
    margin-bottom: 20px;
    margin-left: 1px;
    padding: 0 0 6px;
}
#contents div.box > div {
    background-position: -1745px top;
    padding: 6px 0 0;
}
#contents div.body {
    background-position: -871px top;
    background-repeat: repeat-y;
    min-height: 980px;
    padding: 30px 40px 0;
}
/** Adbox **/
#adbox {
    background: url(../images/bg-adbox.png) no-repeat left top;
    width: 852px;
 height:20px;    margin: 0 auto;
    padding: 11px 10px 18px;
}
#adbox p {
    font-size: 16px;
}
.ads {
    float: right;
    width: 20px;
    border-left: 1px solid #bbbbbb;
    margin-left: 20px;
    padding-left: 20px;
} 
hr {
    border:0;
    border-top: 1px solid #bbbbbb;
    margin-bottom: 30px;
}
/** MAIN **/
#main {
    float: left;
    min-height: 100px;
    width: 566px;
}
#main div.box {
    background-position: left bottom;
    margin-bottom: 12px;
    padding: 0 0 6px;
}
#main div.box > div {
    background-position: -1145px top;
    padding: 6px 0 0;
}
#main div.box > div > div {
    background-position: -572px top;
    background-repeat: repeat-y;
    padding: 17px;
}
#main div.box h3 {
    color: #316e66;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom: 1px dotted #9c8964;
    margin: 0;
    padding: 0 0 12px;
    text-transform: uppercase;
}
#main div.box h4 {
    font: 22px/24px "Times New Roman", Times, serif;
    font-weight: normal;
    margin: 6px 0 0;
}
#main div.box h4 a {
    color: #5a4535;
    text-decoration: none;
}
#main div.box ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#main div.box ul li {
    border-bottom: 1px dotted #9c8964;
}
#main div.box ul li span {
    color: #5a4535;
    display: block;
    font-size: 14px;
    margin-bottom: 12px;
}
#main div.box ul li p {
    line-height: 24px;
    padding: 0 0 3px;
}
/** SIDEBAR **/
#sidebar {
    float: right;
    height: auto;
    width: 285px;
}
#sidebar div.section {
    height: 144px;
    margin-bottom: 12px;
}
#sidebar div.section:first-child {
    padding: 3px 0 0;
}
#sidebar div.section > a:hover {
    filter:alpha(opacity=60);
    opacity: 0.6;
}
/** testimonials **/
#contents div#testimonials h3 {
    color: #2c9688;
    font-weight: normal;
    letter-spacing: 1px;
    border-bottom: 0;
    padding-bottom: 0;
}
#testimonials p {
    display: inline-block;
    line-height: 24px;
    padding-bottom: 3px;
}
#testimonials p span {
    float: right;
}
#testimonials p span a {
    color: #2c9688;
    text-decoration: none;
}
#testimonials p span a:hover {
    color: #2c9688;
}
/** Rooms, Foods Dive Sites **/
#rooms, #foods, #sites {
    list-style: none;
    margin: 0;
    padding: 0;
}
#rooms li, #foods li, #sites li {
    display: inline-block;
    width: 784px;
    border-top: 1px solid #b7b7b7;
    padding: 30px 0;
    position: relative;
}
#rooms li:first-child, #foods li:first-child, #sites li:first-child {
    border-top: 0;
}
#rooms li img {
    float: left;
    border: 1px solid #2c9688;
    margin-right: 15px;
}
#rooms .rate {
    color: #316e66;
    display: inline-block;
    font: 16px/35px "Times New Roman", Times, serif;
    height: 35px;
    width: 138px;
    border: 1px solid #5a4535;
    text-align: center;
    position: absolute;
    bottom: 30px;
}
/** Food **/
#foods li > div.infos {
    height: 169px;
    width: 780px;
    position: relative;
}
#foods li > div.infos p {
    background: url(../images/bg-foodDetail.png) repeat;
    color: #316e66;
    display: none;
    height: 60px;
    width: 740px;
    padding: 6px 20px 0;
    position: absolute;
    left: 0;
    bottom: 0;
}
#foods li > div.infos p span {
    display: block;
    font: 22px/22px "Times New Roman", Times, serif;
}
#foods li > div.infos:hover span.cover {
    background: url(../images/bg-foodInfos.png) repeat;
    display: inline-block;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
#foods li > div.infos:hover p {
    display: block;
}
/** Dive Site **/
#sites li {
    padding-bottom: 0;
}
#sites li img {
    float: right;
    border: 1px solid #2c9688;
    margin-left: 15px;
}
/** News **/
#news {
    display: inline-block;
    width: 784px;
}
#news > div {
    width: 560px;
    border-right: 1px solid #bbbbbb;
    padding-right: 35px;
}
#news > div img {
    border: 1px solid #2c9688;
    margin-bottom: 20px;
}
#news > div h2 {
    margin-bottom: 12px;
}
#news > div span {
    color: #5a4535;
    display: block;
    font: 15px/24px "Times New Roman", Times, serif;
    margin-bottom: 30px;
}
#news > div span.author {
    color: #2c9688;
    display: block;
    font-size: 14px;
    margin-bottom: 20px;
}
#news div.sidebar {
    float: right;
    width: 160px;
    border: 0;
    padding: 0;
}
#news div.sidebar h3 {
    color: #2c9688;
    font-size: 20px;
    font-weight: normal;
    border-top: 1px solid #b7b7b7;
    margin: 0 0 12px;
    padding-top: 18px;
    text-transform: uppercase;
}
#news div.sidebar h3:first-child {
    border: 0;
    padding-top: 0px;
}
#news div.sidebar ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
#news div.sidebar ul li a {
    color: #5a4535;
    display: inline-block;
    font-size: 15px;
    margin-bottom: 6px;
    text-decoration: none;
}
#news ul li {
    margin-bottom: 12px;
}
/** Contact **/
#contact form {
    float: right;
    color: #5a4535;
    height: 320px;
    width: 420px;
    border: 1px solid #5a4535;
    padding: 19px 19px 6px;
}
#contact form table {
    border-collapse: collapse;
}
#contact form table td {
    padding-bottom: 6px;
}
#contact table td:first-child {
    font-size: 14px;
    line-height: 30px;
    width: 180px;
    text-transform: uppercase;
}
#contact table td.txtarea {
    vertical-align: top;
}
#contact form input {
    height: 17px;
    line-height: 17px;
    width: 278px;
    border: 1px solid #5a4535;
    border-radius: 2px;
}
#contact textarea {
    height: 143px;
    line-height: 17px;
    width: 338px;
    border: 1px solid #5a4535;
    border-radius: 2px;
    overflow: auto;
    resize: none;
}
#contact input.btn {
    background: url(../images/btn-send.png) no-repeat -70px 0;
    cursor: pointer;
    height: 26px;
    width: 60px;
    border: 0;
    padding: 0;
    margin: 0;
}
#contact input.btn:hover {
    background-position: 0 0;
}
#contact p span {
    display: block;
    text-transform: uppercase;
}
/*------------------------------ FOOTER ------------------------------*/
#footer {
    color: #594334;
    font-size: 14px;
    line-height: 48px;
    margin: -38px 0 20px;
    padding-top: 42px;
    text-transform: uppercase;
}
#footer > div {
    background-color: #ac9e94;
    height: 48px;
    width: 822px;
    border-bottom: 1px solid #72675f;
    border-top: 1px solid #cdbeb2;
    margin: 0 auto;
    padding: 0 20px;
    text-align: right;
}
#footer ul.navigation {
    float: left;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer ul.navigation li {
    float: left;
    margin-right: 10px;
}
#footer ul.navigation li a {
    color: #594334;
    padding: 0 5px;
    text-decoration: none;
}
#footer ul.navigation li:first-child a {
    border-left: 0;
    padding-left: 0;
}
#footer ul.navigation li a:hover {
    color: #eee7c3;
}
#footer ul.navigation li.active a {
    color: #fff;
}
#footer p {
    margin: 0;
    text-align: center;
    text-transform: none;
}
/** Connect **/
#connect {
    float: right;
    display: inline-block;
    line-height: 26px;
    margin: 12px 0 0;
}
#connect a {
    background: url(../images/icons.png) no-repeat;
    display: inline-block;
    height: 23px;
    width: 23px;
    margin-left: 10px;
}
#connect a.pinterest {
    background-position: 0 -33px;
}
#connect a.facebook {
    background-position: 0 -98px;
}
#connect a.twitter {
    background-position: 0 -164px;
    width: 28px;
}
#connect a.googleplus {
    background-position: 0 -230px;
}
#connect a.pinterest:hover {
    background-position: 0 0;
}
#connect a.facebook:hover {
    background-position: 0 -65px;
}
#connect a.twitter:hover {
    background-position: 0 -131px;
}
#connect a.googleplus:hover {
    background-position: 0 -197px;
}

Re: How do I achieve this?

Unfortunately, we can only offer limited assistance when it comes to website development or optimization, which is what your request is relating to, because we are not a web development company and furthermore we do not know how your scripts work.

Searching for problem solutions that relate to web development on Google.com is a good idea. Stackoverflow.com is another great site that has many web development issues resolved and allows you to submit your own.

Re: How do I achieve this?

I thank you for the information! I was looking for and could not find. You helped me!
abk