Question

演示：http://www.mindtale.com/test.html

我对CSS很陌生，所以我可能在这里使用了错误的代码。我想要一个网站，而不是可以调整大小到任何屏幕尺寸但同时，我希望我拥有的链接，投资组合和联系人永久放置，以便它将保留在标题栏上而不是浮动到左侧或就在它之外。我怎么能解决这个问题？

感谢您的帮助！：D

的test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Mindtale Test Home</title>
</head>

<body>




<!-- Header -->

<div id="headerlogo">
<a href="index.html"><img src="images/logo.png"></a></div>

<div id="headerfill"></div>
<div id="header"></div>

<div id="headerlink1">

<a href="portfolio.html">Portfolio</a>
</div>

<div id="headerlink2">
<a href="contact.html">Contact</a>
</div>


<!-- Content -->
<div id="content">
<h2>A random heading</h2>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>

<h2>A random heading</h2>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
<p>Content Placeholder ... </p>
</div>

<!-- Footer -->

<div id="footer">
Mindtale &copy; 2013
</div>

</body>
</html>

的style.css

html { 
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
background: url(images/bg.jpg) no-repeat center center fixed; /* add background image */
-webkit-background-size: cover; /* fix height for other browsers */
-moz-background-size: cover; /* fix height for other browsers */
-o-background-size: cover; /* fix height for other browsers */
background-size: cover; /* fix height for other browsers */
}

/* Header */
/* -------------------------------------------------- */



div#header {
z-index:3;
position:fixed;
background: url(images/header.png) no-repeat center;
height: 102px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerfill {
z-index:4;
position:fixed;
background: url(images/headerfill.png) repeat-x;
height: 98px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}

div#headerlink1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:18%;
color:#999;
padding: 0px;
}

div#headerlink2 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:90%;
z-index:4;
position:fixed;
top:55px;
left:78%;
color:#999;
padding: 0px;
}

div#headerlogo {
z-index:5;
position:fixed;
top:30px;
left:42%;
color:#999;
padding: 0px;
}

/* Content */
/* -------------------------------------------------- */

div#content {
position:fixed;
width:100%;
color:#222;
top: 70px; 
bottom: 0; 
left: 0; 
right: 0;
padding: 25px;
overflow: auto;



font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}


/* Footer */
/* -------------------------------------------------- */

div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#999;
background:#333;
padding: 8px;
}
    enter code here

Answer 1

我为你做了一个小提琴，我重建了你的HTML和CSS，你可以看到它工作（无法抗拒）。 http://jsfiddle.net/David_Knowles/2y7U5/1/

你会看到代码少得多。

我将给出的主要指针是你在你的风格中更多地使用Cascade是明智的。因此CSS =层叠样式表。这是高效前端编码的关键。更加嵌套你的HTML :-)（然后需要更少的样式）。

div id="headerlogo">
    <div id="headerfill">
        <div id="header">
            <a href="portfolio.html" id="headerlink1" >Portfolio</a>
            <a href="index.html"> <img src="http://www.mindtale.com/images/logo.png" alt="Mindtale"> </a>
            <a href="contact.html" id="headerlink2" >Contact</a>
        </div>
    </div>
</div>

<!-- Content -->
<div id="content">
   <h2>A random heading</h2>
   <p>Content Placeholder ... </p>
    ...
</div>

CSS：链接浮动过标题栏？

1 个答案: