Странная ошибка при попытке позиционирования элемента <a>

По сути, у меня есть div с несколькими элементами привязки, которые нужно разместить в виде меню навигации.

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

Я все равно поставлю

HTML

<div id="navBar"><a id="home" href="Home.html">Home</a>
         <a id="a" href="#">a</a>
         <a id="b" href="#">b</a>
         <a id="c" href="#">c</a>
         <a id="d" href="#">d</a>
         <a id="e" href="#">e</a>
         <a id="f" href="#">f</a>
</div>

CSS

#home { position: absolute; top: 10px; left: 160px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration:none;}
#a {position: absolute; top: 10px; left: 350px; font-size: 18px; font-family: "century gothic", 
sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#b { position: absolute; top: 10px; left: 500px; font-size: 18px; font-family: "century gothic",
sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#c { position: absolute; top: 10px; left: 650px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#d { position: absolute; top: 10px; left: 800px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#e { position: absolute; top: 10px; left: 950px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}
#f { position: absolute; top: 10px; left: 1100px; font-size: 18px; font-family: "century gothic", sans-serif; font style: normal; color: #2F4F4F; text-decoration: none;}

Все выглядит довольно просто, но по какой-то причине <a> элемент просто не будет двигаться вообще, это должно быть что-то вроде, но я понятия не имею, как это исправить.

Источник

2 ответа

Решение

Это была самая простая вещь, у меня был другой элемент с тем же именем в таблице стилей CSS.

ВСЕГДА ПРОВЕРЯЙТЕ МАЛЕНЬКИЙ ПЕРСОНАЛ.

Источник

Вы не используете положение на элементах привязки, если не делаете что-то дико неортодоксальное. Вы просто не понимаете уровень CSS 1. Вы должны применить float к div элементы... которых у вас нет.

Во-вторых, у тебя нет ребенка div элементы, это связано с доступностью. Добавьте их, вставьте в них элементы привязки и поплавки div элементы с width как так...

В-третьих, вы применяете довольно много места для каждого элемента меню, и из главного меню становится ясно, что вы хотите, чтобы это было текстовое меню.

Наконец, если вы собираетесь использовать id для меню вы также можете использовать nav как это соотносится с (X)HTML5 nav элемент.

CSS

#nav > div {float: left; width: 200px;}
#nav > div > a {display: block;}

(X) HTML

<div id="nav">
<div><a id="a" href="#">a</a></div>
<div><a id="b" href="#">b</a></div>
<div><a id="c" href="#">c</a></div>
<div><a id="d" href="#">d</a></div>
<div><a id="e" href="#">e</a></div>
<div><a id="f" href="#">f</a></div>
</div>

PS Если вы не разъясняете кому-то разницу между XHTML и HTML, то у вас нет никаких оснований использовать терминологический "тег", они называются элементами. Использование правильной терминологии повысит эффективность вашего общения и поможет лучше понять, как люди воспринимают ваши навыки.

Источник
Другие вопросы по тегам