4 Replies Latest reply on Apr 21, 2015 12:44 PM by BobobobCat

    Help aligning menu bottom

    BobobobCat Level 1

      Please can you help me to align my menu to the bottom of the logo? Thanks.

       

      Kobane Barbers

       

      CSS

       

      @charset "utf-8";
      /* Navigation CSS */

      #mainNavigation{

      float:left ;

      height: 100px;

      width: 1000px;

      margin-top:0px;

      }

      #mainNavigation ul {

      list-style-type: none ;

       

      }
      #mainNavigation ul li{

      float: left ;

      height: 200px ;

      /*ensures the menu is horizontal NOT vertical*/

      display:inline ;


      }

      #mainNavigation ul li a{

      float:left;

      height: 50px;

      text-decoration: none;

      }


      /* CSS Document */
      h1{
      font-family:Arial;
      font-style:normal;
      font-weight:400;

      }

      h2{
      font-family:Arial;
      font-style:normal;
      font-weight:400;
      }

      body{
      <?php
      // define variables and set to empty values
      $nameErr = $emailErr = $genderErr = $websiteErr = "";
      $name = $email = $gender = $comment = $website = "";

      if ($_SERVER["REQUEST_METHOD"] == "POST") {
         if (empty($_POST["name"])) {
           $nameErr = "Name is required";
         } else {
           $name = test_input($_POST["name"]);
           // check if name only contains letters and whitespace
           if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
             $nameErr = "Only letters and white space allowed";
           }
         }
        
         if (empty($_POST["email"])) {
           $emailErr = "Email is required";
         } else {
           $email = test_input($_POST["email"]);
           // check if e-mail address is well-formed
           if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
             $emailErr = "Invalid email format";
           }
         }
          
         if (empty($_POST["website"])) {
           $website = "";
         } else {
           $website = test_input($_POST["website"]);
           // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
           if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%= ~_|]/i",$website)) {
             $websiteErr = "Invalid URL";
           }
         }

         if (empty($_POST["comment"])) {
           $comment = "";
         } else {
           $comment = test_input($_POST["comment"]);
         }

         if (empty($_POST["gender"])) {
           $genderErr = "Gender is required";
         } else {
           $gender = test_input($_POST["gender"]);
         }
      }

      function test_input($data) {
         $data = trim($data);
         $data = stripslashes($data);
         $data = htmlspecialchars($data);
         return $data;
      }

      background-color: #cccccc;
      font-family:Arial;
      font-style:normal;
      font-weight:200;

      }
      footer{
      background-color: #000000;
      color: #ffffff;
      font-weight:600;
      font-size: 14px;
      text-align: center;
      margin-left: 5%; /*margin add space around the are selected div*/
      margin-top: 0%;
      margin-right: 5%;
      margin-bottom: 5%;
      padding-left: 10px; /* padding adds space inside our div*/
      padding-top: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      clear:both;
      }
      nav{
      background-color:#000000;
      color: #ffffff;
      text-align:center;
      margin-top:5%;
      margin-right: 5%;
      margin-bottom:5%;
      margin-left:5%;;
      padding-top:10px;
      padding-top:5px;
      padding-right:10px;
      padding-bottom:5px;
      }
      .maincontent{
        background-color:#FC0;
      color: #ffffff;
      text-align:center;
      margin-top:2%;
      margin-right: 5%;
      margin-bottom:2%;
      margin-left:5%;;
      padding-top:5px;
      padding-top:5px;
      padding-right:10px;
      padding-bottom:2px;
      }
      .menu{
        float:left;
      }
      .sectionLeft{
      width:30%;
      margin-left:5%;
      margin-right:2.5%;
      float:left;
      }
      .sectionRight{

      bottom: 0;

      }
      header{
      text-align:center;
      clear:both;
      }
      body{
      font-family:Arial;
      font-style:normal;
      font-weight:200;
      background-image:url(images/bkgdHome.jpg);
      background-size:cover;
      }

      a{
      color:#ff0004;
      text-decoration:none;
      }
      .navHome{
      position: relative;
      margin-left:2%;
      margin-right:2%;
      bottom: 0;
      }
      #header-content
      {
      position: absolute;
      bottom: 367px;
      left: 239px;
      width: 785px;
      height: 56px;
      }
      /*slider*/
      .sliderdiv{
      position: relative;
          height: 500px;
          width: 500px;

      }
      .sliderdiv{
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -125px; // Half the height
          margin-left: -125px; // Half the width
          height: 250px;
          width: 250px;
      }
      .social{
      clear:both;
      margin-left: 50%; /*margin add space around the are selected div*/
      margin-right: 50%; /*margin add space around the are selected div*/
      display:block;
      padding-bottom: 0px;
      }
      /*middle content area*/

      .content{
      width: 70%;
      float: left;
      }
      .top-sidebar{
      width: 21%;
      float: left;
      background-color: #FFF;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      margin: 2% 0 2% 3%; /*instead of margin left, bottom etc.*/
      padding: 2% 3%;
      }
      /*new header*/
      .alignleft {
      float: left;
      width: 140px;
      height: 100px;
      padding: 0px;
      margin: 0px;
      }
      .alignright {
      background-color:#36C;
      float: right;
      position:relative;
      bottom: 0;
      }
      #textbox{
      height: 100px;
      padding-left: 10px;
      }

      }
      @media screen and (max-width:750px){
      h1{
      font-family:Arial;
      font-style:normal;
      font-weight:400;
      font-size:1.5em;
      text-shadow: 2px 3px #ffffff;
      text-align:center;
      }

      @media screen and (max-width:600px){
      .logo{
        width:40%;
        height:40%
      }
      nav{
      background-color:#ffffff;
      color: #000000;
      text-align:center;
      margin-top:6%;
      margin-right: 5%;
      margin-bottom:-1%;
      margin-left:5%;;
      padding-top:10px;
      padding-top:3px;
      padding-right:10px;
      padding-bottom:5px;
      font-weight:700;
      font-variant:normal;
      font-family:Arial;
      font-style:normal;
      }
      .sectionLeft{
      width:90%;
      margin-left:5%;
      margin-right:5%;
      float:left;
      }
      .sectionRight{
      width:88%;
      margin-left:5%;
      margin-right:5%;
      float:right;
      background-color:#f2f2f2;
      border-top:10 solid #000000;
      border-bottom:10pxsolid #000000;
        margin-bottom:5%;
        padding-left:10;

      }
      nav a {
      color:#009;
      text-transform:uppercase;
      text-decoration:none;
      display: inline-block;
      font-weight:bold;
      font-size: .9em;
      }
      nav a:hover { color:#F00
      .clean-fix {clear: both; line-height:2px;}


      text

      #slider-wrap img {
      margin: 0 auto;
      text-align: center;
      }.text {
      color: #F00;
      }
      .welcom {
      color: #F00;
      }

        • 1. Re: Help aligning menu bottom
          Nancy OShea Adobe Community Professional & MVP

          Can you please explain why you have PHP code inside your CSS body selector?

          PHP does not belong in your CSS code.

           

          body{
          <?php
          // define variables and set to empty values
          $nameErr = $emailErr = $genderErr = $websiteErr = "";
          $name = $email = $gender = $comment = $website = "";

          if ($_SERVER["REQUEST_METHOD"] == "POST") {
            if (empty($_POST["name"])) {
              $nameErr = "Name is required";
            } else {
              $name = test_input($_POST["name"]);
              // check if name only contains letters and whitespace
              if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
                $nameErr = "Only letters and white space allowed";
              }
            }
           
            if (empty($_POST["email"])) {
              $emailErr = "Email is required";
            } else {
              $email = test_input($_POST["email"]);
              // check if e-mail address is well-formed
              if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
                $emailErr = "Invalid email format";
              }
            }
             
            if (empty($_POST["website"])) {
              $website = "";
            } else {
              $website = test_input($_POST["website"]);
              // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
              if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%= ~_|]/i",$website)) {
                $websiteErr = "Invalid URL";
              }
            }

            if (empty($_POST["comment"])) {
              $comment = "";
            } else {
              $comment = test_input($_POST["comment"]);
            }

            if (empty($_POST["gender"])) {
              $genderErr = "Gender is required";
            } else {
              $gender = test_input($_POST["gender"]);
            }
          }

          function test_input($data) {
            $data = trim($data);
            $data = stripslashes($data);
            $data = htmlspecialchars($data);
            return $data;
          }

           

          Nancy O.

          • 2. Re: Help aligning menu bottom
            BobobobCat Level 1

            mmm yep. This shouldn't be in there!

            • 3. Re: Help aligning menu bottom
              Nancy OShea Adobe Community Professional & MVP

              Your online page does not contain an HTML menu.  All I see are 2 paragraphs.

              See link below for an example of menu below logo.  View source in browser to see the code.

              Alt-Web :: Responsive Menu

               

               

              Nancy O.

              • 4. Re: Help aligning menu bottom
                BobobobCat Level 1

                Should there be two div tags? One with the logo the other containing the menu. Would the bottom: 0; then work?

                 

                I'll look at your example, this is helpful thanks. The collapsed menu doesn't appear if I copy and paste the code into my own page. Why might this be? Thanks.

                 

                While on, where is the best place for a good example of creating to columns within the main content i.e. content and aside? Thanks again.

                 

                  <p class="alignright"><p align="left"><a href="index.html" class="navHome">Home</a> <a href="price list.html" target="_self">Price List</a><a href="about.html" class="navHome"></a> <a href="gallery.html" target="_self">Gallery</a><a href="portfolio.html" class="navHome"></a> <a href="contact us.html" target="_self">Contact Us</a><a href="contact.html" class="navHome"></a><a href="references.html" target="_self">References</a><a href="contact.html" class="navHome"></a></p> </div></p>