文本覆盖文本并可扩展。

我刚刚回到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; 
}

来源

2014-11-23 SpaTTerManke

给予绝对位置不具有相对的父母孩子，会设置它的有关身体位置。在CSS 添加position:relative;到nav，一切都会好的;）

http://codepen.io/anon/pen/LEEwOd

来源

2014-11-23 13:50:19 tsepehr

有道理它会默认为是，谢谢！ – SpaTTerManke 2014-11-23 14:38:56

文本覆盖文本并可扩展。

回答

相关问题