Задать вопрос
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
Верстка плохая конечно, так что если на пару миллиметров поедет блок при большом уменьшении масштаба, то ничего страшного
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработка Django приложения и исправление ошибок конфигурации
25 апр. 2024, в 20:14
1000 руб./за проект
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Требуется завершить backend (проектная работа)
25 апр. 2024, в 19:42
49000 руб./за проект
Ещё заказы