Как правильно сделать из <div> - ссылку - чтобы она отображалась над контентом внутри контейнера? Подробно - в описании.

Question

Как правильно сделать из <div> - ссылку - чтобы она отображалась над контентом внутри контейнера? Подробно - в описании.

Знаний Культиватор Ученик (107), на голосовании 11 месяцев назад

Ссылка на видео(облако-скачать) - " https://wdho.ru/70in/Desktop_231114_1324.mp4 " - почему-то сюда не могу добавить. Выдает ошибку.
Видео - возможно прояснит некоторые моменты. Убрать лишнюю заполненность ссылки.
фото:

цель:

css тело:

 .body-str { 
    display: flex; 
    width: 100%; 
    height: 1200px; 
    flex-direction: row; 
    justify-content: center; 
} 
.panel { 
    display: inline-block; 
    width: 700px; 
    height: 1000px; 
    text-align: center; 
     
 
} 
.stroka1 { 
    display: flex; 
    background-color: rgb(22, 22, 22, 1); 
    height: 100px; 
    margin-left: 200px; 
    margin-right: 200px; 
    padding-left: 50px; 
    border-style: solid; 
    border-width: 1px; 
    margin-top: 50px; 
} 
.stroka2 { 
    display: flex; 
    background-color: rgb(22, 22, 22, 1); 
    height: 100px; 
    margin-left: 200px; 
    margin-right: 200px; 
    padding-left: 54px; 
    border-style: solid; 
    border-width: 1px; 
    margin-top: 50px; 
} 
.stroka3 { 
    display: flex; 
    background-color: rgb(22, 22, 22, 1); 
    height: 100px; 
    margin-left: 200px; 
    margin-right: 200px; 
    padding-left: 54px; 
    border-style: solid; 
    border-width: 1px; 
    margin-top: 50px; 
} 
.stroka4 { 
    display: flex; 
    background-color: rgba(22, 22, 22, 1); 
    height: 100px; 
    margin-left: 200px; 
    margin-right: 200px; 
    padding-left: 54px; 
    border-style: solid; 
    border-width: 1px; 
    margin-top: 50px; 
     
} 
.foto1 {padding-top: 20px; 
 
} 
.foto2 {padding-top: 25px; 
 
} 
.foto3 {padding-top: 18px; 
 
} 
.foto4 {padding-top: 19px; 
 
} 
.text {padding-top: 35px; 
    padding-left: 10px; 
    color: green;     
} 
.stroka1:hover {background-color: rgb(34, 33, 33);} 
.stroka2:hover {background-color: rgb(34, 33, 33);} 
.stroka3:hover {background-color: rgb(34, 33, 33);} 
.stroka4:hover {background-color: rgb(34, 33, 33);} 
.text>p {font-size: 25px; font-family: Arial, Helvetica, sans-serif; }

Если есть вопросы - можете задать.

Дополнен 1 год назад

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SYSTEM</title>
<link rel="stylesheet" href="static/stytes/style.css" />
<link rel="stylesheet" href="static/stytes/style-body.css" />
</head>
<body>
<div class="glav">
<div class="shapka">
<a class="sss" href="#">
<div class="zaglav">
<div class="nazvan1">
<img width="100px" height="100px" src="images/shap.gif" alt="фото шапки">

</div>
<div class="nazvan2">
<img src="images/site4.gif" />
</div>
</div>
</a>
</div>
<div class="body-str">
<div class="panel">
<a href="#"> <div class="stroka1">
<div class="foto1"><img src="images/info2.png" alt="" /></div>
<div class="text"><p>information</p></div>
</div></a>

<a href="#"><div class="stroka2">
<div class="foto2"><img src="images/static.gif" alt="" /></div>
<div class="text"><p>Statistics</p></div>
</div></a>

<a href="#"><div class="stroka3">
<div class="foto3"><img src="images/invent2.png" alt="" /></div>
<div class="text"><p>Inventory</p></div>
</div></a>

<a href="#"><div class="stroka4">
<div class="foto4"><img src="images/magaz2.png" alt="" /></div>
<div class="text"><p>shop</p></div>
</div></a>
</div>
</div>
</div>
</body>
</html>

Дополнен 1 год назад

Я полный бездарь (новичок вступивший в бездну с граблями) - так что... учусь создавать сайты. Чем больше вариантов вы предложите тем лучше. Однако стоит учитывать - что я добавил в контейнер несколько контейнеров. Чтобы было легче настраивать расположение отдельных элементов. Я хочу чтобы ссылка отображалась с содержимом контейнера.

Answer 1

Денис Ерошин Мастер (1693) 1 год назад

a {
display: inline-block;
width: 217px;
height: 73px;
background-image: url( https://eroshin-denis.github.io/Module01-Gym/images/menu/MyKino.svg );
background-color: green;
}

Знаний КультиваторУченик (107) 1 год назад

помогло.. однако отображает не правильно - шас попробую исправить.

Знаний КультиваторУченик (107) 1 год назад

а как сделать так чтобы отступы padding и margin - не считались ссылкой?
У меня после добавления этого когда отображаются в столбик а не как раньше в строку (на всю ширину контейнера).

Знаний КультиваторУченик (107) 1 год назад

Конечно я могу уменьшить высоту до 0 - тем самым убрав лишнюю верхнюю полость ссылки - но это крайняк.

Знаний КультиваторУченик (107) 1 год назад

")https)://wdfiles.ru/M4th/ссссс.mp4)" - вот видео

Знаний КультиваторУченик (107) 1 год назад

этот код просто подгоняет сам контейнер (в моем случае panel) под ссылку. Не то конечно - но как вариант сойдет.

Денис Ерошин Мастер (1693) Знаний Культиватор, Нафик такое видео с эниками бэниками. Смотри, ссылка даёт эффект по своим границам так что если хочешь отступы в не ссылки то оберни ссылку в контейнер див и ему задавай отступы какие хочешь без ссылки. (ссылка внутри будет)

Денис ЕрошинМастер (1693) 1 год назад

Пожалуйста) Тут такие знатоки! Только успевай вопросы придумывать)))

Answer 2

AaacoB Aaac Мудрец (14214) 1 год назад

учись.... сначала...

Знаний КультиваторУченик (107) 1 год назад

может у вас найдется решение?