Отступы и поля CSS не работают

Question

У меня проблема со следующим кодом. Я не могу разместить логотип (x12creatiΩns) сверху вниз. Я пробовал top:10px, как указано выше, но это ничего не дает.

HTML

<div id='header'>
<span id='logo'>
    <a href="index.php" id="logo" class="menu" rel="menu">x12creati&Omega;ns</a>
</span>
<span id='sublogo'>Just another portfolio...</span>
</div>`

CSS

span#logo {
font-size:2.2em;
color: black;
padding-left:10px;
text-shadow:0px 1px 0px white;
top:10px;
}

a#logo {
text-decoration: none;
color: black;
}

a#logo:hover {
padding-top:10px;
text-decoration: none;
color: #555;
}

div#header {
background-color:#DDD;
width:100%;
height:44px;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#CCC; 
}

css

0

Jack Wilsdon 22 Дек 2011 в 22:37

Вместо идентификаторов лучше использовать классы. Используйте идентификаторы только в том случае, если вы собираетесь использовать Javascript для этого конкретного div. Для вашей проблемы вы также можете поместить логотип в div, задать ему определенную ширину и высоту и изменить поле.

–

45808

22 Дек 2011 в 22:42

2

@45808: Хотя ваш комментарий не является неправильным, он определенно слишком общий и, возможно, вводит в заблуждение. Есть причины использовать id вместо class, которые не имеют ничего общего с удобством getElementById (при условии, что это то, на что вы намекали).

–

Wesley Murch

22 Дек 2011 в 23:05

@ 45808: Отказывается от использования селекторов идентификаторов в CSS, не так ли?

–

BoltClock

22 Дек 2011 в 23:10

Answer 1

Попробуйте снять a

Как это

#logo:hover{}

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

#logo a:hover{}

2

Sean H Jenkins 22 Дек 2011 в 22:40

Answer 2

Добавьте display: inline-block в свой a#logo - http://jsfiddle.net/tmaHx/1/ - и тогда вы можете использовать поля/отступы

a#logo {
    text-decoration: none;
    color: black;
    display: inline-block;
    margin-top: 20px
}

1

Zoltan Toth 22 Дек 2011 в 22:41

Answer 3

Добавьте display:inline-block в объявление span#logo и просто добавьте немного верхнего поля, и это должно сработать. Кроме того, вы дважды повторяете свой идентификатор «логотипа»; Один раз в теге span и снова в теге логотипа a, это не пройдет проверку.

1

Andres Ilich 22 Дек 2011 в 22:51

Answer 4

Поскольку a является встроенным элементом, вы должны добавить display:block;, тогда вы можете добавить поля и отступы!

0

mas-designs 22 Дек 2011 в 22:39

1

Неправильно: встроенные элементы могут иметь отступы, и здесь не применяются поля.

–

BoltClock

22 Дек 2011 в 22:40

Конечно, встроенные элементы могут иметь отступы, но от этого они не будут занимать больше места. Если нет фона или границы, это невозможно заметить. Если вы планировали использовать заполнение для смещения воспринимаемой позиции встроенного элемента, это не сработает.

–

Wesley Murch

22 Дек 2011 в 23:12

Отступы и поля CSS не работают

HTML

CSS

4 ответа

Похожие вопросы

Новые вопросы

css