Jump to content
  • 0

добавить еще один блок

viktor6

Asked by viktor6,

 Share

Question

viktor6 Explorer

viktor6

Posted
Posted

Всем привет

Помогите отредактировать 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>

Но этот блок не хочет становиться в одну строку.

Скрытый текст

<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

Скрытый текст

@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; }

 

тем.png

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
AlexZaw Explorer

AlexZaw

Posted
Posted (edited)

если я правильно понял, то проблема вот здесь  

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

Edited by AlexZaw
  • Like 1
Link to comment
Share on other sites
  • 0
viktor6 Explorer

viktor6

Posted
  • Author
Posted

Можно еще помощь.

имеем такую страницу и не влезает ее одни данные

Скрытый текст

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <meta name="HandheldFriendly" content="True" />
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  
</head>

       
        <div class="row">
            <div class="col-md-12">
                  <div class="panel panel-primary">
                        <div class="panel-heading" style="text-align:left">Дата и время последнего обновления1: 17-12-2017 20:04:06</div>
                    <div class="panel-body">
        <div class="row">
            <div class="col-md-2">
                  <div class="panel panel-warning">
                        <div class="panel-heading">Температура в комнате</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>26.4<small> &deg;C</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-danger">
                        <div class="panel-heading">Давление воздуха</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>754.8<small> mmHg</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-warning">
                        <div class="panel-heading">Температура на Улице</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>21.9<small> &deg;C</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-warning">
                        <div class="panel-heading">Температура на Балконе</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>22.6<small> &deg;C</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-warning">
                        <div class="panel-heading">Температура на Кухне</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>20.4<small> &deg;C</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-warning">
                        <div class="panel-heading">Температура в комнатной батареи</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>22.6<small> &deg;C</small></h1>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                  <div class="panel panel-info">
                        <div class="panel-heading">Температура на Кухне в батареи</div>
                    <div class="panel-body" style="text-align: center">
                        <h1>20.4<small> &deg;C</small></h1>
                    </div>
                </div>
 

 

bootstrap.min.css

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept