Панель для текста и авторазмер логотипа

109
31 октября 2019, 19:00

Как сделать такую штучку, чтоб наполовину над слайдером сидела,а дальше в контент уходила: и еще авторазмер логотипа вместе со всем сайтом, как сделать? Код:

* { 
margin: 0; 
padding: 0; 
list-style-type:none; 
} 
header { 
	height:40px; 
	width:60%; 
	margin-left:20%; 
	position:fixed; 
	background:rgba(0,0,0,0.9); 
	z-index:120; 
} 
header li { 
	float: left; 
	list-style-type:none; 
	border-right: 1px solid #252525; 
} 
header li a { 
	float: left; 
	width: 98px; 
	height: 12px; 
	padding: 14px 7px; 
	color: #fff; 
	text-decoration: none; 
	text-align: center; 
	text-transform: uppercase; 
	font-weight: 700; 
	letter-spacing: 1px; 
	font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif; 
} 
.logo { 
	position:absolute; 
	left:-200px; 
	top:10px; 
	width: 160px; 
	height: 210px; 
	background:url('https://i.imgur.com/YpUfTvW.png') no-repeat; 
} 
@-webkit-keyframes TMNT { 
	0%  { left: 0px; } 
	100% { left: -1200px; } 
} 
a.prev,a.next { 
	height:91px; 
	position:absolute; 
	width:43px; 
	top:50%; 
	margin-top:-30px; 
	opacity:0.6; 
	text-indent:-99999px; 
	cursor:pointer; 
	-webkit-transition:opacity 200ms ease-out; 
} 
a.prev:hover,a.next:hover { 
	opacity:1; 
} 
.prev { 
	left:0; 
	background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px; 
} 
.next { 
	right:0; 
	background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px; 
} 
.slider { 
	height:100vh; 
	position: relative; 
} 
.slide { 
	position:absolute; 
	height:100%; 
	width:100%; 
} 
.slider .slide:target { 
	z-index: 100; 
} 
img { 
	max-width:100%; 
	width:100%; 
	position:fixed; 
	left:0; 
}
<!DOCTYPE html> 
<html> 
<head> 
	<title>Туристическая компания Юг-Вояж</title> 
	<meta charset="UTF-8"> 
	<link rel="stylesheet" type="text/css" href="css/slider.css" > 
</head> 
<body> 
<header> 
  <div class="logo"></div> 
  <div class="nav"> 
    <ul> 
      <li><a href="">Главная</a></li> 
      <li><a href="">Туристам</a></li> 
      <li><a href="">О нас</a></li> 
    </ul> 
  </div> 
</header> 
<div class="slider"> 
  <ul> 
    <li id="slider-1" class="slide"> 
      <img src="https://lh3.googleusercontent.com/-PcDDGh9C6Uk/UUoRYu8TmGI/AAAAAAAAADk/bVCVnUEott4/s1231/2.jpeg.jpg"> 
      <a class="prev" href="#slider-4">prev</a> 
      <a class="next" href="#slider-2">next</a> 
    </li> 
    <li id="slider-2" class="slide"> 
      <img src="https://lh5.googleusercontent.com/-ImESS5vXwTQ/UUoRZtDDdwI/AAAAAAAAAD0/mBlvPxXMuDU/s1231/3.jpeg.jpg"> 
      <a class="prev" href="#slider-1">prev</a> 
      <a class="next" href="#slider-3">next</a>            
    </li> 
    <li id="slider-3" class="slide"> 
      <img src="https://lh3.googleusercontent.com/-a4HykmTjnLw/UUoRZ9AOzNI/AAAAAAAAAD8/bsVqg8naI2o/s1231/4.jpeg.jpg"> 
      <a class="prev" href="#slider-2">prev</a> 
      <a class="next" href="#slider-4">next</a>            
    </li> 
    <li id="slider-4" class="slide"> 
      <img src="https://lh5.googleusercontent.com/-lmIWz4ADxc0/UUoRaFjdNXI/AAAAAAAAAEI/widPZMMiBVM/s1231/5.jpeg.jpg"> 
      <a class="prev" href="#slider-3">prev</a> 
      <a class="next" href="#slider-1">next</a>           
    </li> 
  </ul> 
</div> 
</body>

Answer 1

ну например так

* { 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
} 
 
header { 
  height: 40px; 
  width: 60%; 
  margin-left: 20%; 
  position: fixed; 
  background: rgba(0, 0, 0, 0.9); 
  z-index: 120; 
} 
 
header li { 
  float: left; 
  list-style-type: none; 
  border-right: 1px solid #252525; 
} 
 
header li a { 
  float: left; 
  width: 98px; 
  height: 12px; 
  padding: 14px 7px; 
  color: #fff; 
  text-decoration: none; 
  text-align: center; 
  text-transform: uppercase; 
  font-weight: 700; 
  letter-spacing: 1px; 
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif; 
} 
 
.logo { 
  position: absolute; 
  left: -15%; 
  top: 5px; 
  width: 10%; 
} 
 
header .logo img { 
  width: 100%; 
} 
 
@-webkit-keyframes TMNT { 
  0% { 
    left: 0px; 
  } 
  100% { 
    left: -1200px; 
  } 
} 
 
a.prev, 
a.next { 
  height: 91px; 
  position: absolute; 
  width: 43px; 
  top: 50%; 
  margin-top: -30px; 
  opacity: 0.6; 
  text-indent: -99999px; 
  cursor: pointer; 
  -webkit-transition: opacity 200ms ease-out; 
} 
 
a.prev:hover, 
a.next:hover { 
  opacity: 1; 
} 
 
.prev { 
  left: 0; 
  background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px; 
} 
 
.next { 
  right: 0; 
  background: #000 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px; 
} 
 
.slider { 
  height: 100vh; 
  position: relative; 
  z-index:1; 
} 
 
.slide { 
  position: absolute; 
  height: 100%; 
  width: 100%; 
} 
.slide img { 
  width:100%; 
  max-height:100%; 
} 
 
.slider .slide:target { 
  z-index: 100; 
} 
 
.prefer .address { 
  position: relative; 
  z-index:99; 
  background: #fff; 
  width:80%; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 20px 5px; 
  margin-top: -20px; 
  text-align:center; 
  box-shadow: 0 0 3px rgba(0,0,0,0.5); 
}
<!DOCTYPE html> 
<html> 
 
<head> 
  <title>Туристическая компания Юг-Вояж</title> 
  <meta charset="UTF-8"> 
  <link rel="stylesheet" type="text/css" href="css/slider.css"> 
</head> 
 
<body> 
  <header> 
    <div class="logo"><img src="https://i.imgur.com/YpUfTvW.png" alt=""></div> 
    <div class="nav"> 
      <ul> 
        <li><a href="">Главная</a></li> 
        <li><a href="">Туристам</a></li> 
        <li><a href="">О нас</a></li> 
      </ul> 
    </div> 
  </header> 
  <div class="slider"> 
    <ul> 
      <li id="slider-1" class="slide"> 
        <img src="https://lh3.googleusercontent.com/-PcDDGh9C6Uk/UUoRYu8TmGI/AAAAAAAAADk/bVCVnUEott4/s1231/2.jpeg.jpg"> 
        <a class="prev" href="#slider-4">prev</a> 
        <a class="next" href="#slider-2">next</a> 
      </li> 
      <li id="slider-2" class="slide"> 
        <img src="https://lh5.googleusercontent.com/-ImESS5vXwTQ/UUoRZtDDdwI/AAAAAAAAAD0/mBlvPxXMuDU/s1231/3.jpeg.jpg"> 
        <a class="prev" href="#slider-1">prev</a> 
        <a class="next" href="#slider-3">next</a> 
      </li> 
      <li id="slider-3" class="slide"> 
        <img src="https://lh3.googleusercontent.com/-a4HykmTjnLw/UUoRZ9AOzNI/AAAAAAAAAD8/bsVqg8naI2o/s1231/4.jpeg.jpg"> 
        <a class="prev" href="#slider-2">prev</a> 
        <a class="next" href="#slider-4">next</a> 
      </li> 
      <li id="slider-4" class="slide"> 
        <img src="https://lh5.googleusercontent.com/-lmIWz4ADxc0/UUoRaFjdNXI/AAAAAAAAAEI/widPZMMiBVM/s1231/5.jpeg.jpg"> 
        <a class="prev" href="#slider-3">prev</a> 
        <a class="next" href="#slider-1">next</a> 
      </li> 
    </ul> 
  </div> 
 
  <div class="prefer"> 
    <div class="content"> 
      <div class="address"> 
        Какой-то длинный текст 
      </div> 
      <br><br> 
    </div> 
  </div> 
</body>

Answer 2

Первое организовываем через свойство position: absolute и в html заключить внутри родительского элемента.

Второе:

.logo img {width: 100% auto;}
READ ALSO
Как реализовать раскрытие блока как на сайте? [закрыт]
HTML

Как реализовать раскрытие блока как на сайте? [закрыт]

Точнее с помощью чего лучше, ну или может у кого-то есть пример?

 148
ValueConverter для FontWeight у ComboBox
c#

ValueConverter для FontWeight у ComboBox

Имеется ComboBox:

 147
Вечное ожидания запроса
c#

Вечное ожидания запроса

Я отправляю запрос на некий сервер, и ожидаю ответа, но тут проблема, если отослать запрос и выключить интернет (или отправить запрос с выключенным...

 146
ASP.NET Core и JSON-RPC
c#

ASP.NET Core и JSON-RPC

Я создал проект с поддержкой WebAPI и в общем классический REST работает отлично, но также мне нужна поддержка JSON-RPCЯ видел штуки вроде этой и этой,...

 125