#html #css
#HTML #css
Вопрос:
Вот мои css и html
#header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-image: url('/public/images/header.png');
background-repeat: repeat-x;
}
#nav {
background: transparent;
height: 2.5em;
left: -25px;
list-style: none;
margin: 1em 0 1em;
min-width: 100%;
min-height: 100%;
overflow: hidden;
padding: 60px 0 30px 0;
}
#nav a {
color: white;
display: block;
float: left;
height: 2.5em;
padding-left: 30px;
text-decoration: none;
padding-right: 30px;
text-shadow: 0.1em 0.1em #333;
}
#nav a:hover {
text-shadow: 0.1em 0.1em white;
background-color: white;
color: darkred;
padding-bottom: 5px;
text-shadow: 0.1em 0.1em lightgray;
}
#nav a:hover.active, #nav a.active {
background-color: white;
background-position: 0 -60px;
color: darkred;
text-shadow: 0.1em 0.1em lightgray;
padding-bottom: 5px;
}
#nav li {
float: left;
margin: 0 8px 0 0;
/* Spacing between tabs */;
}
#nav span {
cursor: pointer;
display: block;
float: left;
line-height: 1.5em;
padding: .5em 5px 0 0;
}
<div id="header">
<div id="navigation">
<ol id="nav">
<li><a id="overview" href="/overview"><span>Overview</span></a></li>
<li><a id="analysis" href="/overview" class="active"><span>Analysis</span></a></li>
<li><a id="dashboard" href="/dashboard"><span>My Dashboard</span></a></li>
<li><a id="preferences" href="/overview"><span>Preferences</span></a></li>
<li><a id="contact" href="/overview"><span>Contact</span></a></li>
<li><a id="logout" href="/overview"><span>Sign In</span></a></li>
</ol>
</div>
</div>
На моем экране это выглядит нормально, но если я начну изменять размер окна, это заставит вкладки перемещаться и переходить к следующей строке. Я обнаружил, что на других сайтах с вкладками это не так. Что я здесь делаю не так? Спасибо.
Ответ №1:
Эти «другие сайты», вероятно, <div id="header">
содержатся в другом элементе, таком как <div id="container">
, с явно заданной шириной с помощью CSS, например width: 960px
:
Смотрите: http://jsfiddle.net/mBJQN /
<div id="container">
YOUR HTML HERE
</div>
#container {
width: 960px;
position: relative
}
Я добавил position: relative
, чтобы position: absolute
вкл #header
было относительно #container
(смотрите здесь).
Здесь есть другой вариант, но, вероятно, это не тот, который вам нужен.
Вы можете добавить white-space: nowrap
в #header
и изменить с float
s на display: inline-block
. Если это тот вариант, который вам нужен, дайте мне знать, потому что над ним нужно еще немного поработать.
Комментарии:
1. Привет, чувак. Спасибо за помощь. Это определенно предотвращает переход вкладок на следующую строку, но не позволяет изображению моего заголовка распространяться по экрану. Я попробовал несколько изменений, но я предполагаю, что, поскольку я указываю размер контейнера, я не могу увеличить изображение заголовка? Спасибо за любую помощь.
2. Редактировать: На самом деле мне жаль. Я поместил навигацию в контейнер вместо заголовка. Казалось, это устранило проблему. Спасибо за вашу помощь.