X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите пожалуйста с CSS, не могу разобраться
Solonik
Solonik
Topic Starter сообщение 27.11.2013, 18:47; Ответить: Solonik
Сообщение #1


Старожил
******

Группа: Active User
Сообщений: 1358
Регистрация: 29.10.2009
Из: г.Москва
Поблагодарили: 338 раз
Репутация:   89  


Ситуация такая не могу разобраться, что-то уже мозг едет.

Всё смотрится нормально, но если увеличивать CTRL+ масштаб сьезжает немного элемент:

  <div class="box-content special_prod">
    <div class="box-product" id="special_block">
      <?php foreach ($products as $product) { ?>
      <div id="special_prod">
        <div class="name"></div>
        
        <div class="image" id="image_spec"><a href=""></a></div>
      
        <div class="price" id="spec_price">
                   <p class="price-old"></p>
                  <p class="price-new"></p>
          
        </div>


CSS основные
#special_block{
display:block;
overflow:hidden;
margin-bottom:15px;
}
#special_prod .name{
color:white;
text-align:center;
font-size: 16px;
margin:10px 0px;
}
#special_prod .name a{
color:white;
font-weight: bold;
}

#special_prod
{
float: left;
background: #A2B2C4 url('../image/gradient_box.png') no-repeat;
max-width: 278px;
max-height: 488px;
color: #FFF;
text-shadow: 1px 0px 1px #0D3A6E;
}

#image_spec img{
margin-left:55px;
}

#cart_special .price-new{
float:left;
color:#fff;
text-shadow: none;
}

#spec_price{
padding: 15px 45px;
color: white;
}
#spec_price .price-new {
font-size:16px;
min-height: 44px;
padding-left: 5px;
float:left;
text-align: center;

}
#spec_price .price-old {
font-size:16px;
padding-right: 5px;
float:left;
min-height: 25px;
border-right: 1px solid #FFF;
text-align: center;
}


Помогите пожалуйста!


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Solus_Rex
Solus_Rex
сообщение 27.11.2013, 19:21; Ответить: Solus_Rex
Сообщение #2


Участник
***

Группа: User
Сообщений: 158
Регистрация: 22.7.2013
Из: СПб
Поблагодарили: 68 раз
Репутация:   10  


Solonik,
Не уверен на 100%., но есть ощущение что двигает вот эта штука:
#special_prod .name
В ней не пропорционально масштабируется элемент.
Я бы сделал так:
#special_prod .name{
color:white;
text-align:center;
font-size: 16px;
margin:5px 0px;  /* было  margin:10px 0px; */
overflow:hidden;  /* этого не было        */
}


Сообщение отредактировал Solus_Rex - 27.11.2013, 19:24


--------------------
Ку


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Solonik
Solonik
Topic Starter сообщение 27.11.2013, 19:38; Ответить: Solonik
Сообщение #3


Старожил
******

Группа: Active User
Сообщений: 1358
Регистрация: 29.10.2009
Из: г.Москва
Поблагодарили: 338 раз
Репутация:   89  


Solus_Rex, Так пробовал не помогает. Есть предположение, что #special_prod


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Solus_Rex
Solus_Rex
сообщение 28.11.2013, 1:10; Ответить: Solus_Rex
Сообщение #4


Участник
***

Группа: User
Сообщений: 158
Регистрация: 22.7.2013
Из: СПб
Поблагодарили: 68 раз
Репутация:   10  


Solonik,
А есть возможность оригинал посмотреть? В ЛС например. У меня на jsfiddle больше ничего не детектится в разных браузерах.
На маленьких элементах, когда марджинами всё двигается часто такое вылезает при масштабировании.

В ЛС пока не могу отвечать. smile.gif

вот тут:
..../view/theme/qlory/stylesheet/jquery.countdown.css
в:
#special_prod {
добавить:
width: 100%;
/*======================*/
в
#spec_price .price-old {
добавить:
width: 100%;
/*======================*/
в
#spec_price .price-new {
добвить:
width: 100%;
/*======================*/
в
#cart_special {
стоит:
padding: 10px 90px;  /* тут поменять на  padding: 10px 37%; */
при 37% кнопка не съезжает по гигантского увеличения.
/*======================*/
в
.countdownHolder {
margin: 0px 53px;   /* тут поменять на  margin: 0 0 0 17%;   */
тоже соответственно таймер будет съезжать только на совсем гигантских увеличениях.
/*======================*/
А еще в:
..../view/theme/qlory/stylesheet/stylesheet.css
в
#special_prod .image {
margin-left: 55px;    /*  margin: 0 0 0 22%; */


Сообщение отредактировал Solus_Rex - 28.11.2013, 1:22


--------------------
Ку


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Solonik
Solonik
Topic Starter сообщение 28.11.2013, 10:14; Ответить: Solonik
Сообщение #5


Старожил
******

Группа: Active User
Сообщений: 1358
Регистрация: 29.10.2009
Из: г.Москва
Поблагодарили: 338 раз
Репутация:   89  


Solus_Rex, Что то не фига((( Также сьезжает теперь тока изначально даже без увеличения всё сьехало.

Сообщение отредактировал Solonik - 28.11.2013, 10:16


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hallboy222
Hallboy222
сообщение 28.11.2013, 10:51; Ответить: Hallboy222
Сообщение #6


Любитель идей
*******


Группа: Active User
Сообщений: 2582
Регистрация: 27.5.2010
Из: Москва
Поблагодарили: 872 раза
Репутация:   149  


Съезжает таким образом чаще всего, когда элементы не имеют заданной ширины.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Solonik
Solonik
Topic Starter сообщение 28.11.2013, 12:39; Ответить: Solonik
Сообщение #7


Старожил
******

Группа: Active User
Сообщений: 1358
Регистрация: 29.10.2009
Из: г.Москва
Поблагодарили: 338 раз
Репутация:   89  


Вроде решил проблему разобрался заключил <a> в <span> я так понимаю для тега a вроде нельзя задать ширину/


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Hallboy222
Hallboy222
сообщение 28.11.2013, 14:34; Ответить: Hallboy222
Сообщение #8


Любитель идей
*******


Группа: Active User
Сообщений: 2582
Регистрация: 27.5.2010
Из: Москва
Поблагодарили: 872 раза
Репутация:   149  


Solonik, можно. Если тег a сделать блочным (display: block;).


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать ноутбук
Ноутбук для детей
14 kstnews 310 Сегодня, 3:34
автор: anchous
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1078 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1356 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 449 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Оцените пожалуйста ptd7.ru
Оцените пожалуйста домен: ptd7.ru
1 kostetskij 940 29.11.2017, 17:28
автор: Vangan


 



RSS Текстовая версия Сейчас: 18.12.2017, 7:25
Дизайн