Обьясните ошибку в вёрстке, пожалуйста.

belarusdds

Создатель
Регистрация
11 Янв 2014
Сообщения
28
Реакции
3
Ребят. Сверстал градусник. Для просмотра ссылки Войди или Зарегистрируйся
Проблема не совсем на первый взгляд очевидная есть. Круги Для просмотра ссылки Войди или Зарегистрируйся (Для просмотра ссылки Войди или Зарегистрируйся) в разных браузерах и при разных разрешениях экранов. Подскажите, что делаю не так?
Идёт ul с классом circle. li - круги. У каждого li задан :after - обводка круга и margin для каждого из li.
 

prefer

Постоялец
Регистрация
12 Май 2016
Сообщения
448
Реакции
141
Попробуй выставить у .circle li значение margin-bottom: 31px;
 

funnywheel

WordPress developer
Регистрация
6 Авг 2010
Сообщения
255
Реакции
219
за чем вы такие своеобразные вещи позиционируете отступами? сделайте для элементов абсолютное позиционирование и не знайте горя
 

belarusdds

Создатель
Регистрация
11 Янв 2014
Сообщения
28
Реакции
3
за чем вы такие своеобразные вещи позиционируете отступами? сделайте для элементов абсолютное позиционирование и не знайте горя
Пожалуйста, подробнее. Для каких конкретно элементов? Там многим элементам задано абсолютное позиционирование. Отступы идут для всех li. Иначе как? Для каждого кружочка писать класс и к нему давать top: xx; left:xx; ?? Это же не верно будет.
 

funnywheel

WordPress developer
Регистрация
6 Авг 2010
Сообщения
255
Реакции
219
почему неверно? там их всего 7. неверно будет, если из 20, 50, 100 и т.д. но тогда все равно есть вариант использовать, например, циклы в SCSS

UPD: и не используйте дрбные значения у пикселов! у вас же не может на мониторе светится половина пиксела Для просмотра ссылки Войди или Зарегистрируйся
 

belarusdds

Создатель
Регистрация
11 Янв 2014
Сообщения
28
Реакции
3
почему неверно? там их всего 7. неверно будет, если из 20, 50, 100 и т.д. но тогда все равно есть вариант использовать, например, циклы в SCSS
Тем не менее, это костыль. Проблема есть, нужно понять из-за чего так происходит, что разные браузеры понимают по разному Magrin
 

funnywheel

WordPress developer
Регистрация
6 Авг 2010
Сообщения
255
Реакции
219
Что костыльного в абсолютном позиционировании элементов внутри абсолютно позиционированного контейнера?
Костыль - это как раз выравнивание подобных структур отступами.

разные браузеры понимают по разному Magrin
покажите, где они по-разному отображают? во всех браузерах, в которых посмотрел - сикось-накось :D
 

Shaxzod2312

Создатель
Регистрация
3 Окт 2013
Сообщения
11
Реакции
1
Видимо у вас проблемы с размещением, градусник наезжает на глобус. Не трогайте градусник, а классу globe дайте width:100%; чтоб при меньшем размере уменьшался. А если хотите продолжить верстку на мобильные экраны, советую сделать градусник горизонтальным.
 

green_vik

Писатель
Регистрация
8 Июн 2016
Сообщения
4
Реакции
0
Всем доброго времени суток, столкнулся снова с проблемой. на скрине видно, что не так???? подскажите пожалуйста
Безымянный.jpg
Вот код моего творения
Код:
<!DOCTYPE html>
<html>
<head>
<!-- включение тегов HTML5 для IE -->
  <!--[if lt IE 9]>
   <script>
    var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(',' <img src="/.s/sm/1/wink.gif" border="0" align="absmiddle" alt="wink" /> ;
    for (var i = 0; i < e.length; i++) {
      document.createElement(e[i]);
    }
   </script>
  <![endif]-->
<!-- /включение тегов HTML5 для IE/ -->
<title>$SITE_NAME$</title>
<style type="text/css">
* {
margin: 0;
padding: 0;}

html {
height: 100%;}
body {
font-family: Segoe UI, sans-serif;
font-size: 12px;
color:#dedede;
background:url(../images/fon.png) #21242a;}

html, body {margin:0;height:100%;}

#wrapper {height:auto !important;height:100%;min-height:100%;width:1020px;
background: #21242a;
border-radius: 10px;
border: 1px solid #373B45;
box-shadow: inset 0px 1px 4px 1px #1D1D1D;
margin: 10px auto;}

#header {height:200px;}

#left {float:left;width:200px;}

#right {float:right;width:200px;}

#center {margin:0 200px 0 200px;}

#spacer {height:100px;}

#footer {height:100px;margin-top:-100px;}

.clear {clear:both;}

</style>
</head>
<body>
<div id='wrapper'>
   <header>
    <div id='header'>ывпаывап
    <!-- Содержимое хэдэра -->
    </div>
   </header>
    <div id='container'>
  <div id='left'>ывпывапывп
  <!-- Содержимое левой колонки -->
  </div>
  <div id='right'>ывапывпывп
  <!-- Содержимое правой колонки -->
  </div>
  <div id='center'>ыпывапывапывп
  <!-- Содержимое центральной колонки -->
  </div>
    </div>
    <div class='clear'></div>
    <div id='spacer'></div>
</div>
   <footer>
<div id='footer'>ывпаывпа
<!-- Содержимое футера -->
</div>
</footer>
</body>
</html>

footer не во wrapper был, переделал, теперь footer отоброжаеться под левой колонкой в чем дело?
апро.jpg
 
Последнее редактирование модератором:
Сверху