Как я могу сделать элемент div, который использует всю левую сторону (1/4)? - PullRequest
Новая
       38

Как я могу сделать элемент div, который использует всю левую сторону (1/4)?

0 голосов
/ 08 января 2019

Я новичок в кодировании HTML / CSS, и я пытаюсь создать сайт. Я хочу выделить верхнее, левое меню, а справа - информационный тикер, который обновляется каждые x секунд.

Я сделал это с: 

<aside>
    text1
</aside>

и в css: 

aside {
float: right ;
width: 25%;
height: 75% ;
border: 1px solid green;}

теперь я не уверен, как это сделать, чтобы вся левая сторона была «как 1/4 экрана», и мой вопрос в том, какие числа (%) мне нужно вставить в код CSS, который такой , Прямо сейчас это выглядит действительно испорченным: D

мой сайт: https://www.guwamiwa.de/~nb.marxer/test/

Ответы [ 4 ]

0 голосов
/ 09 января 2019

Итак, я проверил, что вы хотели, так что это из основ, запустите приведенный ниже код, и вы поймете. Это самая основная структура страницы, и она имеет то, что вы хотите

если вы хотите узнать, как составляется меню ПРОВЕРИТЬ мой другой ответ https://stackoverflow.com/a/54101305/10751060

ФАЙЛ HTML 

<!DOCTYPE html>
<html>
<!-- This is the head section it's where title of the page and links are given-->

<head>
  <link rel="stylesheet" href="page.css">
  <title>
    Page
  </title>
</head>

<!-- This is the body section it's where you write things that you want to show on the screen -->

<body>
    <div class="header"></div>
    <div class="col-1"></div>
    <div class="col-2"></div>
    <div class="col-3"></div>
    <div class="footer"></div>
</body>


</html>

CSS FILE 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* The above part is css reset you can get it 
from the internet it resets the css so your code 
is compatible with all the browsers */

.header{
    float: left;
    width: 100%;
    height: 120px;
    background-color: red
}

.col-1,.col-3{
    width: 15%;
    float: left;
    height: 500px;
    background-color: yellow;
}

.col-2{
    float: left;
    width: 70%;
    background-color: blue;
    height: 500px;
}

.footer{
    float: left;
    width: 100%;
    height: 100px;
    background-color: #000;
}
0 голосов
/ 08 января 2019

Вы можете попробовать свойства CSS float и width для настройки столбцов. Ниже приведен пример: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column-left {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}

.column-right {
  float: left;
  width: 75%;
  padding: 10px;
  height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<h2>Two Equal Columns</h2>

<div class="row">
  <div class="column-left" style="background-color:#aaa;width:25%;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column-right" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

</body>
</html>

Вы можете попробовать: https://jsfiddle.net/SiddharthMishra/3k2vqLpw/

0 голосов
/ 09 января 2019

Приведенный ниже код является базовым представлением того, как меню создается с использованием float в CSS. Вы можете увидеть <code><li> в HTML, просто попробуйте добавить еще один <code><li>, он автоматически настроится в меню справа, скопируйте этот HTML и CSS и попытайтесь понять, как это выдержать.

Тег <code><ul>, в котором есть список <code><li>, равен <code>float: right, где <code><li> ' равны float: left;. В этом случае меню выровнено по правому краю, все новые <code><li>'s будут выровнены по левой стороне <ul> из-за float: left;.

Я рекомендую https://www.w3schools.com/html/default.asp для подробного изучения HTML и CSS. УДАЧИ!

Снимок экрана с выводом

ФАЙЛ HTML 

<!DOCTYPE html>

<html>

<!-- This is the head section it's where the title of the page and links are given-->

<head>
  <link rel="stylesheet" href="menu.css">
  <title>
    Menu Example
  </title>
</head>

<!-- This is the body section it's where you write things that you want to show on the screen -->

<body>
</body>
<div class="header">
  <h1 src="logo.png" height="60" class="logo">Logo</h1>
  <div class="menu">
    <ul class="ul">
      <li class="line"><a id="active" class="link" href="home.html">HOME</a></li>
      <li class="line"><a class="link" href="#">PAGES</a></li>
      <li class="line"><a class="link" href="#">SERVICES</a></li>
      <li class="line"><a class="link" href="#">CASE STUDIES</a></li>
      <li class="line"><a class="link" href="#">CAREERS</a></li>
      <li class="line"><a class="link" href="#">CONTACT</a></li>
    </ul>
  </div>
</div>

</html>

CSS FILE 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* The above part is css reset you can get it 
from the internet it resets the css so your code 
is compatible with all the browsers */

.header{
    width: 100%;
    height: 120px;
}
.logo{
    float: left;
    margin-top: 20px;
    width: 24%;
    font-size: 50px;
}

.menu{
    float: right;
    width: 75%;
}
.ul{
    float: right;
    list-style-type: none;
    margin-top: 60px;
    margin-right: 60px;
}
.line{
    float: left;
    color: #000000;
    font-size: 12px;
    font-family: openSans;
    font-weight: bold;
}
.link{
    color: black;
    text-decoration: none;
    height: 100%;
    padding-right: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    border-right: 2px solid #d2d2d2;
}
.link:hover{
    color: #d7002e;
    border-color: #d7002e;
}
#active{
    color: #d7002e;
    border-color: #d7002e;
}
0 голосов
/ 08 января 2019

Я предлагаю разделить ваше тело на четыре части (используя <div></div> элементы). верхняя часть будет для вашего заголовка (или просто для этого), а три оставшихся будут иметь width: 25%, width: 50%, width: 25%. Убедитесь, что вы не добавляете никаких границ к элементам div, но добавляете все элементы, которые вам нужны, внутри элементов div. Пример: 

<div class="right-panel" style="width: 25%">
  <aside>
    text1
  </aside>
</div>
Очевидно, добавьте столько CSS, сколько вам нужно в div. Причина, по которой я не рекомендую добавлять какие-либо границы, заключается в том, что они изменяют ширину div. Вы, конечно, можете добавить границы для элементов внутри div.

Вот пример: 

    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Your Site</title>
  <style>
        html {
      background: #ebfefe;
      height: 100%;
    }
    
    body {
      height: 100%;
      {
        .header {
          padding: 25px;
          width: 100%;
        }
        .right-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .left-panel {
          float: left;
          width: 25%;
          background-color: blue;
          height: 100%;
        }
        .root {
          float: left;
          display: block;
          width: 50%;
          background-color: antiquewhite;
          height: 100%;
        }
  </style>

</head>

<body>
  <div class="header">
    <h1>Header</h1>
  </div>
  <div class="left-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="root">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="right-panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>

</html>
...