Ссылка href не может быть нажата

Мои ссылки заголовка не работают. Я устал менять все z-index, но не повезло. Я также попытался изменить href =. , к href =, еще не повезло. Также пытался удалить APdiv, не имело никакого значения.Ссылка href не может быть нажата

Еще одна вещь, которую я узнал, это то, что я не могу выделить текст в заголовке.

Заголовок

<div class='container'> 
     <div class='five columns logo'></div> 
     <div class='eleven columns'> 
     <div id="apDiv2"><img src="images/misc/logo.jpg" width="144" height="38"></div> 
     <ul class='mainMenu'> 
      <li><a href='index.php' title='Home' style="color: #FFF">Home</a></li> 
      <li><a href='about_us.php' title='About us' style="color: #FFF">About us</a></li> 
      <li><a href='#' title='Pricing' style="color: #FFF">Pricing</a></li> 
      <li><a href='#' title='Blog' style="color: #FFF">Blog</a></li> 
      <li><a href='#' title='Portfolio' style="color: #FFF">Portfolio</a></li> 
      <li><a href='#' title='Contact' style="color: #FFF">Contact</a></li> 
     </ul> 
     </div> 
    </div>

Css

body { 
    margin:0; 
    padding: 0; 
    font-family: "Open Sans", Arial, sans-serif; 
} 
body { 
    background: #fff; 
    color: #585858; 
    font-size: 24px; 
} 



/* 
* Paragraf 
*/ 
p {font-size: 80%; font-weight: 300; color: #333; line-height: 22px;} 



/* 
* Link 
*/ 
a, a:visited {text-decoration: none; color: #585858;} 



/* 
* Headings 
*/ 
h1 {font-size: 1.8em; line-height: 1.23em;} 
h2 {font-size: 22px;} 
h3 { 
    font-size: 24px; 
    font-weight: 400; 
    padding: 20px 0; 
    font-family: 'Crete Round', Georgia, serif ; 
} 
h4 {font-size: 18px;} 
h5 {font-size: 16px; padding-bottom: 10px;} 
h6 {font-size: 14px; padding-bottom: 10px; font-weight: bold;} 

h5 b {font-weight: bold;} 


/* 
* Lista NIE uporzadkowana UL 
*/ 
ul {font-size: 14px; margin: 7px 0; padding-left: 10px;} 
ul li {margin-bottom: 5px;} 


/* 
* divs random 
*/ 
.container .clear, body .clear {width: 100%; float: left; clear: both; margin: 20px 0;} 
.one-third {text-align: center;} 



/* 
* Header 
*/ 

header nav { 
    width: 100%; 
    float: left; 
    margin: 0; 
    padding: 15px 0 20px; 
    background: #000; 
    position: reletive; 
    z-index: 1; 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.3); 
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3); 
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3); 
    font-family: "Segoe UI"; 
} 
header .slogan {float:left;padding: 80px 0;} 
header .slogan a.green { 
    margin: 13px 0; 
    padding: 10px 28px; 
} 
header p {color: #fff;} 
header h1, header h2, header h4 {width: 100%; float: left; clear: both; text-align: left; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); font-weight: 600;} 
header h1 {font-size: 3em; margin-bottom: 10px;} 
header h2 {font-size: 2em;} 
header h4 {font-weight: normal; margin-bottom: 10px;} 




/* 
* Logo 
*/ 
.logo a {color: #444; text-decoration: none; line-height: 20px;} 
.logo a:hover {color: #FF6A00;} 




/* 
* Menu 
*/ 
ul.mainMenu { 
    margin: 0; 
    padding: 0; 
    float: right; 
    height: 10px; 
} 
ul.mainMenu li {display: inline; float: left; margin: 2px 10px;} 
ul.mainMenu li a {font-size: 13px; color: #444; text-decoration: none;} 
ul.mainMenu li a:hover { 
    color: #F3FAB6; 
    -webkit-transition: color .12s ease-in-out; 
    -moz-transition: color .12s ease-in-out; 
    -ms-transition: color .12s ease-in-out; 
    -o-transition: color .12s ease-in-out; 
    transition: color .12s ease-in-out; 
} 







/* 
* Orange 
*/ 
.orange {width: 100%; float: left; clear: both; background: #ff6a00; margin: 50px 0; padding: 45px 0; color: #fff; text-align: center; position: relative;z-index: 1;} 
.orange h2 {width: 100%; margin: 20px 0 50px; text-align: center; text-shadow: none;} 
.orange p {width: 600px; margin: 0 auto 30px; color: #fff; text-align: center;} 
.orange a.dalej {display: block; width: 185px; background: #df4a00; color: #fff; margin: 0 auto 20px; padding: 10px 20px; font-size: 12px; text-transform: uppercase; 
    border-radius: 30px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
} 
.orange a.dalej:hover {background: #fff; color: #ff6a00;} 


/* 
* Gray 
*/ 
.gray {width: 100%; float: left; clear: both; background: #f6f6f6; margin: 50px 0; padding: 45px 0; z-index: 1;} 




/* 
* Form, input, label, textarea 
*/ 
.form h3, .form p {text-align: center;} 
form {width: 500px; margin: 30px auto; text-align: center;} 
input, label, textarea {width: 500px; float: left; margin: 0; padding: 0;} 
label {font-size: 12px; text-transform: uppercase; font-weight: 300; margin-bottom: 7px;} 
input {margin-bottom: 20px; padding: 7px 0; text-align: center;} 
input, textarea {border: 1px solid #ddd; outline: none;} 
input:focus, textarea:focus {border-color: #b6b6b6;} 
textarea {width: 480px; padding: 7px 10px;} 
input.error, textarea.error {border-color: #cc4847;} 



input[type='submit'] {width: 502px; padding: 12px 0; font-size: 16px; border: none; background: #eee; color: #aaa; cursor: pointer;} 
input[type='submit']:hover {background: #1EBA6B; color: #fff;} 



/* 
* Focus 
*/ 
.focus h3 {margin-bottom: 15px;} 
.focus h4, .focus h3 {float: left; width: 100%; text-align: center; margin-bottom: 7px;} 
.focus p {text-align: center;} 



/* 
* Gallery 
*/ 
.gallery a {width: 140px; height: 100px; overflow: hidden; float: left; margin: 5px; } 
.gallery a img {height: 95px;} 




/* 
* a#Top 
*/ 
a#top {display: none; width: 7px; height: 17px; padding: 5px; position: fixed; bottom: 50px; right: 60px; z-index: 1; color: #fff; background: #ff6a00; font-size: 14px; font-weight: 300;} 






/* 
* BUTTONS 
*/ 
.button {float: left; color: #fff; text-transform: uppercase; text-shadow: 0 1px 1px rgba(0,0,0,.2); 
    border-radius: 2px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 

    -webkit-transition: background .12s ease-in-out; 
    -moz-transition: background .12s ease-in-out; 
    -ms-transition: background .12s ease-in-out; 
    -o-transition: background .12s ease-in-out; 
    transition: background .12s ease-in-out; 
} 


.medium {font-size: 12px; margin: 5px 0; padding: 9px 14px 8px;} 



a.green {background: #45C491; color: #fff; 
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.2), 0 1px 0 0 rgba(255,255,255,.2) inset; 
    -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2), 0 1px 0 0 rgba(255,255,255,.2) inset; 
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2), 0 1px 0 0 rgba(255,255,255,.2) inset; 
} 
a.green:hover {background: #36ae7e} 



/* 
* Footer 
*/ 
footer {width: 100%; float: left; margin: 20px 0 0; padding: 30px 0; background: #333;} 
footer h5 {color: #ccc;} 
footer p {color: #aaa; line-height: 15px; font-size: 12px; margin-bottom: 7px;} 
footer a {color: #ddd;} 
footer a:hover {color: #ff6a00;} 

footer .social a {float: left; margin-right: 10px;} 
footer .social a img {width: 35px; opacity: 0.4;} 
footer .social a:hover img {opacity: 1;} 






/* ------------------- 
* RESPOSIVE ELEMENTS 
* ------------------- */ 
@media only screen and (max-width: 767px) and (min-width: 480px) { 

    header h2 {display: none;} 
    header .slogan {padding-top: 40px;} 

    nav .container .logo {margin-bottom: 20px; text-align: center;} 

    .orange p {width: 400px;} 

    form, label, input {width: 400px;} 
    input[type="submit"] {width: 402px;} 
    textarea {width: 380px;} 

    .container .one-third.column, .container .eight.columns, .container .four.columns {margin-bottom: 40px;} 
} 



@media only screen and (max-width: 767px) { 

    header {height: 310px;} 
    header h2, header .six.columns {display: none;} 
    header .slogan {padding: 30px 0;} 


    nav .container .logo {margin-bottom: 20px; text-align: center;} 

    .orange p {width: 200px;} 



    form, label, input {width: 300px;} 
    input[type="submit"] {width: 302px;} 
    textarea {width: 280px;} 

    .container .one-third.column, .container .eight.columns, .container .four.columns {margin-bottom: 40px;} 


}

источник

2014-01-04 user3157444

белый на белом .. вы видите что-то? (style = "color: #FFF" и body {background: #fff;). Вам лучше проверить свою кодировку, положение: reletive; .. никогда не будет «относительным». –

Они работают, но проблема в том, вы не можете видеть их, потому что они имеют тот же цвет в качестве фона.

Помещенный

body { 
background: #000; 
}

и вы увидите рабочие ссылки.

Проверить http://jsfiddle.net/nidzix/hagD8/6/

источник

2014-01-04 08:48:02 nidzix

Интересно, почему он работает там. Но ссылка, когда она просматривается в любом браузере, - это просто текст, который не доступен для кликов. Я не могу загрузить его, чтобы показать вам, так как у меня нет домена. В любом случае спасибо за вашу помощь – user3157444

вариант: 1 изменить тело цвет фона, кроме как белый

body 
{ 
    margin:0; 
    padding: 0; 
    font-family: "Open Sans", Arial, sans-serif; 
    background-color:Green; 
}

DEMO

ИЛИ

вариант: 2 Изменение style="color: #000"

<li><a href='index.php' title='Home' style="color: #000">Home</a></li> 
      <li><a href='about_us.php' title='About us' style="color: #000">About us</a></li> 
      <li><a href='#' title='Pricing' style="color: #000">Pricing</a></li> 
      <li><a href='#' title='Blog' style="color: #000">Blog</a></li> 
      <li><a href='#' title='Portfolio' style="color: #000">Portfolio</a></li> 
      <li><a href='#' title='Contact' style="color: #000">Contact</a></li>

DEMO

источник

2014-01-04 08:54:51

Ссылка href не может быть нажата

ответ

Смежные вопросы