Question

所以，我是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;

}

http://jsfiddle.net/r7K26/

我也试图把它变成一个粘性标题。不确定这是否正确。我是一个巨大的NOOB。原谅我。

Answer 1

您正在使用ID #header立即关闭div，因此下面的元素没有接收任何样式。这可能是你想要的，但是你的html结尾处有一个额外的。

你可以通过很多方式集中你的div，但以下情况应该可以正常工作：

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

祝你好运！

Answer 2

嗯，首先你不需要那么多div。看看这个，例如： 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放在一个div上你可以用选择器设置样式，例如：

.myInfo H1 {....}
.myInfo UL {..}

等

或者只是 .myLinks {}为网址，然后：列表项.myLinks li {}。

我知道这是一个快速的答案但是在你正在学习的时候，我认为“有点'给你一些指示而不仅仅是做这一切可能更好，对吧？：）

Answer 3

你非常接近，这是一个使用你的代码作为基础的解决方案。试试这个风格的JSFiddle，看看它是否需要它。请随意使用代码，并在准备好查看结果时点击“运行”按钮。 http://jsfiddle.net/TalkingRock/MAuzN/

结构：
通过使用“header_container”来包装整个标题（标题和菜单）来简化html代码。 “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
内联块用于缩小包装，居中和在单行中显示菜单项。内联块在每个项目周围有一个自然的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-block的好文章：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需要一个足够高的填充或边距，以确保它不被固定菜单覆盖。固定位置将是触摸设备，特别是手持电话的错误。在你的原始代码中，你的html中有一个额外的div，每个页面只能使用一次id，你的链接使用href，“backgound-color：transparent”（透明是默认样式）。

无法在屏幕上水平居中

3 个答案: