Итак, я супер новичок в HTML/CSS. Для моего класса я должен создать портфолио для веб-сайтов.
Я хочу быть очень простым. Итак, я начинаю с моего имени, сосредоточенного в середине страницы, а затем под ним хочу, чтобы это выглядело так:
О студии дизайна графического дизайна (но, конечно, немного отличается)
Вот мой html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Вот мой CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
Я также попытался сделать его липким заголовком. Не уверен, что это так. IM A HUGE NOOB. Прости меня.
Вы очень близки, и вот одно решение, использующее ваш код в качестве базы. Попробуйте этот стилизованный JSFiddle и посмотрите, что вам нужно. Не стесняйтесь играть с кодом и нажмите кнопку "Выполнить", когда будете готовы видеть результаты. http://jsfiddle.net/TalkingRock/MAuzN/
Структура:
Код html упрощается с помощью "header_container" для обертывания всего заголовка (название и меню). "Indexheader" помещается в собственный div. Новое меню div теперь содержит/обертывает только пункты меню.
<div id="header_container">
<div id="indexheader"><a href="#">THIS IS MY NAME</a></div>
<div id="menu">
<div class="links"><a href="#">About</a></div>
<div class="links"><a href="#">Graphic Design</a></div>
<div class="links"><a href="#">Studio Art</a></div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
CSS
Встроенный блок используется для сжатия обертки, центра и отображения элементов меню в одной строке. Inline-блок имеет естественный 4px-маржи вокруг каждого элемента, и его можно удалить, удалив пустое пространство между каждым элементом встроенного блока в html-коде. Вам также нужно добавить "vertical-align: top". Встроенный блок - это хороший стиль для изучения, имеет хорошую поддержку браузера и пригодится.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Хорошая статья о lnline-блоке: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Поддержка встроенных блоков: http://caniuse.com/#feat=inline-block
Вот несколько других статей, которые вы найдете полезными. CSS Исправлено меню: http://www.w3.org/Style/Examples/007/menus.en.html Индекс Z: http://coding.smashingmagazine.com/2009/09/15/the-z-index -css-свойство-а-всесторонний-взгляд/
Примечание. В div, который содержит ваше содержимое, требуется верхнее дополнение или край, достаточный для того, чтобы убедиться, что оно не закрыто фиксированным меню. Фиксированная позиция будет неисправной в сенсорных устройствах, особенно портативных телефонах. В вашем исходном коде есть дополнительный div в вашем html, идентификатор может использоваться только один раз на странице, использовать href для ваших ссылок, а "backgound-color: transparent" (прозрачный - стиль по умолчанию).
Вы немедленно закрываете свой div с id #header, поэтому элементы под ним не получают никакого стиля. Это может быть то, что вы хотите, но тогда у вас есть дополнительный файл в конце вашего html.
Вы можете сосредоточить свой div по-разному, но следующее должно работать нормально:
#indexheader {display:block;width:100%;text-align:center;}
Удачи!
Ну, в первую очередь вам не нужно, чтобы это было много. Посмотрите на это, например: Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li><a href="..">link</a></li>
<li><a href="..">link</a></li>
<li><a href="..">link</a></li>
</ul>
</div>
И на самом деле, вам даже не нужен div в этом случае, но независимо от того, имея класс на одном div, вы можете стилизовать с помощью селекторов, таких как:
.myInfo H1 {....}
.myInfo UL {..}
и т.д
или просто .myLinks {}
для URL- .myLinks li {}
а затем: .myLinks li {}
для элементов списка.
Я знаю, что это быстрый ответ, но по мере того, как вы учитесь, я думаю, что было бы лучше "вроде" дать вам несколько указателей вместо того, чтобы делать все это, не так ли? :)