vibrant
-
Posts
3 -
Joined
-
Last visited
vibrant's Achievements
Explorer (1/14)
0
Reputation
-
плывет блог div при умешьшении масштаба в браузере
vibrant replied to vibrant's question in HTML Coding
решил данную проблему с помощью box-sizing: border-box; -
плывет блог div при умешьшении масштаба в браузере
vibrant replied to vibrant's question in HTML Coding
и картинкой скорее всего не будет понятно!. Желательно сами исходники вот прописал код и картинку обновил -
столкнулся со следующей проблемой: открываю файл 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; }