- 13, May 2024
- #1
Привет, ребята,
У меня другая проблема.
Я делал это уже сотый раз, но на этот раз это просто не сработало.
В моем мозгу ничего не было, я не трогал HTML как минимум 6 месяцев. Посмотрите на картинку и посмотрите на мой код.
Можете ли вы указать, что с ним не так? HTML:
Но обо всем по порядку: мне нужно, чтобы все работало с CSS.
Он должен располагаться поверх . Спасибо,
Я делал это уже сотый раз, но на этот раз это просто не сработало.
В моем мозгу ничего не было, я не трогал HTML как минимум 6 месяцев. Посмотрите на картинку и посмотрите на мой код.
Можете ли вы указать, что с ним не так? HTML:
.wrapper {
overflow: hidden;
max-width: 100%;
padding: 0 0.6em;
margin: 0 auto;
}
h1 {
float: left;
padding: 0.2em 1.5em 0.3em 0;
font: bold helvetica, sans-serif;
}
h1 a {
text-decoration: none;
color: #FFF;
}
.nav {
float: right;
text-align: right;
padding-top: 0.6em;
}
.nav li { display: inline; margin-left: 0.3em; }
.nav li:first-child { margin-left: 0; position: relative; }
#searchbox {
position: absolute;
z-index: 9;
top: 1.5em;
right: 0;
background: red;
padding: 0.6em;
box-shadow: 0 0 0.2em #888;
}
section {
position: relative;
background: #FFF;
}
Код (разметка): CSS:
<header><div class=wrapper> <h1> <a href='index.php'>My Awesome Website</a> </h1> <ul class=nav> <li> <a href="#"><img id=search src="images/search.svg" /></a> <div id=searchbox> <form method=post action="#"> <input type=text name=search /> <input type=submit class=search_button value='search' /> </form> </div> </li> <li><a href="#"><img id=login src="images/enter.svg" /></a></li> </ul> </div></header> <!-- wrapper & header --> <section><div class=wrapper> </div></section> <!-- wrapper & section -->
Код (разметка): я бы скрыл модальное окно и вызвал его с помощью события onclick в JavaScript.
Но обо всем по порядку: мне нужно, чтобы все работало с CSS.
Он должен располагаться поверх . Спасибо,