ZiEnTenIn
@ZiEnTenIn
Для правильного ответа нужен правильный вопрос.

Как разместить div и рамку внутри другого div-а?

У меня очередная проблема в вёрстке сайта. Проблема заключается в том, что мне нужно разместить пункты меню внутри дива, который серый слева, а самый нижний заключить в рамку(она отмечена на фото внизу вопроса). В общем в коде дивы-пункты и рамка у меня внутри дива-меню, но они свободно выходят за границы меню и не растягивают его. А рамка ведёт себя так, будто в неё вообще не заключён никакой объект. В общем фото ниже, а код html и css под фото.

5d34469fa39c2762056226.jpeg

html
<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Zi Group Official</title>
		<link rel="stylesheet" type="text/css" href="style.css">
		<meta charset="utf-8">
	</head>

	<body>
		<div class="menu"></div>
		<div class="content"></div>
		<div class="menud">
			<a href="#"><div class="menu1"><img src="img/home.png"></div> <div class="menu1t"><h1>Главная</h1></div></a>
			<a href="o_nas.html"><div class="menu2"><img src="img/o_nas.png"></div> <div class="menu2t"><h1>О нас</h1></div></a>
			<a href="proekti.html"><div class="menu3"><img src="img/proekti.png"></div> <div class="menu3t"><h1>Наши проекты</h1></div></a>
			<a href="tovari.html"><div class="menu4"><img src="img/tovari.png"></div> <div class="menu4t"><h1>Товары</h1></div></a>
			<a href="#"><div class="menu5"><img src="img/FAQ.png"></div> <div class="menu5t"><h1>FAQ</h1></div></a>
			<div class="brd">
				<a href="#"><div class="menu6"><img src="img/akk.png"></div> <div class="menu6t"><h1>Аккаунт(скоро)</h1></div></a>
			</div>
		</div>
		<div class="contentd"></div>
	</body>
</html>


css
img {
	border:noneh;
}

a {
	color:white;
}

a:visited {
	color:white;
}

a:active {
	color:#FFE2E2E2;
}

a:hover {
	color:#FFE2E2E2;
}


.menu {
	background-color: grey;
	left:-90px;
	position:fixed;
	width: 40%;
	height:100%;
	webkit-transform:skewX(15deg);
	o-transform:skewX(15deg);
	moz-transform:skewX(15deg);
	ms-transform:skewX(15deg);
	transform:skewX(15deg);
}

.menud {
	text-align:left;
	word-break:break-all;
	background-color:none;
	position:fixed;
	left:10px;
	max-width:40%;
	height:640px;
}

.content {
	background-color:none;
	right:-90px;
	position:fixed;
	width:72%;
	height:640px;
	webkit-transform:skewX(15deg);
	o-transform:skewX(15deg);
	moz-transform:skewX(15deg);
	ms-transform:skewX(15deg);
	transform:skewX(15deg);
}

.contentd {
	word-break:break-all;
	text-align:right;
	background-color:none;
	position:absolute;
	right:10px;
	width:58%;
	height:640px;
}

.brd {
    border-style:dotted;
	border-width:4px;
	border-color:black;
   } /*это  блок рамки, а дальше идут блоки меню*/

.menu1 {
	background-color:white;
	position:fixed;
	left:25px;
	top:25px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu1t {
	background-color:none;
	position:fixed;
	left:125px;
	top:25px;
	min-width:75px;
	height:75px;
}

.menu2 {
	background-color:white;
	position:fixed;
	left:25px;
	top:125px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu2t {
	background-color:none;
	position:fixed;
	left:125px;
	top:125px;
	min-width:75px;
	height:75px;
}

.menu3 {
	background-color:white;
	position:fixed;
	left:25px;
	top:225px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu3t {
	background-color:none;
	position:fixed;
	left:125px;
	top:225px;
	min-width:75px;
	height:75px;
}

.menu4 {
	background-color:white;
	position:fixed;
	left:25px;
	top:325px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu4t {
	background-color:none;
	position:fixed;
	left:125px;
	top:325px;
	min-width:75px;
	height:75px;
}

.menu5 {
	background-color:white;
	position:fixed;
	left:25px;
	top:425px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu5t {
	background-color:none;
	position:fixed;
	left:125px;
	top:425px;
	min-width:75px;
	height:75px;
}

.menu6 {
	background-color:white;
	position:fixed;
	left:25px;
	top:550px;
	width:75px;
	height:75px;
	border-radius:50%;
}

.menu6t {
	background-color:none;
	position:fixed;
	left:125px;
	top:550px;
	min-width:75px;
	height:75px;
}


Извиняюсь за ошибки в тексте и за непоняный код((
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
23 авг. 2019, в 18:29
140000 руб./за проект
23 авг. 2019, в 18:26
3000 руб./за проект
23 авг. 2019, в 18:17
9999 руб./за проект