|
Сообщение от zzMaddyzz
|
|
При уменьшении окна браузера в firefox или chrome нижние вложенные блоки сползают,также дергается текст внутри вложенных блоков.
|
Я не заметил таких эффектов...
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#block-main{
width: 559px;
height: 434px;
background: url(img/lines-block.png) no-repeat;
border: 1px solid black;
margin-top: 110px;
margin-left: 193px;
}
#block1{
width: 180px;
height: 43px;
border:1px solid black;
position: relative;
top:20px;
left:215px;
}
#block2{
width: 182px;
height: 43px;
border:1px solid black;
position: relative;
top:10px;
left:405px;
}
#block3{
width: 135px;
height: 55px;
border:1px solid black;
position: relative;
top:22px;
left:270px;
}
#block4{
width: 165px;
height: 45px;
border:1px solid black;
position: relative;
top:3px;
left:420px;
}
#block5{
width: 187px;
height: 47px;
border:1px solid black;
position: relative;
top:4px;
left:120px;
}
.part-img{
float: left;
display:inline-block;
padding-right: 10px;
}
.part-info{
max-width: 138px;
height: 50px;
border: 1px solid black;
position: relative;
margin-left:45px;
}
.mini-list{
list-style-type: none;
}
.mini-list li{
padding:0;
}
.mini-link{
position: absolute;
margin-left: -35px;
margin-top: -10px;
font-size: 8px;
font-family: verdana;
color:#990027;
padding: 0;
}
.mini-par{
font-size: 7px;
font-family: verdana;
color: grey;
margin-left: -35px;
margin-top: 11px;
position: absolute;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id ="block-main">
<div id = "block1">
<img class="part-img" src="img/part1.png" alt=""/>
<div class="part-info">
<ul class="mini-list">
<li>
<a class = "mini-link" href="">"Wines that consumer scan enjoy and trust"</a></li>
<li><p class = "mini-par">Darrel Joseph</p></li>
</li>
</ul>
</div>
</div>
<div id = "block2">
</div>
<div id = "block3">
</div>
<div id = "block4">
</div>
<div id = "block5">
</div>
</body>
</html>