Navbar Class в HTML не отображает некоторые атрибуты CSS

По некоторым причинам только атрибуты CSS, проходящие в классе nText, представляют собой встроенный дисплей и размер шрифта. Атрибуты границы, заполнение и текстовое оформление не будут реагировать на изменение. код выглядит следующим образом:Navbar Class в HTML не отображает некоторые атрибуты CSS

<!DOCTYPE html> 
<html> 
<head> 
<title>Ted's Lawn Care</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<div id="header"> 
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/> 
    <img id="headImage" src="headerImage.jpg"/></a>   
</div> 
<div id="navbar"> 
    <img id="navImage" src="navBackground.jpg"/> 
    <div id="navText"> 
     <p class="nText" id="home"><a href="index.html">Home</a></p> 
     <p class="nText" id="services"><a href="services.html">Services</a></p> 
     <p class="nText" id="rates"><a href="rates.html">Rates</a></p> 
     <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p> 
     <p class="nText" id="about"><a href="about.html">About</a></p> 
    </div> 
</div> 
</body> 
</html>

И КСС:

*{-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
     box-sizing: border-box; 

} 
#header{ 
background-color: #BDB76B; 
height: 20%; 
width: 100%; 
position: absolute; 
left: 0; top: 0; bottom: 0; right: 0; 
border-bottom: 10px; 
border-top: 0; 
border-left: 0; 
border-right: 0; 
border-color: black; 
border-style: solid; 
} 
#headText{ 
position: relative; 
float: left; 
height: 100%; 
width: 15% 
} 
#headImage{ 
position: relative; 
float: right; 
height: 100%; 
width: 85%; 
} 
#navImage{ 
background-color: #66CD00; 
width: 100%; 
height: 8%; 
position: absolute; 
top: 20%; left: 0; right: 0; 
} 
#navBar{ 
width: 100%; 
height: 8%; 
position: absolute; 
top: 20%; left: 0; right: 0; 
} 
#navText{ 
z-index: 1; 
position: absolute; 
top: 20%; left: 0; right: 0; 
text-align: center; 
} 
.nText{ 
display: inline; 
border-width: 2px; 
border-color: #9ACD32; 
border-top-left-radius: 5px; 
border-top-right-radius: 80px; 
font-size: 2em; 
padding-left: 30px; 
padding-right: 30px; 
padding-top: 10px; 
padding-bottom: 10px; 
text-decoration: none;` 
}

Спасибо за любую помощь и все.

источник

2014-11-19 Ted Mazer

Определите ваш nTextinline-block;border-style:solid и ваш текст ссылкиdisplay:inline-block; и text-decoration none;

Как нравится эта

.nText{ 
    display: inline-block; 
     vertical-align:top; 
border-style: solid; 
    } 
    .nText a{ 
     display:inline-block; 
     vertical-align:top; 
     text-decoration:none; 
    }

и исправитьid в CSS изменения этого #navBar в этом #navbar

Demo

*{-webkit-box-sizing: border-box; 
 
-moz-box-sizing: border-box; 
 
     box-sizing: border-box; 
 

 
} 
 
#header{ 
 
background-color: #BDB76B; 
 
height: 20%; 
 
width: 100%; 
 
position: absolute; 
 
left: 0; top: 0; bottom: 0; right: 0; 
 
border-bottom: 10px; 
 
border-top: 0; 
 
border-left: 0; 
 
border-right: 0; 
 
border-color: black; 
 
border-style: solid; 
 
} 
 
#headText{ 
 
position: relative; 
 
float: left; 
 
height: 100%; 
 
width: 15% 
 
} 
 
#headImage{ 
 
position: relative; 
 
float: right; 
 
height: 100%; 
 
width: 85%; 
 
} 
 
#navImage{ 
 
background-color: #66CD00; 
 
width: 100%; 
 
height: 8%; 
 
position: absolute; 
 
top: 20%; left: 0; right: 0; 
 
} 
 
#navbar{ 
 
width: 100%; 
 
height: 8%; 
 
position: absolute; 
 
top: 20%; left: 0; right: 0; 
 
} 
 
#navText{ 
 
z-index: 1; 
 
position: absolute; 
 
top: 20%; left: 0; right: 0; 
 
text-align: center; 
 
} 
 
.nText{ 
 
display: inline-block; 
 
    vertical-align:top; 
 
    border-style:solid; 
 
border-width: 2px; 
 
border-color: #9ACD32; 
 
border-top-left-radius: 5px; 
 
border-top-right-radius: 80px; 
 
font-size: 2em; 
 
padding-left: 30px; 
 
padding-right: 30px; 
 
padding-top: 10px; 
 
padding-bottom: 10px;` 
 
    
 
} 
 
.nText a{ 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    text-decoration:none; 
 
}

<div id="header"> 
 
    <a href="index.html"> <img id="headText" src="headerLeftImage.jpg"/> 
 
    <img id="headImage" src="headerImage.jpg"/></a>   
 
</div> 
 
<div id="navbar"> 
 
    <img id="navImage" src="navBackground.jpg"/> 
 
    <div id="navText"> 
 
     <p class="nText" id="home"><a href="index.html">Home</a></p> 
 
     <p class="nText" id="services"><a href="services.html">Services</a></p> 
 
     <p class="nText" id="rates"><a href="rates.html">Rates</a></p> 
 
     <p class="nText" id="contact"><a href="contact.html">Contact Us</a></p> 
 
     <p class="nText" id="about"><a href="about.html">About</a></p> 
 
    </div> 
 
</div>

источник

2014-11-19 04:54:08

Смотрите здесь для исправления http://jsfiddle.net/16qx41k2/1/

Существует опечатка.

Вы написали свой идентификатор в чехле верблюда в css. Он чувствителен к регистру. изменить

#navBar { 
... 
}

#navbar { 
... 
}

То же правило относится и к везде.

Для границы вам нужно добавить border-style: solid, если вы хотите перейти к границе. Вы можете, конечно, иметь другие стили, такие как border-style:dashed.

источник

2014-11-19 04:49:55

Все, что вам нужно сделать, это стиль границы он заменяется без границы атрибуты не работают

.nText{ 
border-style: solid; 
}

источник

2014-11-19 04:58:01

Navbar Class в HTML не отображает некоторые атрибуты CSS

ответ

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