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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Cairns, QLD, Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Flexslider direction nav problem. (New to HTML/CSS) :)

    Hi guys I am using a FlexSlider by WooThemes, and for some reason the direction navigation is cut in half. I can't seem to find what is causing it. Any help would be appreciated, Thanks!

    HTML:
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
      <title>Zoe Strickland | Massage; Pregnancy Massage &amp; Hypnobirthing</title>
      <meta charset="utf-8" lang="en">
      <link rel="stylesheet" href="main.css">
      <link rel="stylesheet" href="flexslider.css" type="text/css">
      <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      <script src="jquery.flexslider.js"></script>
      <!-- Js Flexslider -->
      <script type="text/javascript" charset="utf-8">
      $(window).load(function() {
        $('.flexslider').flexslider({
              pauseOnHover: true,
              controlNav: false,
        });
      });
      </script>
    </head>
    
    <body>
      <div id="wrap">
    
        <!-- HEADER -->
        <header id="main-header">
          <a href="index.html">
            <img src="img/title-logo.png" alt="Zoe Strickland | Massage; Pregnancy Massage &amp; Hypnobirthing" class="logo">
          </a>
          <nav class="main-nav">
            <a link href="#">Home</a>
            <a link href="#">About Zoe</a>
            <a link href="#">Pregnancy Massage</a>
            <a link href="#">Hypnobirthing</a>
            <a link href="#">Massage Therapies</a>
            <a link href="#">Gift Vouchers</a>
            <a link href="#">Mum &amp; Baby Wellbeing Mornings</a>
            <a link href="#">Contact &amp; Links</a>
          </nav>
        </header>
    
        <!-- CONTENT -->
        <div id="content">
          <!-- IMAGE-SLIDER -->
          <div class="flexslider">
            <ul class="slides">
              <li>
                <a link href="#">
                  <img src="img/girl_stones.jpg"/>
                </a> 
                <div class="caption pic-one">Relaxing Massage</div>
              </li>
              <li>
                <a link href="#">
                  <img src="img/rsz_preg_belly.jpg"/>
                </a>
                <div class="caption pic-two">Pregnancy Massage</div>
              </li>
              <li>
                <a link href="#">
                  <img src="img/rsz_baby.jpg"/>
                </a>
                <div class="caption pic-three">Hypnobirthing</div>
              </li>
            </ul>
           </div>
          <div class="intro">
            <p>Zoe has a special interest in supporting women on their journey through pregnancy and birth and is an experienced pregnancy massage therapist for which she offers an individual service both ante-natal and post partum. Zoe also offers partner training - sharing easily learned techniques to support birthing mums with massage in labour.</p>
          </div>
        </div>
        <footer id="main-footer">
          <a href="mailto:zoe@zoestricklandmassage.com.au">
            <img src="C:\Users\Elliot\Desktop\WEB DESIGN\Images\General/mail.png" alt="Mail Logo" class="mail">
          </a>
          <a href="https://www.facebook.com/profile.php?id=100003339870371&fref=ts">
            <img src="C:\Users\Elliot\Desktop\WEB DESIGN\Images\General/facebook-wrap.png" alt="Facebook Logo" class="facebook-icon"></a>  
          <p>&copy; 2014 Zoe Strickland Massage.</p>  
        </footer>  
      </div>  
    </body>
    </html>
    CSS:
    Code:
    /*-------------------------------
      GENERAL
    -------------------------------*/
    
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding-top: 25px;
      font: 1.3em/1.6 sans-serif;
    }
    #wrap {
      margin: auto;
      width: 90%;
    }
    #main-header {
      background: url('img/shell-bg.jpg');
      text-align: center;
      height: 300px;
      margin-bottom: 15px;
    }
    .logo {
      width: 70%;
      height: 55%;
      margin: 2em 15% 0 15%;
    }
    #content {
      color: #808080;
    }
    #main-footer {
      color: #B2B2B2;
    }
    
    
    /*-------------------------------
      NAVIGATION
    -------------------------------*/ 
    }
    .logo, .main-nav {
      display: inline-block;
    }
    .main-nav a {
      text-decoration: none;
      font-variant: small-caps;
      color: #FFF;
      border-right: 1px solid;
      padding: 0 .75em;
      font-size: 1em;
    	line-height: 1rem;
    }
    .main-nav a:hover {
      color: lightblue;
      border-color: #FFF;
    }
    .main-nav a:last-child, .main-nav a:nth-child(6) {
    	border-right: none;
    }
    
    
    /*-------------------------------
      FLEX SLIDER
    -------------------------------*/
    
    .caption {
      font-size: 3em;
      margin: -1.5em 0 0 1em;
      display: -webkit-flex;
      display: -moz-flex;
      display: -o-flex;
      display: flex;
      font-family: "Dancing Script", sans-serif;
    }
    
    .pic-two {
      -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -o-justify-content: flex-end;  justify-content: flex-end;  
      margin: -4em 2em 0 0;
    }
    
    .pic-three {
      -webkit-justify-content: center; -moz-justify-content: center; -o-justify-content: center;  justify-content: center; 
      margin: -2em 0 0 0;
    }
    
    /*-------------------------------
      MEDIA QUERIES
    -------------------------------*/
    
    /* Mobile ---> 481px
       Tablet ---> 769px*/  
     
    @media screen and (max-width: 700px) {}
    
    @media screen and (min-width: 701px) {}
    
    @media screen and (min-width: 1024px) {
      #wrap {
        width: 1000px;
      }
    }

  • #2
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Cairns, QLD, Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Flexslider direction nav problem. (New to HTML/CSS) :)-flexslider-problem.jpg

    I thought this might help you guys understand my problem easier.. As you can see, the navigation arrows are cut off at the ends.
    Thanks again.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    Do you have a link to the page in question?

  • #4
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Cairns, QLD, Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I uploaded the files to this address. Thanks .

    Zoe Strickland | Massage; Pregnancy Massage & Hypnobirthing

  • #5
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    On line 64 in flexslider.css:
    change:
    Code:
    .flex-direction-nav a  { text-decoration:none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
    to
    Code:
    .flex-direction-nav a  { text-decoration:none; display: block; width: 40px;  height: 60px; margin: -20px 0 0; position: absolute; top: 50%; z-index:  10; overflow: hidden; opacity: 0; cursor: pointer; color:  rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3);  -webkit-transition: all .3s ease; -moz-transition: all .3s ease;  transition: all .3s ease; }
    Alternatively, On line 71 in flexslider.css
    change:
    Code:
    .flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
    Code:
    .flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 25px; display: inline-block; content: '\f001'; }
    or you can play with these two values, till you find the "perfect" combination.

  • Users who have thanked Lerura for this post:

    estrick (07-30-2014)

  • #6
    New to the CF scene
    Join Date
    Jul 2014
    Location
    Cairns, QLD, Australia
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks so much Lerura! Fixed it straight away.


  •  

    Tags for this Thread

    Posting Permissions

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