Jump to content
  • 0

блоки ездят куда-то. Что делать?

gars

Asked by gars,

 Share

Question

gars Explorer

gars

Posted
Posted

Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. 

Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. 

и вижу. что блок main наехал на блок header.

Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки).  как решить и почему произошло?     Заранее благодарю всех за помощь

Скрин прикрепляю.   

HTML 

<body>
<header>
  <div class="logo">
    <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img">
  </div>
  <nav>
    <a href="" class="nav" >home</a>
    <a href="" class="nav" >compane</a>
    <a href="" class="nav" >servise</a>
    <a href="" class="nav" >clients</a>
    <a href="" class="nav" >contacts</a>
  </nav>
</header>

<main>
  <div>
    <img src="" class="slaider" alt="slaider">
	<p class="slaider__text__h1">веб-разработке\практика</p>
	<p class="slaider__text__h2"></p>
  </div>
</main>

<footer>
</footer>

CSS 

body {
margin: 0;
}

header {
	margin: 0;
	border-top: 3px solid black;

}

.logo {
	margin:60,0,60,60; 
	float: left;
	width: 49%;
}
nav { 
float: right;
margin: 60,60,60,0;
width: 51%;

}

 

1111.png

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

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

  • Similar Content

    • ilyamio
      Помощь с javascript и загрузкой данных
      By ilyamio
      Здравствуйте. Имеется рабочий скрипт конвертера валют. https://ilyamio.github.io/currencyconverter/
      Мне необходимо изменить источник загрузки курсов на ЦБ РФ вот по этой ссылке: https://www.cbr.ru/scripts/XML_daily.asp
      А также мне необходимо установить ограничение на количество обращений к сайту ЦБ РФ - 1 раз в сутки. При частом обращении, могут заблокировать.
      Вот в этом js файле находятся настройки конвертера:
      const from_currencyEl = document.getElementById('from_currency'); const from_ammountEl = document.getElementById('from_ammount'); const to_currencyEl = document.getElementById('to_currency'); const to_ammountEl = document.getElementById('to_ammount'); const rateEl = document.getElementById('rate'); const exchange = document.getElementById('exchange'); from_currencyEl.addEventListener('change', calculate); from_ammountEl.addEventListener('input', calculate); to_currencyEl.addEventListener('change', calculate); to_ammountEl.addEventListener('input', calculate); exchange.addEventListener('click', () => { const temp = from_currencyEl.value; from_currencyEl.value = to_currencyEl.value; to_currencyEl.value = temp; calculate(); }); function calculate() { const from_currency = from_currencyEl.value; const to_currency = to_currencyEl.value; fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency}`) .then(res => res.json()) .then(res => { const rate = res.rates[to_currency]; rateEl.innerText = `1 ${from_currency} = ${rate} ${to_currency}` to_ammountEl.value = (from_ammountEl.value * rate).toFixed(2); }) } calculate(); Как мне изменить настройки в этом файле чтобы курсы брались с https://www.cbr.ru/scripts/XML_daily.asp и включить ограничение на количество обращений по ссылке cbr.ru - 1 раз в сутки?
      Заранее спасибо всем, кто хотел помочь с решением этой задачи.
    • Vetal6666
      Я не знаю как "Это" создать многое перепробовал - не получилось.
      By Vetal6666
      Как в верстке создать этот объект?🤔 (Углы по 60 градусов - то есть треугольник равносторонний)
    • intman
      Блоки как геометрические фигуры
      By intman
      Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм.   И составил  их в столбец, обернув все в общий блок.
      <div class="d4"> <div class="d1"></div> <div class="d5"></div> <div class="d3"></div> </div> Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело.
      Код CCS  такой
      Треугольник сверху
      width: 0; height: 0; border-top: 100px solid #68B8AE; border-right:425px solid transparent; display:inline-block; margin-top:600px; параллелогамм
      -moz-transform: rotate(76deg) skew(7deg, 15deg); -webkit-transform: rotate(76deg) skew(7deg, 15deg); -o-transform: rotate(76deg) skew(7deg, 15deg); -ms-transform: rotate(76deg) skew(7deg, 15deg); transform: rotate(76deg) skew(7deg, 15deg); width:250px;  height:450px; border:4px solid #8B0000; background:#7FFF00;  margin-left:86px; треугольник снизу
      width: 0; height: 0; border-bottom: 100px solid red ; border-left: 425px solid transparent; margin-bottom:700px; display:inline-block; }  
    • Рудской
      Помогите с отправкой информации на другую страницу сайта.
      By Рудской
      У меня есть таблица на первой странице сайта
      Вот к примеру она....
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <select name="school" id="schoolContainer"> <option value="Код" selected>Код</option> <option value="10-0">10-0</option> <option value="10-1">10-1</option> <option value="Grandview">Grandview</option> <option value="Festus">Festus</option> <option value="R-7">R-7</option> <option value="Home-Schooled">Home-Schooled</option> </select> <input type="text" id="newSchool"/> <input type="button" id="addSchool" value="Insert"/> Мне нужно чтобы при нажатии на кнопу "Insert", информация которая была введена в поля для ввода отправлялась на другую страницу сайта.
      И каждая новая информация отправлялась, в таблицу, примерно вот такую:
      Пункт 1 | Пункт 2 | Пункт 3 | №1 Купил Завершено Типо, Когда в первой графе выбирают докустим "№1", то этот выбор писался в "Пукт 1". Так же и с остальными, если во второй графе выбирают "Купил" то этот же выбор писался в "Пункт 2... Помогите пожалуйста, никак не могу найти в интернете ответ на сей вопрос...
      Или, если кто-то сможет сделать пример всего это, я буду очень благодарен
    • Gora
      Атрибут disabled
      By Gora
      Доброго времени суток, при написании одного из макетов встала проблема, нужно связать форму input с кнопкой, то есть задав параметр ввода через pattern="[a-z]{1,26}".
      Нужно сделать так чтобы при неправельно заполнены форме кнопка было не активной.
      <h2>Введіть Ключ</h2> <input id="key" class="form-control" pattern="[a-z]{1,26}" value="key" placeholder="Писати сюди"> <h2>Введіть слово</h2> <input id="slov" class="form-control" pattern="[a-z]{1,26}" value="hello" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Закодувати" onclick="zakoduvaty5(this);" type="submit"> <h2>Закодоване слово</h2> <input class="form-control" id="zakodslov" readonly> <h2>Введіть код</h2> <input id="zakodslovo" class="form-control" pattern="[0-9 ]{1,50}" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Розкодувати" onclick="rozkoduvaty5(this);" type="submit"> <h2>Розкодоване слово</h2> <input class="form-control" id="rez" readonly>
      примерно так это должно выглядеть, чуть не забыл 1 и 2 форма должны быть связаны.
      Благодарю за внимание, Всего самого лучшего вам.
×
×
  • 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