плывет блог div при умешьшении масштаба в браузере

vibrant · January 9, 2015

столкнулся со следующей проблемой: открываю файл index в браузере вся верстка при масштабе 100% смотрится хорошо при уменьшении масштаба начинает плыть правый блок с контентом. Если убрать border у блока с контентом все становится как надо. помогите советом

http://savepic.ru/6617212.jpg

http://savepic.ru/6600828.jpg

<body><div class="karkas">  <div class="header">  	<a href="#"><img class="logo" src="images/logo.png" alt="logo"/></a>    <a href="#"><div class="random">Случайная серия</div> </a>  </div>   <div class="menu">  	<ul>    	<li><a href="#">Выбрать эпизод</a></li>        <li><a href="#">Новости</a></li>        <li><a href="#">Контакты</a></li>        <li><a href="#">Форум</a></li>    </ul>    <div class="search">    	<form action="" method="get">          	<input type="text" class="search-txt" name="search" value="Что искать?" onfocus="if(this.value=='Что искать?')this.value=''" onblur="if(this.value=='')this.value='Что искать?'"/>            <input type="button" class="search-btn" value="поиск" />        </form>    </div>  </div>  <div class="content-wrapper">	<div class="navigation">  	<ul>    	<li><a href="#">О сериале</a></li>        <li><a href="#">Персонажи</a></li>        <li><a href="#">Щекотка и царапка</a></li>        <li><a href="#">Дом ужасов</a></li>        <li><a href="#">Аудио</a></li>        <li><a href="#">Картинки</a></li>    </ul></div>	<div class="content">контент	</div>  </div></div>  </div>	</body>

*{	padding: 0;	margin: 0;	text-align: left;}img{	border:none;}a{	text-decoration:none; outline:none;}a:hover{	text-decoration:underline;}body{	background:#F8F8F8 url(images/pattern_simps.jpg);}.karkas{	background:#FEFEFF ; width:940px; 	margin:15px auto;	box-shadow: 0px 0px 10px 5px #666;	overflow:hidden;}	.header{	background:url(images/head-bg.png)no-repeat; 	overflow:hidden;	height:299px;	}		.logo{		float:left; 		margin: 15px auto auto 25px;		}		.random{		float:right;		background:#E1E0E0;		border:1px solid #505151;		color:#465f95;		font: bold 18px  "PT Sans";		height:34px;		width:150px;		text-align:center;		padding-top:5px;		margin:20px 24px auto auto;				}		.menu{			background:#FFDE00;			font:bold 19px "PT Sans";			height:42px;			border-bottom: 3px solid #656565;		}				.menu ul{				list-style:none;			}			.menu ul li{				float:left;			}			.menu ul li a{				color:#000;				display:block;				padding: 9px 25px;			}			.menu ul li a:hover{				background:#ae980c;				color:#373211;				text-decoration:none;		}		.search{			float:right;			padding-right:24px;			padding-top:10px;			}		.search input{			float:left;			margin-left:5px;		}		.search-txt{			font: 14px "PT Sans";			color:#404040;			width:175px;			padding-left:3px;		}		.search-btn{			font-size:14px;			font-family: "PT Sans";			color:#404040;			width:50px;		}	.content-wrapper{	overflow:hidden;		}	.navigation{		float:left;		font: bold 18px "PT Sans";		margin-top: 15px; 		border-right:1px solid #A8B9C5;		width:190px;		height:1500px;	}	.navigation ul{		padding-left:25px;	}	.navigation ul li{		list-style:none;		line-height:30px;			}	.navigation ul li a{		color:#333333;	}	.navigation ul li a:hover{		color:#CE3686;		text-decoration:none;	}			.content{	float: right;	width: 748px;	height: 1500px;	margin-top: 15px;	border-left: 1px solid #595B5C;	font-size: 14px;	text-align: justify;	font-family: Tahoma;	color: #333333;	padding-top: 0px;	}

Edited January 10, 2015 by vibrant

TuTaHuKk · January 10, 2015

Ошибка 404. Данная страница не существует!

On 1/10/2015 at 9:18 AM, TuTaHuKk said:
Ошибка 404. Данная страница не существует!

и картинкой скорее всего не будет понятно!. Желательно сами исходники

vibrant · January 10, 2015

On 1/10/2015 at 9:21 AM, TuTaHuKk said:
Ошибка 404. Данная страница не существует!

On 1/10/2015 at 9:18 AM, TuTaHuKk said:
Ошибка 404. Данная страница не существует!
и картинкой скорее всего не будет понятно!. Желательно сами исходники

вот прописал код и картинку обновил

TuTaHuKk · January 10, 2015

Залейте ваши файлы сюда пожалуйста http://webfile.ru/

psywalker · January 10, 2015

Код для навигации:

  .navigation{        float:left;        font: bold 18px "PT Sans";        margin-top: 15px;        border-right:1px solid #A8B9C5;        width:190px;    }

Код для контентной части:

    .content{    overflow:hidden;      margin-top: 15px;    border-left: 1px solid #595B5C;    font-size: 14px;    text-align: justify;    font-family: Tahoma;    color: #333333;    padding-top: 0px;    }

Попробуйте, не пожалеете))

vibrant · January 13, 2015

решил данную проблему с помощью box-sizing: border-box;

Sign In

плывет блог div при умешьшении масштаба в браузере

Question

vibrant

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

TuTaHuKk

Link to comment

Share on other sites

vibrant

Link to comment

Share on other sites

TuTaHuKk

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

vibrant

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information