Не работает рабочий стол «Left» и «Right»

Я создаю веб-сайт (не настоящий, просто для практики).

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

Должен быть промежуток в середине, который находится ниже поля заголовка и между двумя меньшими полями.

Я попытался сделать это, используя 'body {background-image: url ("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg") ; } #backgroundbox {width: 100% position: absolute; margin: auto; высота: 150 пикселей; background-color: # 66ff66; border: 15px solid # 00cc00; } #navl {background-color: # 66ff66; border: 15px solid # 00cc00; border-top-width: 0px; позиция: абсолютная; слева: 0,6%; право: 25%; высота: 75 пикселей; } #navr {background-color: # 66ff66; border: 15px solid # 00cc00; border-top-width: 0px; позиция: абсолютная; слева: 75%; право: 99,4%; высота: 75 пикселей; } и <body> <div id = "backgroundbox"> </ div> <div id = "navl"> </ div> <div id = "navr"> </ div> </ body> ', с каждой коробкой только на 25% на соответствующей стороне, оставляя 50% -ный промежуток посередине. когда

Я запускаю этот код, он имеет строку заголовка ОК, но затем один длинный бар занимает 75% экрана под ним, а не то, что я хотел.

Пожалуйста, помогите, но попробуйте объяснить, потому что я 12-летний, который только недавно начал кодирование! Ниже вы можете увидеть код ...

См. Фрагмент

float
width

html,css,

0

Ответов: 3

float
width

30
1

Это должно быть легко решить с positionлевого и правого, а затем решить leftкаждый из них. Вот рабочий пример, где я удалил ваши right leftи rightсвойства

body {
  background-image: url("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg");
  }
  
  #backgroundbox {
  width: 100%
  position: absolute;
  margin: auto;
  height: 150px;
  background-color: #66ff66;
  border: 15px solid #00cc00;
  }

  #navl {
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  float: left;
  height: 75px;
  width: 25%;
  }
  
  #navr{
  background-color: #66ff66;
  border: 15px solid #00cc00;
  border-top-width: 0px;
  float: right;
  height: 75px;
  width: 25%;
  }
<body>
<div id="backgroundbox"></div>
<div id="navl"></div><div id="navr"></div>
</body>

0

Вы не идиот, вы просто учитесь, мы все начали где-то. Я все еще в темноте о чем-то кроме CSS, поэтому ...

В любом случае, вы указываете свое позиционирование в%, которое будет работать только в том случае, если высота и ширина родительского контейнера указаны ранее. Попробуйте указать ширину и высоту тела до 100% или лучше, создайте контейнер div, вставьте в него все остальные div и укажите этот контейнер div равным 100% как по высоте, так и по ширине. Кроме того, у вас есть точка с запятой, отсутствующая после спецификации ширины #backgroundbox.

0

Я думаю, у меня есть решение для вас:

Попробуй:

<!DOCTYPE html>
<html>

<head>
    <title>ASGD</title>
    <link rel="shortcut icon" href="https://i.imgur.com/Ug8Tx59.png">
    <style>
        body {
            background-image: url("http://res.freestockphotos.biz/pictures/8/8990-close-up-of-a-green-hedge-pv.jpg");
        }

        #backgroundbox {
            width: 100% position: absolute;
            margin: auto;
            height: 150px;
            background-color: #66ff66;
            border: 15px solid #00cc00;
        }

        #navl {
            background-color: #66ff66;
            border: 15px solid #00cc00;
            border-top-width: 0px;
            position: absolute;
            left: 0.6%;
            height: 75px;
            width: 100px;
        }

        #navr {
            background-color: #66ff66;
            border: 15px solid #00cc00;
            border-top-width: 15px;
            border-top-width: 0px;
            position: absolute;
            right: 0.6%;
            height: 75px;
            width: 100px;
        }
    </style>
</head>

<body>
    <div id="backgroundbox"></div>
    <div id="navl"></div>
    <div id="navr"></div>
</body>

</html>

Вот ссылка предварительного просмотра: https://codepen.io/ziruhel/pen/zPYgZa

HTML, CSS,
Похожие вопросы
Яндекс.Метрика