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



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Сдвиг верстки на 1px
shaddad_mw
shaddad_mw
Topic Starter сообщение 18.7.2013, 0:01; Ответить: shaddad_mw
Сообщение #1


Здравствуйте, друзья.
У меня такая проблема: в браузерах хромо-подобных моя верстка отображается, как мене кажется, не совсем правильно.
Дело в том, что в FF моя верстка сдвигается на 1px то левее, то правее (в разных местах). Я думаю, что прав, конечно, FF, но дело даже не в этом. Почему такое произошло? Я конечно, сам еще толком не смотрел, может это случилось из-за того, что я разбираю купленный шаблон под себя и сношу все стили нафиг. Но, ни разу с подобным не встречался. У кого-нибудь было такое?

Еще момент такой, что верстка наполовину HTML5 и наполовину CSS3. Недокончено.
Может, от этого и проблемы?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 18.7.2013, 9:30; Ответить: andreykashops_hb
Сообщение #2


HTML5 вроде не должно влиять, тут все дело в CSS и в капризах браузера. У меня например тоже проблемы с фигурами на CSS, когда меняешь размер окна в браузере, до:
[img]http://f3.s.qip.ru/Wd8G0AMa.png[/img]
после:
[img]http://f3.s.qip.ru/Wd8G0AMb.png[/img]
Самое главное, что это чередуется, то-есть если увеличить еще на одну единицу - будет опять нормально.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shaddad_mw
shaddad_mw
Topic Starter сообщение 18.7.2013, 13:35; Ответить: shaddad_mw
Сообщение #3


Да, у меня и такое тоже было, но только с обычным логотипом, вставленным в сайдбар - при изменении размеров она браузера, изображение тоже начинает себя так вести. Но с этой проблемой я разобрался так, что вокруг логотипа оставил прозрачное поле за счет самого изображения в формате png. :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 18.7.2013, 14:34; Ответить: andreykashops_hb
Сообщение #4


Владимир, но у меня такое не получится. В таких фигурах доли уже сильно заметны, но пока проблему не решил...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
melrok
melrok
сообщение 18.7.2013, 15:20; Ответить: melrok
Сообщение #5


Может Вам поможет решить вашу проблему пример логотипа на СSS3
Html структура нашего логотипа:
<div class="android">
   <div class="head">
      <div class="l_ant"></div>
      <div class="r_ant"></div>
      <div class="l_eye"></div>
      <div class="r_eye"></div>
   </div>
   <div class="body">
      <div class="l_arm"></div>
      <div class="r_arm"></div>
      <div class="l_leg"></div>
      <div class="r_leg"></div>
   </div>
</div>

Css:
div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;}

.android{
   height: 404px; width: 334px;
   margin: 100px auto;
  
}
.head{
   width: 220px; height: 100px;
   top: 32px;
  
   border-radius: 110px 110px 0 0;
   -moz-border-radius: 110px 110px 0 0;
   -webkit-border-radius: 110px 110px 0 0;
  
   -webkit-transition: all 0.1s ease-in;
}
.l_eye, .r_eye {
   background: #fff;
   width: 20px; height: 20px;
   position: absolute; top: 42px;
  
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}
.l_eye {left: 50px;}
.r_eye {right: 50px;}

.l_ant, .r_ant{
   width: 6px; height: 50px;
   position: absolute; top: -34px;
  
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
}
.l_ant {
   left: 50px;
   transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -moz-transform: rotate(-30deg);
}
.r_ant {
   right: 50px;
   transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
}

.body{
   width: 220px; height: 184px;
   top: 40px;
  
   border-radius: 0 0 25px 25px;
   -webkit-border-radius: 0 0 25px 25px;
   -moz-border-radius: 0 0 25px 25px;
}

.l_arm, .r_arm, .l_leg, .r_leg {
   width: 50px; position: absolute;
   -webkit-transition: all 0.1s ease-in;
}
.l_arm, .r_arm {
   height: 150px;
   border-radius: 25px;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
}
.l_leg, .r_leg {
   height: 80px; top: 182px;
   border-radius: 0 0 25px 25px;
   -moz-border-radius: 0 0 25px 25px;
   -webkit-border-radius: 0 0 25px 25px;
}
.l_arm {left: -58px;}
.r_arm {right: -58px;}
.l_leg {left: 45px;}
.r_leg {right: 45px;}

.head:hover {
   -webkit-transform: rotate(-5deg) translate(-4px, -8px);
   -transform: rotate(-5deg) translate(-4px, -8px);
   -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
   -webkit-transform: rotate(15deg) translate(-14px, 0);
   -transform: rotate(15deg) translate(-14px, 0);
   -moz-transform: rotate(15deg) translate(-14px, 0);
}
.r_arm:hover{
   -webkit-transform: rotate(-30deg) translate(30px, 0);
   -transform: rotate(-30deg) translate(30px, 0);
   -moz-transform: rotate(-30deg) translate(30px, 0);
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 18.7.2013, 20:36; Ответить: andreykashops_hb
Сообщение #6


Pixsel, а чем она поможет? Я тоже могу подкинуть тебе сложные фигурки на CSS3 :P

PS Неужели сам делал? :goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shaddad_mw
shaddad_mw
Topic Starter сообщение 18.7.2013, 21:33; Ответить: shaddad_mw
Сообщение #7


(Pixsel)
Может Вам поможет решить вашу проблему пример логотипа на СSS3

Вряд ли мне это поможет :)
Кстати, наткнулся на такой вариант, что DOCTYPE может на это повлиять. Действительно ли так? У меня он под стандарт HTML5 подстроен. Может быть, это является проблемой для не совсем нового браузера FF? Хотя, я убежден, что это хромо-подобные себя ведут неграмотно. Та же новая Opera на хроме и Яндекс.Браузер на хроме показывают одно изображение, а IE10 и FF показывают обратное. Вообще, грешу на рукожопных ребят из Google, нежили на FF.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 19.7.2013, 9:21; Ответить: andreykashops_hb
Сообщение #8


Владимир, следующая версия FF будет на том-же движке, что и Я.Б, Хром, М.Б, Опера - так-что под них лучше подтачиваться
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shaddad_mw
shaddad_mw
Topic Starter сообщение 19.7.2013, 14:12; Ответить: shaddad_mw
Сообщение #9


Да? Хром поработил и FF? Остались Сафари и IE.
Сбывается мечта разработчиков.
Но, тем не менее, пока это только начало и проблемы нужно решать на начальном уровне. А то так скоро хром за нас верстать сайты начнет :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
andreykashops_hb
andreykashops_hb
сообщение 20.7.2013, 15:43; Ответить: andreykashops_hb
Сообщение #10


Владимир, но ведь хром - это браузер на движке Blink, то-есть он никого не поработил.

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Создание html-верстки качественно и недорого
0 Ivan0802 1677 12.8.2017, 13:44
автор: -Иван8748975-
Открытая тема (нет новых ответов) Нужно редактирование шаблона WP, исправление верстки и микроразметки
бюджет 10 долларов
3 devvver 2083 1.3.2017, 16:54
автор: ZaDrotom
Открытая тема (нет новых ответов) Проблема с отображением верстки в Safari
0 Razorio 2989 9.11.2015, 19:38
автор: -Razorio-
Открытая тема (нет новых ответов) Непонятный сдвиг области на устройствах Android
0 bizlis 5155 24.9.2015, 15:12
автор: -bizlis-
Открытая тема (нет новых ответов) Сдвиг меню
0 frams 5429 29.10.2014, 0:10
автор: -frams-


 



RSS Текстовая версия Сейчас: 26.4.2024, 8:03
Дизайн