AlexCorvis
@AlexCorvis

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

Добрый день!

Прошу взглянуть на код. Понимаю, что смешно, но я запутался. При масштабировании на минус элементы съезжают. Возможно проблема с позиционированием, возможно с 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/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@megamutex
Верстка плохая конечно, так что если на пару миллиметров поедет блок при большом уменьшении масштаба, то ничего страшного
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы