Нужно поднять блок с картинками CSS,HTML,Bootstrap3

08 февраля 2021, 14:20

хочу поднять блок с картинками регистрации и логина на 50 пикселей в верх. но при использовании margin-top:50px; не работает почему хз. Блок который нужно поднять носит id Acount и в нем находиться

с id Buttons в них находяться изображения которое нужно поднять

wrapper.html

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap'); 
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap'); 
 
 
body { 
	background-color: #6666D0; 
	font-family: "Lato" ; 
	font-weight: 300; 
	font-size: 16px; 
	color: #555; 
 
	-webkit-font-soothing: antialiased; 
	-webkit-overflow-scrolling: touch; 
 
	margin-top: 70px; 
 
} 
 
 
 
h2,h4,h5,h6{ 
	font-family: "Lato"; 
	font-weight: 300; 
	color:#333; 
} 
 
h3{ 
	font-family: 'Ramabhadra', sans-serif; 
	font-weight: 400; 
 
} 
 
h1{ 
	font-family: 'Oswald', sans-serif; 
	font-weight: 500; 
	color:#333; 
} 
 
 
p{ 
	line-height: 28px; 
	margin-bottom: 25px; 
} 
 
.centered{ 
	text-align: center; 
} 
 
a{ 
	font-family: "Oswald"; 
	font-size: 30px; 
} 
 
a:hover , a:focus{ 
	color:#0000A9; 
	text-decoration: none; 
	outline: 0; 
} 
 
hr { 
	height: 1px; 
	border: 0; 
	border-top:1px solid #ccc; 
	margin: 1em 0; 
	padding:0; 
} 
 
 
li { 
	margin-top:60px; 
	margin-left: 0px; 
} 
 
.li:active, .li:hover{ 
	background-color: #0000A9 ; 
} 
.navbar{ 
	margin-top: -80px; 
	font-weight:800; 
	font-size:14px; 
	padding-top:15px; 
	padding-bottom: 15px; 
} 
 
.navbar-inverse{ 
	padding-left: 400px; 
	background:#000047; 
	border-color: #000031; 
} 
.navbar-inverse .navbar-brand{ 
	color: #999 ; 
	font-weight: bolder; 
	font-size: 22px; 
	letter-spacing: 1px; 
} 
#headrwrap{ 
 
	margin: 300px ; 
 
} 
 
#Buttons{ 
	margin-left: 60px 
} 
 
.form-control{ 
	background-color: #fff; 
	border: 1px solid #ccc; 
	border-radius:4px; 
	box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset; 
	color: #555 ; 
	display: block; 
	font-size: 14px; 
	height: 34px; 
	line-height: 1.42857; 
	padding: 6px 12px; 
	width: 50%; 
	margin-top: 20px; 
	margin-left: 25%; 
} 
 
 
 
.EnterText{ 
	margin-left: 150px; 
} 
 
.close{ 
	margin-right: 10px; 
	margin-top: 10px; 
} 
 
 
 
#next-block{ 
	width: 120px; 
	height: 70px; 
	margin-left: 60px; 
	display:inline-block; 
 
} 
 
#tryFlex{ 
	display: block; 
 
 
} 
 
 
.wrapper, .other { 
	display: inline-block; 
} 
 
.wrapper { 
	width: 80%; 
} 
 
.block { 
	display: flex; 
	justify-content: space-around; 
	flex-wrap: wrap; 
} 
 
.block div { 
	flex-basis: 25%; 
	height: 80px; 
	margin: 10px; 
	background-color: #ff9700; 
} 
 
.other { 
	display: inline-block; 
	width: 18%; 
	height: 40px; 
	background-color: purple; 
} 
 
#Buttons{ 
	position:absolute; 
	margin-bottom: 0px; 
} 
 
#Acount{ 
	position:relative; 
	width:500px; 
	height:300px; 
	overflow:hidden; 
} 
 
#columLogo{ 
	position: relative; 
	height: 20%; 
	width: 20%; 
}

    <html> 
      <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="witdh=device, initial-scale=1.0"> 
        <title>Rapter</title> 
        <link rel="stylesheet" href="css/bootstrap.css"> 
        <link rel="stylesheet" href="css/font-awesome.min.css"> 
        <link rel="stylesheet" href="css/main.css"> 
        <link rel="stylesheet" href="js/main.js"> 
     
     
     
      </head> 
      <body> 
     
     
    <!-- Шапка --> 
        <div class="navbar navbar-inverse "> 
          <div> 
            <div> 
     
            <div class="navbar-header"> 
              <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
              </button> 
                <a href="https://google.com"><img  src="1px/logo.png" ></a> 
     
          </div> 
        </div> 
     
            <div class="navbar-collapse collapse "> 
     
            <ul class="nav navbar-nav"> 
     
     
              <li class="li"><a id="a" href="/news/">Главная</a></li> 
              <li class="li"><a id="a" href="/shop/">Игры</a></li> 
              <li class="li"><a id="a" href="/projects/">Проекты</a></li> 
              <li class="li"><a id="a" href="/aboutUs">О нас</a></li> 
     
    	         <div class="container" id="Acount"> 
                 <li class="container" id="Buttons"> 
                   <a href="#"> <img src="1px/enter.png" > </a> 
                   <a href="#"> <img src="1px/reg.png"> </a> 
                 </li> 
               </div> 
     
     
            </ul> 
     
     
            </ul> 
     
            </div> 
     
          </div> 
     
        </div>

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Валидация в инпуте react

Всем привет, у меня есть 2 инпута

120

HTML

Как сделать фон сайта из разных gif

Пытаюсь сделать фон из нескольких gif-картинокХотелось бы чтобы и справа была гифка и слева, и соответственно так же вверху и внизу

103

HTML

Автоматическая прокрутка Django, JS, HTML

Как добавить автоматическую прокрутку в чат ? Вот пример кода, который я думаю отвечает за показ сообщений и следовательно сюда куда-то можно...

122

HTML

не выводится html в Swift WebView

Пишу приложение, возникла одна проблема в момент когда я открываю окно с WebView куда должен вывестись мой html приложение крашится Подскажитe,пожалуйста,...

104