HTML-ссылка работает неправильно и отображается невидимым - PullRequest
Новая
       16

HTML-ссылка работает неправильно и отображается невидимым

0 голосов
/ 09 февраля 2012

Я пытаюсь добавить простую HTML-ссылку в мой код, но она не отображается. Ссылки для панели навигации отображаются очень хорошо, однако обычные ссылки отображаются только как невидимые, то есть я могу видеть их только при наведении на них курсора, и ничего не происходит. Я полагаю, что это может быть проблема с стилями CSS, которые я создал, но я перебрал код и не могу найти ничего неправильного. 

/*STYLE FORMATTING FOR THE NAVIGATION BAR*/
.nav ul
{
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
background-color:#6b234b;
width:1000px;
}
.nav li
{
display: inline-block;
}
.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#FFFFFF;
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}
.nav a:hover,a:active
{
background-color:#a03771;
}

/*STYLE FORMATTING FOR REGULAR LINKS*/
.links a:link
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:visited
{
text-decoration:none;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;
}

.links a:active
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}

.links a:hover
{
text-decoration:underline;
font-size:0.5em;
text-align:right;
font-family:"hanzo";
color:#000000;}

Это HTML-ссылка, которую я пытаюсь реализовать с сопровождающим HTML. 

<table style="float:left;">
<tr>
<td style="vertical-align:top;">
<table style="padding-left:40px; max-width:530px;">

<!--BEGIN ENTRY-->
    <tr>
    <td>
        <p class="newsinfotitle">Info</p>       
    </td>
    </tr>
    <tr>
    <td>
        <img class="right" src="easterisland.jpg"/>
        <p class="newsinfo">Info</p>
        <a class="links" href="#">See More</a>
    </td>
    </tr>

    <tr>
    <td>
        <hr/>
    </td>
    </tr>
<!--END ENTRY-->

Ответы [ 3 ]

0 голосов
/ 09 февраля 2012

Просто попробуйте это 

<style type="text/css">
.nav ul {
list-style-type:none;
padding:0;
margin:0;
}
.nav li {
display: inline-block;
}
.nav a:link,a:visited {
display:block;
width:188.51px;
font-size:12px;
letter-spacing:3px;
font-family:"ostrich";
color:#cccccc;
text-align:center;
text-decoration:none;
}
.links a:link {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
a.links {
  color: #F00;
  font-size: 12px;
}
.links a:visited {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
.links a:active {
text-decoration:underline;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
a.links:hover {
text-decoration:none;
font-size:12px;
text-align:right;
font-family:"hanzo";
color:#000000;
}
  </style>

Надеюсь, это поможет вам. У вас есть одна ошибка. Вы использовали .links a:hover, которая должна быть a.links:hover. Надеюсь, это поможет вам. Просто сохраняйте чистоту CSS и разметки после этого, вы можете делать добро.

0 голосов
/ 09 февраля 2012

Попробуйте это .. и если вы хотите изменить цвет bg на активный, просто измените там .. 

.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#666;enter code here
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}
.nav a:hover,a:active
{
background-color:#6b234b;
}
0 голосов
/ 09 февраля 2012

Просто отметьте эту часть в своем CSS 

.nav a:link,a:visited
{
display:block;
width:188.51px;
font-size:1.20em;
letter-spacing:3px;
font-family:"ostrich";
color:#FFFFFF;
background-color:#6b234b;
text-align:center;
padding:4px;
text-decoration:none;
}

Вы указали цвет ссылки #FFFFFF при посещении. Поэтому, когда вы посещаете ссылку, она меняет текст ссылки на белый, а цвет фона белый, поэтому текст не виден. Просто поменяйте цвет там, и вы получите хороший результат. Если возникнут сомнения, дайте мне знать.

...