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



 

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

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

Открыть тему
Тема закрыта
> добавить еще один блок
viktor6
viktor6
Topic Starter сообщение 4.10.2017, 0:19; Ответить: viktor6
Сообщение #1


Всем привет

Помогите отредактировать html файл. Я пытаюсь добавить еще один блок

<div class="de">
<div class="den">
<div class="dene">
<div class="denem">
<div class="deneme">
19<span>.0</span><strong>&deg;</strong>
</div>
</div>
</div>
</div>
</div>

Но этот блок не хочет становиться в одну строку.
index.html
<html>
<head>
<title>Temperatures</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<div class="content">
<div class="thermometers">
<div class="label">Температура</div><div class="label">Температура</div><div class="label">Температура</div>
<div class="de">
<div class="den">
<div class="dene">
<div class="denem">
<div class="deneme">
20<span>.2</span><strong>&deg;</strong>
</div>
</div>
</div>
</div>
</div>
<div class="de">
<div class="den">
<div class="dene">
<div class="denem">
<div class="deneme">
19<span>.0</span><strong>&deg;</strong>
</div>
</div>
</div>
</div>
</div>
<div class="de">
<div class="den">
<div class="dene">
<div class="denem">
<div class="deneme">
19<span>.0</span><strong>&deg;</strong>
</div>
</div>
</div>
</div>
</div>
<div class="details">Gem laatste 24u<br />21&deg;</div><div class="details">Gem laatste 24u<br />19&deg;</div><div class="details">Gem laatste 24u<br />19&deg;</div>
<div class="last-update">20-09-2017 10:30:02</div>
</div>
<div id="chartdiv" style="width:100%; height:250px;"></div>
</div>
</body>
</html>

style.css
[CSS]@import url(http://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
* {
margin: 0;
padding: 0;
outline: 0;
}

body {
text-align: center;
background: #f2f2f2;
}

div.content {
position: relative;
margin: 0 auto;
text-align: left;
width: 1000px;
}

div.thermometers {
margin: 20px auto;
width: 560px;
}

div.thermometers .label {
position: relative;
float: left;
width: 280px;
text-align: center;
font-size: 24px;
font-family: 'Dosis';
font-weight: bold;
}

div.thermometers .details {
position: relative;
float: left;
width: 280px;
text-align: center;
font-size: 16px;
font-family: 'Dosis';
font-weight: bold;
}

div.thermometers .last-update {
margin: 10px auto;
text-align: center;
width: 560px;
font-size: 12px;
font-family: 'Dosis';
font-weight: bold;
}

.de .den, .de .dene, .de .denem, .de .deneme { position: absolute; left: 50%; top: 50%; }
.de {
position: relative;
float: left;
margin: 20px;
width: 240px;
height: 240px;
border-radius: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
background-color: transparent;
}
.den {
position: relative;
width: 210px;
height: 210px;
margin: -105px 0 0 -105px;
border-radius: 100%;
box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
background: #df3341;
background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
position:relative;
}
.dene {
width: 180px;
height: 180px;
margin: -90px 0 0 -90px;
border-radius: 100%;
box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
background: #f2f6f5;
background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
}
.denem {
width: 160px;
height: 160px;
margin: -80px 0 0 -80px;
border-radius: 100%;
background: #cbd5d6;
background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
}

.deneme {
padding: 3px 10px 0 10px;
width: 120px;
height: 137px;
display: inline-block;
margin: -70px 0 0 -70px;
color: #555;
text-shadow: 1px 1px 1px white;
font-family: 'Dosis';
font-size: 100px;
font-weight: 400;
text-align: center;
}
.deneme span { font-size: 30px; font-weight: 200; }
.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }[/CSS]

[img]https://thumb.ibb.co/crpDGG/image.png[/img]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Colonizator
Colonizator
сообщение 5.10.2017, 3:28; Ответить: Colonizator
Сообщение #2


Не совсем понятно как именно должно выглядеть. Предположу вот так: https://jsfiddle.net/ugunyugq/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 5.10.2017, 13:11; Ответить: Degradator
Сообщение #3


Не глядя в код, и опираясь только на рисунок могу предположить что
Твоя задача следующая -
должен быть ряд из лейблов (на рисунке "температура")
под каждым лейблом должен быть круглый термометр

твоя проблема следующая:
Лейблы занимают не 33% ширины, а 50%
третий лейбл переходит на вторую строку, поскольку первая строка занята первыми двумя лейблами
первый термометр располагается справа от третьего лейбла, поскольку во второй строке есть место
второй и третий термометры встают под первым (в третьей строке).

Как надо решать проблему

Поместить термометр и соответствующий ему лейбл в один div
задать этим div'ам ширину 33%

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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Восстановить сайт + добавить исходные данные
5 Portsmouth 1960 21.5.2023, 7:23
автор: Skyworker
Открытая тема (нет новых ответов) Ролик. Изготовление видеороликов за один день.
Делаю быстро в любом формате видеоролик по шаблонам
4 Jast1 2642 4.3.2022, 1:12
автор: Jast1
Открытая тема (нет новых ответов) Внешние ссылки где еще разместить
5 muratastana 7086 10.11.2021, 18:48
автор: muratastana
Открытая тема (нет новых ответов) PushAdvert.biz — зарабатывайте на Push подписках еще больше
0 PushAdvert 2509 15.4.2021, 21:10
автор: PushAdvert
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыГлавные тренды на рынке контентных сайтов за один день!
Узнайте все о грядущих изменениях рынка сайтов на АРЕНЕ 2020.
0 Pechenko 1074 11.2.2020, 12:56
автор: Pechenko


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:50
Дизайн