Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    alignment and hover!!??

    Hey guys/gals,

    I'm a product designer currently prototyping an iMac accessory and don't have the necessary funds to support an awesome, accompanying website, so decided I'd build it myself (naive maybe). Anyway, a week in and coming to terms with textmate, etc etc, been through relevant mark-up and css3 tutorials however I'm some serious issues with alignment of my footer paragraphs and other basic stuff. So any push in th right direction is seriously appreciated.

    I've only bootstrapped the page as I wanted to sort out the footer and links first as image prototypes and videos aren't done yet.

    Markup.

    Code:
    <body>
      
      <div id="page">
        <div id="background-wrap">
          <img id="still-background" src="img/home/still-background.jpg" width="1500" height="660">
        </div>
      </div>
    
    
    <br>
    
    <div id="footer-wrap">
              <ul class="nav-bottom">
                <li><a href="/">home</a></li>
                <li><a href="about">about</a></li>
                <li><a href="help">help</a></li>
                <li><a href="jobs">jobs</a></li>
                <li><a href="contact">contact</a></li>
                  <li><a target="_blank" class="share-sift" id="share-sift-facebook" href="http://www.facebook.com/sift"></a></li>
                  <li><a target="_blank" class="share-sift" id="share-sift-twitter" href="http://www.twitter.com/sift"></a></li>
              </ul>
              
              <br>
    </div>
    
    <div>
      <p>Copyright 2012 *****, inc. Made with love, exclusively in the United Kingdom by <a target="_blank" id="aulter" href="http://www.aulter.com">link</a>.</p> 
      <p>***** brand and our logo are trademarks of *****, ltd. <a href="/terms">Terms</a> <a href="/privacy">Policy</a></p> 
    </div>
    </body>
    CSS

    Code:
    #page {
      background: #eee;
    }
    
    #footer-wrap {
      float:left;
      width:100%;
      font-weight: bold;
      background:#fff;
      overflow:hidden;
      position:relative;
    }
    
    #footer-wrap ul {
      font-style: serif;
      clear:left;
      float:left;
      list-style:none;
      margin:0;
      padding:5px;
      position:relative;
      left:50%;
      text-align:center;
    }
    
    #footer-wrap ul li {
      font-style: serif;
      display:block;
      float:left;
      list-style:none;
      margin:0;
      padding:10px;
      position:relative;
      right:50%;
    }
    
    #footer-wrap ul li a {
      font-style: serif;
      display:block;
      margin:10px 0 0 40px;
      padding:20px 30px;
      background:#ddd;
      border: bold;
      color:#000;
      text-decoration:none;
      line-height:1.3em;
      
    
    p {
      margin-left: auto;
      margin-right: auto;
      width: 60%;
    }

    Now, that CSS isn't even allowing me to enter background or anything for the hover class which I've excluded there... which was #footer-wrap ul li a:hover {

    and I can't seem to centre the paragraphs.. tried giving them id's and classes, that didn't work.. I'm assuming I've screwed up my selectors or something..

    anyway, any help is massively appreciated and I apologise for the simplicity of the problem, my first week and first page..

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    buuump

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,686
    Thanks
    25
    Thanked 656 Times in 655 Posts
    In your CSS the "#footer-wrap ul li a " does not have a closing } so the paragraph style does not register.
    Use text-align:center; NOT margin-left: auto; margin-right: auto;

    This may be your problem with the #footer-wrap ul li a:hover , but can't guess at that because you didn't include it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •