Задать вопрос
AlexCorvis
@AlexCorvis
html

Проблема с масштабом блочная верстка?

Добрый день!

Прошу взглянуть на код. Понимаю, что смешно, но я запутался. При масштабировании на минус элементы съезжают. Возможно проблема с позиционированием, возможно с float. Не могу сообразить и поправить тоже не могу.

Прошу Вас взглянуть и подсказать в чём дело. Спасибо.
<!DOCTYPE html>

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>30 Hover Effects For Buttons Demo</title>
<link href="_css/ex_27style.css" rel="stylesheet" type="text/css"/>

</head>
<body> 
<div class="wrapper-inner-tab-backgrounds-first">

<!--<div class="sim-button button27">-->

<ul class ="sim-button">

<li class="button1"> Компания 1 </li>
<li class="button2"> Контакты 2 </li>
<li class="button3"> Статьи 3 </li>
<li class="button4"> Новости 4 </li>

</ul>
         
</div>

</div>

</body>
</html>


/* ------НАЧАЛО ПЕРВЫЙ БЛОК МЕНЮ КОМПАНИЯ---------*/

*{
	margin: 0 auto;
    

}

.wrapper-inner-tab-backgrounds-first{
	width: 1000px;
	height:600px;
	background-color: #feb41d;
	
}


.sim-button{
	
	line-height: 50px;
	height: 50px;
	text-align: center;
	margin-right:  auto;
	margin-left:  auto;
	margin-top: 125px;
	width: 60%;
	cursor: pointer;
}

.button1 {
    width: 240px;
    right: 215px;
	top:22px;
	float:left;
	

	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position:relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
	
	
}
.button1:hover{
	border: 1px solid rgba(255,255,255,0);
}
.button1 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	
}
   .button1::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: translate(-100%, -600%) rotate(30deg);
	transform: translate(-100%, -600%)  rotate(30deg);
	background-color: rgba(255,255,255,0.5);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

}

.button1:hover::before{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);	
} 

/* ------КОНЕЦ ПЕРВЫЙ БЛОК МЕНЮ КОМПАНИЯ---------*/


/* ------НАЧАЛО ВТОРОЙ БЛОК МЕНЮ КОНТАКТЫ---------*/

.wrapper-inner-tab-backgrounds-first{
	height: 600px;
	width: 1000px;
	background-color: #feb41d;
	
}


.sim-button{
	line-height: 50px;
	height: 50px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 125px;
	width: 60%;
	cursor: pointer;
}

.button2 {
	float:left;
    width: 230px;
    top:22px;
	left: -200px;
	
	
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
	
}
.button2:hover{
	border: 1px solid rgba(255,255,255,0);
}
.button2 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	
}
   .button2::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: translate(-100%, -600%) rotate(30deg);
	transform: translate(-100%, -600%)  rotate(30deg);
	background-color: rgba(255,255,255,0.5);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

}

.button2:hover::before{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);	
} 


/* ------КОНЕЦ ВТОРОЙ БЛОК МЕНЮ КОНТАКТЫ---------*/


/* ------НАЧАЛО ТРЕТИЙ БЛОК МЕНЮ СТАТЬИ---------*/

.wrapper-inner-tab-backgrounds-first{
	height: 600px;
	width: 1000px;
	background-color: #feb41d;
}


.sim-button{
	line-height: 50px;
	height: 50px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 125px;
	width: 60%;
	cursor: pointer;
}

.button3 {
	
	float:left;
    width: 230px;
	left:287px;
	top:-30px;

	
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
	
	
	
}
.button3:hover{
	border: 1px solid rgba(255,255,255,0);
}
.button3 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	
}
   .button3::before{
	content: '';
	position:absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: translate(-100%, -600%) rotate(30deg);
	transform: translate(-100%, -600%)  rotate(30deg);
	background-color: rgba(255,255,255,0.5);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

}

.button3:hover::before{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);	
} 
/* ------КОНЕЦ ТРЕТИЙ БЛОК МЕНЮ СТАТЬИ---------*/


/* ------НАЧАЛО ЧЕТВЕРТЫЙ БЛОК МЕНЮ НОВОСТИ---------*/

.wrapper-inner-tab-backgrounds-first{
	height: 600px;
	width: 1000px;
	background-color: #feb41d;
}

.sim-button{
	line-height: 50px;
	height: 50px;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 125px;
	width: 60%;
	cursor: pointer;
	
}

.button4 {
    width: 240px;
    left: 300px;
	top:-30px;
	
	color: rgba(255,255,255,1);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	position: relative;
	border: 1px solid rgba(255,255,255,0.5);
	overflow: hidden;
	float:left;
}
.button4:hover{
	border: 1px solid rgba(255,255,255,0);
}
.button4 a{
	color: rgba(51,51,51,1);
	text-decoration: none;
	
}
   .button4::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	-webkit-transform: translate(-100%, -600%) rotate(30deg);
	transform: translate(-100%, -600%)  rotate(30deg);
	background-color: rgba(255,255,255,0.5);
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);

}

.button4:hover::before{
	-webkit-transform: translate(0,0);
	transform: translate(0,0);	
} 
/* ------КОНЕЦ ЧЕТВЕРТЫЙ БЛОК МЕНЮ НОВОСТИ---------*/
  • Вопрос задан
  • 217 просмотров
Комментировать
Подписаться Оценить Комментировать
Решения вопроса 1
@westdp
Не привязывайся к фиксированной ширины, задавай все в %
https://jsfiddle.net/westdp1991/4wftt0k1/
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ответы на вопрос 1
@megamutex
Верстка плохая конечно, так что если на пару миллиметров поедет блок при большом уменьшении масштаба, то ничего страшного
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend Developer
Wanted. • Санкт-Петербург
До 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать одностраничный сайт , на сайте будет описание проекта
05 нояб. 2024, в 22:00
5000 руб./за проект
Подправить функционал веб-проекта на laravel (backend)
05 нояб. 2024, в 21:43
4500 руб./за проект
Синтезатор частоты
05 нояб. 2024, в 21:16
100000 руб./за проект
Ещё заказы