文本覆盖文本并可扩展。
问题描述:
我刚刚回到Web开发,所以我正在努力再次伸展这些肌肉。我想要实现的是在垂直菜单的顶部添加一个标题,其中的缩写位于后台,并且全名位于这些缩写的中间。我可以用codepen中的代码做到这一点,但是在调整窗口大小时,它很快就会被破坏。我知道这部分是由于绝对的立场。是否有另一种方法可以实现这种效果,并且具有可扩展性,但保持在导航的范围之内?文本覆盖文本并可扩展。
http://codepen.io/anon/pen/OPPKmq
<html>
<head>
<title>Scottish Arts</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="body">
<aside>
</aside>
<nav>
<h1 id="navSA">SA<h1>
<h1 id="sa">Socttish Arts</h1>
<ul>
<li><h3></h3></li>
<li><a href=" ">Home</a></li>
<li><a href=" ">Scottish Arts</a></li>
<li><a href=" ">Bagpipes</a></li>
<li><a href=" ">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,h2,h3 {
padding: 0;
margin: 0;
}
#body {
display: flex;
height: 100%;
}
aside {
width: 25px;
height: 100%;
background: url("img/nhtar.gif");
background-repeat: repeat;
border-right: 2px #000 solid;
}
nav {
height: 100%;
width: 15%;
background-color: #7E717A;
border-right: 4px #A2969E solid;
overflow: hidden;
}
nav #navSA {
font-weight: bolder;
text-align: center;
padding: 0;
margin: 0;
font-size: 8em;
color: #A2969E;
}
nav #sa {
padding: 0;
margin: 0;
position: absolute;
top: 60px;
left: 40px;
font-size: 2em;
text-shadow: 2px 2px #7E717A;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
text-align: right;
}
nav ul li a {
display: block;
padding: 5px;
background-color: #A2969E;
text-decoration: none;
font-size: 1.5em;
font-family: "Verdana";
font-weight: bold;
color: #fff;
border-bottom: 4px #7E717A solid;
}
nav ul li a:hover {
background-color: #372E34;
}
答
给予绝对位置不具有相对的父母孩子,会设置它的有关身体位置。在CSS 添加position:relative;
到nav
,一切都会好的;)
有道理它会默认为是,谢谢! – SpaTTerManke 2014-11-23 14:38:56