CSS Header Image «Stacked»

Question

У меня возникла проблема с моим сайтом в течение некоторого времени, поэтому я работал над заголовком, используя картинки, все это и хорошо, он меняет фотографии, когда я наводил на него курсор, а затем после окончания поставив «Home» «Новости» «Вход», «Регистрация» и «Контакт», я заметил, что вместо того, чтобы все рядом с Афоризм это, все это складывает, как это:

The кодирования CSS: #menubar { ширина: 50%; margin: 0 auto 0 auto; }

.home { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 0 0; 
} 
.home:hover { 
    background-position: 0 100; 
} 
/***************************************************/ 
.news { 
display: block; 
    width: 240px; 
height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: -240 top; 
} 
.news:hover { 
    background-position: -240 bottom; 
} 
/***************************************************/ 
.register { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 480 top ; 
} 
.register:hover { 
    background-position: 480 bottom; 
} 

/***************************************************/ 
.play { /*login*/ 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 720 top; 
} 
.play:hover { 
    background-position: 720 bottom; 
} 

/***************************************************/ 
.contact { 
    display: block; 
    width: 240px; 
    height: 100px; 
    background: url('IMG/Heading_Normal_and_Hover.png'); 
    background-position: 240 top ; 
} 
.contact:hover { 
    background-position: 240 bottom; 
} 

/***************************************************/ 

The HTML coding

Answer 1

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

Существует множество возможных способов достижения того, чего вы хотели бы достичь. Вот два из них:

1. Плавающие элементы рядом друг с другом

Вы можете плавать элементы, применяя следующий атрибут в определениях CSS:

float: left; 

left В то время как может также должны быть right или none.

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

Попробуйте добавить float: left ко всем вашим определениям CSS (.news, .register и т. Д.).

Более чистый путь будет создать класс CSS:

.floatLeft { 
    float: left; 
} 

И применять класс для всех затронутых элементов:

<a class="floatLeft" href=""></a> 

Однако, так как вы используете <a> элементы, вы могут потребовать их блокировки, поэтому применение:

.floatLeft { 
    float: left; 
    display: block; 
} 

ca n быть полезным.

Обычно я предлагаю вам использовать элемент <ul> для вашего контейнера меню и элемент <li> для ваших кнопок меню. Вы можете использовать <a> элементов в своих тегах <li>.

Обратите внимание, что ваш родительский контейнер должен допускать достаточную ширину для отображения дочерних элементов рядом друг с другом, или перемещенные элементы будут перенесены в следующую строку.

Learn about floats here.

2.Использование inline-block

Вы можете использовать:

дисплей: встроенный блок

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

Если вы используете этот подход, иметь в виду, что вам может понадобиться установить:

white-space: nowrap 

На контейнере меню.

Вы также можете столкнуться с вертикальными проблем выравнивания - в этом случае использование:

vertical-align: top 

на каждом элементе (top или middle или bottom, в зависимости от того, что вам нужно).

Дополнительная информация

You can learn about the above two methods by following this link