Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Hi,

    With my knowledge of CSS limited I have created a horizontal menu within a nested div, I can't however seem to find a solution to bottom and centre align this menu - alternatively if there is an easier solution to start again I would be very interested?

    Many thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Andy Sutherland - Personal trainer - Edinburgh</title>
    <style type="text/css">
        
    #wrapper {
        height: 700px;
        width: 900px;
        margin-right: auto;
        margin-left: auto;
        margin-top: 100px;
    }
    #logo {
        float: left;
        width: 350px;
        height: 170px;
        border-radius: 20px;
        background-color: #fff;
        -moz-box-shadow:0px 4px 5px #12557F;
        -webkit-box-shadow:0px 4px 5px #12557F;
        box-shadow:0px 4px 5px #12557F;
    }
    
    #nav_contact {
        float: right;
        width: 520px;
        height: 170px;
        border-radius: 20px;
        background-color: rgba(100,149,237, 0.3);
        -moz-box-shadow:0px 4px 5px #12557F;
        -webkit-box-shadow:0px 4px 5px #12557F;
        box-shadow:0px 4px 5px #12557F;
    }
    
    #main_content {
        float: left;
        width: 900px;
        height: 500px;
        margin-top: 30px;
        border-radius: 20px;
        background-color: rgba(100,149,237, 0.3);
        -moz-box-shadow:0px 4px 5px #12557F;
        -webkit-box-shadow:0px 4px 5px #12557F;
        box-shadow:0px 4px 5px #12557F;
    }
    body {
        background-image: url(blue-circles.jpg);
    }
    #nav_contact ul {
        list-style-type: none;
        font-family: Arial, Helvetica, sans-serif;
        font-size:16px;
     
    }
    
    #nav_contact ul li a {
        color: #FFF;;
        text-decoration: none;
        float: left;
        padding-right: 10px;
        padding-left: 10px;
        line-height: 25px;
        margin-right: auto;
    
    }
    #main_content #info {
        height: 480px;
        width: 330px;
        border-right-style: dashed;
        border-right-width: 1px;
        border-right-color: #1D85C6;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        padding-left: 10px;
    }
    
    #nav_contact #contact {
        float: right;
        width: 220px;
        border-left-width: 1px;
        border-left-color: #1D85C6;
        height: 170px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        text-decoration: none;
        padding-top: 0px;
    }
    #nav {
        float: left;
        width: 280px;
        height: 170px;
        border-right-width: 1px;
        border-right-style: dashed;
        border-right-color: #1D85C6;
     
    }
    
    h1 {
        font-size: 14px;
        color: #FFF;
    }
    h1,h2,h3,h4,h5,h6 {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    </style>
    </head>
    
    <body>
    <div id="wrapper">
      <div id="logo"></div>
      <div id="nav_contact">
      <div id="nav">
        <ul>
          <li><a href="#">Home<a/></a></li>
          <li><a href="#">About<a/></a></li>
          <li><a href="#">Testimonials<a/></a></li>
        </ul></div>
      <div id="contact">
        <h1>Contact Andy</h1>
      </div>
        
      </div>
     
      <div id="main_content">
        <div id="info"></div>
      </div>
    </div>
    </body>
    </html>
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    I'm sorta confused by the CSS and picture combo, but if all else fails, use relative positioning.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Define a width and add margin:0 auto; to the UL. Then, add position:relative; and bottom:##px;, where ## is the distance from the bottom you want it to be.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Thanks Ronald, I changed it to this:

    #nav_contact ul {
    position: relative;
    right: 17px;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    width: 270px;
    margin:auto;
    bottom: -130px;
    }

    I wasn't sure about using negative values but it seems to be working fine!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:49 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com