Solved

CSS is blocking my button from redirecting to a new website

Posted on 2015-02-05
5
79 Views
Last Modified: 2015-02-06
the following code is not redirecting me to a different site
...
      <div class="button-wrap left tooltip login-button">
            <a href="http://mail.yahoo.com" class="button dark"><span class="button-icon login"></span>Sign In</a>
      </div>
....

below is the complete header section:

            <div class="header-wrap">
                  <header class="site-header">
                        <div class="row">
                              <div class="site-logo left">
                                    <a href="./js/Academy – Learning Management Theme.html" rel="home">
                                          <img src="./images/oxford-white-logo.png" alt="My Blog">
                                    </a>
                              </div>
                              <!-- /logo -->
                              <div class="header-options right clearfix">                              
                                    <div class="login-options right">
                                                                        
                                          <div class="button-wrap left tooltip login-button">
                                                <a href="http://scenariousa.com/signin/" class="button dark"><span class="button-icon login"></span>Sign In</a>
                                          </div>
                                          
                                    </div>
                                    <!-- /login options -->                                                            
                              <nav class="header-navigation right">
                                    <div class="menu">
                                          <ul>
                                                <li class="page_item page-item-183"><a href="http://scenariousa.com/features/">Home</a></li>
                                                <li class="page_item page-item-2129 current_page_item"><a href="./js/Academy – Learning Management Theme.html">Programs</a></li>
                                                <li class="page_item page-item-2112"><a href="http://scenariousa.com/plans/">Testimonials</a></li>
                                                <li class="page_item page-item-2"><a href="http://scenariousa.com/sample-page/">Why Us</a></li>
                                                <li class="page_item page-item-601"><a href="http://scenariousa.com/contact/">Locations</a></li>
                                          </ul>
                                    </div>
                                    
                                    <div class="select-menu">
                                          <span>Menu</span>
                                          <select name="page_id" id="page_id" style="opacity: 0;">
                                                <option class="level-0" value="183">Home</option>
                                                <option class="level-0" value="2129">Programs</option>
                                                <option class="level-0" value="2112">Testimonials</option>
                                                <option class="level-0" value="2">Why Us</option>
                                                <option class="level-0" value="601">Locations</option>
                                          </select>
                                          
                                    </div>
                                    <!--/ select menu-->
                              </nav>
                              <!-- /navigation -->                                    
                        </div>                  
                  </header>
                  <!-- /header -->
            </div>
style.css
0
Comment
Question by:matthew phung
  • 2
  • 2
5 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Shouldn't that <span class="button-icon login"></span> be around the words Sign In ?  If there is no content in the <span>, there is nothing to click on.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
it's wrapped in the a, so it should still work.

you could have an element positioned on 'top' of the link, that is not visible - like a margin - could be obstructing the link. without seeing your page though it's not possible to know exactly what is going on. please post a link to the page.
0
 

Author Comment

by:matthew phung
Comment Utility
Thank you for the replies...
Dave - I moved the "Sign In" text into the span and it still did not make a difference.

I uploaded the page to http://www.throwbackfestca.com/

Thank you for your help thus far.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
Comment Utility
It's what I thought. Something about the button-wrap element is obscuring the link, I didn't investigate what exactly. However, you can fix it by wrapping the whole thing in a link instead. You might need to adjust some styles...

<a href="http://scenariousa.com/signin/" class="button dark active">
   <div class="button-wrap left tooltip login-button">
     <span class="button-icon login"></span>Sign In
   </div>
</a>

Open in new window

0
 

Author Comment

by:matthew phung
Comment Utility
Thank you Kyle.... I played around with it and found that the tooltip was the cause. You just beat me to it. I appreciate your help!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now