Возникли проблемы с горизонтальным выравниванием по экрану

Question

Итак, я супер новый для HTML/CSS. Для моего класса я должен создать портфолио для веб-сайтов.

Я хочу быть очень простым. Итак, я трогание с моим именем с центром в середине страницы, а затем под Я хочу, чтобы выглядеть следующим образом:

О студии графического дизайна Art (но, разнесен немного очевидно)

Вот мой 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; 

} 

http://jsfiddle.net/r7K26/

Я также попытался сделать его липким заголовком. Не уверен, что это так. IM A HUGE NOOB. Прости меня.

Answer 1

Вы немедленно закрываете свой div с id #header, поэтому элементы под ним не получают никакого стиля. Это может быть то, что вы хотите, но тогда у вас есть дополнительный файл в конце вашего html.

Вы можете центрировать ваш ДИВ много способов, но должно работать нормально:

#indexheader {display:block;width:100%;text-align:center;} 

Удачи!

Answer 2

Ну, вам не нужно, чтобы многие девы были в первую очередь. Посмотрите на это, например: 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 {} для элементов списка.

Я знаю, что это быстрый ответ, но по мере того, как вы учитесь, я думаю, что было бы лучше, чтобы «вроде» дал вам несколько указателей вместо того, чтобы делать все это, не так ли? :)

Answer 3

Вы очень близки, и вот одно решение, использующее ваш код в качестве базы. Попробуйте этот стилизованный 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-property-a-comprehensive-look/

Примечания: DIV, который держит ваше содержание нуждается верхний отступ или марж достаточно высокие, чтобы убедиться, что она не прикрыта фиксированным меню. Фиксированная позиция будет неисправной в сенсорных устройствах, особенно портативных телефонах. В вашем исходном коде есть дополнительный div в вашем html, id можно использовать только один раз на странице, использовать href для ваших ссылок, а «backgound-color: transparent» (прозрачный стиль по умолчанию).