Как лучше упорядочить мой CSS, чтобы отдельные теги не получали одинаковый стиль?

Question

Вот как мой index.php должен look (codepen link)

Я пытаюсь добавить функции javascript к кнопкам справа. Однако есть проблема с дизайном, которая путает кнопки. Это то, что happened.

Как вы можете видеть, кнопка входа в систему взяла стиль тегов для нижнего колонтитула.

Я мало знаю о javascript и получил код из учебника, который я нашел. Я бы предпочел не изменять javascript. Я уверен, что мне, вероятно, нужно лучше организовать html или css. Если у кого-нибудь есть какие-то советы, я был бы очень признателен. Я застрял на этом два дня.

Единственный способ, которым я был в состоянии переместить кнопку была укладка его в кнопку HTML

например:

<a id="loginbutton" href="javascript:toggle();" style="top: 220px;">log in</a> Мне не нравится это решение, потому что я собираюсь хотеть сделать веб-страницу отзывчивый. Мне нужно иметь возможность создавать медиа-запросы в таблице стилей.

РЕЗЮМЕ:

1. Когда я добавил Javacript, стайлинг для ссылок сноски тегов (тег) портит мою кнопку стиль.
2. Это должно быть написано в файле css, а не в html.

Answer 1

Оставьте HTML и CSS, как в вашем примере под названием 'рабочий'. Вам не нужно добавлять тег, чтобы сделать работу javascript. Вы также можете использовать событие onclick. Просто измените код кнопки:

<button class="login" onclick="javascript:toggle();">log in </button> 

Подробнее о событии OnClick здесь http://www.w3schools.com/jsref/event_onclick.asp

Answer 2

Вы можете работать с комбинированными классами css или иерархией.

E.g.

Combined Тэги:

.my-tag { 
    color: red; 
} 

.my-tag.footer { 
    color: blue; 
} 

Иерархия:

.my-tag { 
    color: red; 
} 

.footer .my-tag { 
    color: blue; 
}