固定标题随窗口大小移动

对不起，如果这是一个以前已经回答的问题，但我一直在寻找，我找不到合适的解决方案。我试图让我的固定标题与内容保持一致，但似乎无法让它留在那里。每当窗口调整大小时，标题向左或向右移动。我现在设置的方式是我发现让头部与内容保持内联的唯一方式。否则，它会挂在页面的左侧。固定标题随窗口大小移动

理想情况下，我只想让标题稍微大于内容的其余部分，并且与窗口大小保持一致，主要是因为徽标挂起。直播网站是在这里： andrewillustration.com

下面是代码：

CSS

body{ 
background-attachment: fixed; 
margin: 0px; 
font: 400 16px/22px 'PT Sans Narrow', sans-serif; 
color: #099; 
background-color: #B4BFCD; 
background-image: url(images/noisy_grid.png); 
} 
h1{font: 400 58px/60px 'Open Sans Condensed', sans-serif; color:#F05522; margin-left:65px;} 
h2{ 
font: 400 18px/22px 'Open Sans Condensed', sans-serif; 
color: #069; 
} 
h3{font: 400 14px/16px 'Open Sans Condensed', sans-serif; color:#6a6969;} 
ul{margin:0px; padding:0px;} 
a { 
text-decoration: none; 
color: #FFF; 
} 
a:hover {color:#099;} 
a img{border:0px;} 

#container{ 
width: 950px; 
margin: 0px auto 300px auto; 
Background:url(images/torn_paper_background.png)   repeat-y; 
overflow: auto; 
padding-bottom: 100px; 
} 

/****************************************************/ 
/* HEADER */ 
/****************************************************/ 

#header{ 
background-color: #F05522; 
width:712px; 
height: 115px; 
padding: 0px 43px; 
position: fixed; 
top: 0px; 
left:62%; 
margin: 0 auto 0 -475px; 
} 
#header #logo{ 
position: absolute; 
float:left; 
left: -157px; 
} 
#header #main-menu{float:right; padding-top:45px;} 
#header #main-menu li{ 
float:left; 
list-style:none; 
margin-left:27px; 
font: 400 16px/20px 'Open Sans Condensed', sans-serif; 
color: #FFF; 
}

HTML

<div id="header"> 
<div id="logo"><img src="images/logo-corners.png"></div> 
<ul id="main-menu"> 
    <li><a href="#work">Portfolio</a></li> 
    <li><a href="#about">About</a></li> 
    <!--<li><a href="#experience">Experience</a></li> --> 
    <li><a href="#connect">Contact</a></li> 
    </ul> 
</div>

来源

2013-03-26 mumblyjoe

我愿意做这将是添加的方式头部周围的固定位置包装（宽度为100％）。然后，您可以将头部固定宽度以匹配您的内容，并为其设置一个边距0 auto以使其居中。将徽标浮动到左侧，然后将背景颜色应用到菜单ul（浮动右侧），根据需要设置边距和填充，以便占用剩余的可用空间。尽管如此，您需要为最顶层的内容div添加一些填充以阻止其被菜单隐藏。

来源

2013-03-26 15:34:53 MassivePenguin

非常感谢！我结束了解决方案的组合，并简单地将容器与身体和其余部分粘在一起。 – mumblyjoe 2013-03-27 01:25:21

固定标题随窗口大小移动

回答

相关问题