Css 链接浮动通过标题栏？_Css_Header_Hyperlink_Floating

Css 链接浮动通过标题栏？

css hyperlink

Css 链接浮动通过标题栏？,css,header,hyperlink,floating,Css,Header,Hyperlink,Floating,演示：我对CSS非常陌生，所以我可能在这里使用了错误的代码。我试图有一个网站，可以调整到任何屏幕大小，但同时，我希望我的链接，投资组合和联系人，是永久性的，所以它将停留在标题栏，而不是浮动到左边或右边超出它。我怎样才能解决这个问题谢谢你的帮助！：D test.html <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Mindtale T

演示：

我对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>

我为你做了一个小提琴，我已经重建了你的HTML和CSS，你可以看到它工作（无法抗拒）

你会发现代码要少得多

我将给出的主要提示是，您最好在样式中更多地使用级联。因此CSS=层叠样式表。这是高效前端编码的关键。也多嵌套HTML:-）（然后需要更少的样式）

div id=“headerlogo”>
随机标题
内容占位符
...

请发布一些您的html和css，这样我们可以帮助您更新。对不起！谢谢我真的很感谢你的帮助！我在Safarii中尝试重建版本，背景不再显示，但在Chrome中效果很好。有没有关于Safarii修复的想法？还有，有没有办法让徽标降低约20px？重新定位徽标有两种方法；对于边距或定位，使用“顶部”，即标题img{top:20px；position:relative；}至于safari背景图像问题，sytax对于背景是错误的。现在更正：

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

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>