Текст, лежащий над текстом, и быть масштабируемым.

Я просто возвращаюсь в веб-разработку, и поэтому я работаю над растяжением этих мышц. То, что я хотел достичь, - это заголовок поверх моего вертикального меню с инициалами в фоновом режиме и полное имя в середине этих инициалов. Я смог сделать это с помощью кода в кодефене, однако он быстро разбивается при изменении размера окна. Я знаю, что отчасти это связано с абсолютной позицией. Есть ли другой способ достижения этого эффекта и его масштабируемость, но оставайтесь внутри линий навигации?Текст, лежащий над текстом, и быть масштабируемым.

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

Предоставление абсолютной позиции к ребенку, который не имеет относительный родителю, будет установлено, что это положение в отношении к телу. добавить position:relative; к nav в CSS, и все будет в порядке;)

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

источник

2014-11-23 13:50:19 tsepehr

имеет смысл это будет по умолчанию к этому, спасибо! – SpaTTerManke

Текст, лежащий над текстом, и быть масштабируемым.

ответ

Смежные вопросы