Изображение в nav не изменится

Question

Изображение в nav не изменится

0

Я новичок в html, и у меня проблема с изменением размера изображения. Я использую html5 и css3. Я хочу разместить логотип в правой части навигационной панели, но каждый раз, когда я изменяю его размер, он остается прежним.

nav ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  background-color: rgb(211, 11, 11);
}

nav ul li {
  display: inline;
}

.navlink:link, .navlink:visited {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgb(211, 11, 11);
  text-align: center;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.navlink:hover, .navlink:active {
  background-color: rgb(162, 2, 2);
}

.navlink:first-letter {
  font-size: 250% ;
}
nav {
  position:fixed;
  top: 0;
  margin:auto;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgb(211, 11, 11);
  opacity: 0.8;
  border-bottom: white thin solid;
  z-index: 1000;
  clear: both;
}

#ucc_logo{
  float:right;
  height: 5px;
  width: auto;
}

<nav id="navbar">
  <ul>
    <a href="index.html" class="navlink"><li>Base</li></a>
    <a href="output.html" class="navlink"><li>Output</li></a>
    <a href="obscure.html" class="navlink"><li>Obscure</li></a>
    <a href="logic.html" class="navlink"><li>Logic</li></a>
    <a href="extras.html" class="navlink"><li>Extras</li></a>
  </ul>
  <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a>
</nav>

PFOD1998 02 март 2015, в 20:15

Источник

Теги:

html

css

html5

css3

2 ответа

0

Вы определяли неправильный элемент. Если вы хотите, чтобы соотношение сторон было правильным для изображения, вам нужно применить к нему css.

Кроме того, поскольку привязанный тег и изображение следуют за UL, поплавок направляет его на следующую строку, а не удерживает его на первой строке, как я предполагал, вы хотели (может быть, неправильно, возможно, вы хотели это на следующей строке).

nav ul {
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  background-color: rgb(211, 11, 11);
}

nav ul li {
  display: inline;
}

.navlink:link, .navlink:visited {
  display: inline-block;
  width: 120px;
  font-weight: bold;
  color: rgb(255,255,255);
  background-color: rgb(211, 11, 11);
  text-align: center;
  padding: 5px;
  text-decoration: none;
  text-transform: uppercase;
}

.navlink:hover, .navlink:active {
  background-color: rgb(162, 2, 2);
}

.navlink:first-letter {
  font-size: 250% ;
}
nav {
  position:fixed;
  top: 0;
  margin:auto;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgb(211, 11, 11);
  opacity: 0.8;
  border-bottom: white thin solid;
  z-index: 1000;
  clear: both;
}

#ucc_logo{
  float:right;
}
#ucc_logo img {
  height: 5px;
  width: auto;
}

<nav id="navbar">
  <a id="ucc_logo" href="http://www.ucc.ie/en/"><img src="http://i.imgur.com/ISnWKPd.jpg" alt="UCC Logo"></a>
  <ul>
    <a href="index.html" class="navlink"><li>Base</li></a>
    <a href="output.html" class="navlink"><li>Output</li></a>
    <a href="obscure.html" class="navlink"><li>Obscure</li></a>
    <a href="logic.html" class="navlink"><li>Logic</li></a>
    <a href="extras.html" class="navlink"><li>Extras</li></a>
  </ul>

</nav>

Robert McKee 02 март 2015, в 16:54

Ещё вопросы

naman kalkhuria · Accepted Answer · 2015-03-02T17-16-00.000Z

вы используете высоту и С#ucc_logo, которые не изменят размер изображения.

Вам нужно будет применить css к самому изображению.

вы делаете

#ucc_logo img {
  width: 100%;
  height: 100%;
}

это сделает высоту и ширину изображения равными родительскому элементу

Ааа, спасибо большое, я так много сконцентрировался на выяснении, почему высота / ширина не работала, я пропустил очевидную ошибку