Первый простой сайт на html + css

html · 22.12.2018, 04:45

Доброго утра, Дамы и Господа. Создаю первый простой, но полезный сайт. Возникли проблемы.
Идея:
Создать сайт-навигацию, чтобы мне удобно было ориентироваться в интернете, чисто под себя.
Сайт хочу сделать просто из строк с названиями категорий, а дальше разные ссылки + фоновая картинка. Формат такой:
Название категории: ссылка№1, ссылка№2, ссылка№3

Строчки такие:

Поисковики: Яндекс Google Mail.Ru

Карты: GoogleMaps ЯндексКарты 2gis

Мессенджеры и vk.com: VK Whatsapp Телеграм

......

Но у меня и эти три строчки не получилось разместить.

Вот здесь то, что вышло https://codepen.io/Nikolaevi4/pen/bOqmjg, очень коряво и я не очень понимаю - в чем ошибки. Даже картинку фоном не удалось поставить.

Или сюда могу код скопировать:

html

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>Структура</title>
   <link rel="stylesheet" href="css/main.css">
</head>
  <body>
     <header>  
        <div class="container">   
           <nav>
              <ul class="container">
                 <li > 
                    <a href="#">Поисковики: </a>
                 </li>
                 <li>
                    <a href="https://yandex.ru/">Яндекс</a>
                 </li>
                 <li>
                    <a href="https://www.google.com/"> Google</a>
                 </li>
                 <li>
                    <a href="https://mail.ru/"> Mail.ru
                    </a>
                 </li>
                 <li>
                    <a href="https://www.rambler.ru/">Rambler
                    </a>
                 </li>
              </ul>
           </nav>
        </div> 
         </header>

     <section> 
     <div class="shta">   
           <nav>
              <ul class="menu">
                 <li>
                    <a  href="#">Карты</a>
                 </li>
                 <li>
                    <a href="https://yandex.ru/">Гугл Карты</a>
                 </li>
                 <li>
                    <a href="https://www.google.com/"> Яндекс Карты</a>
                 </li>
                 <li>
                    <a href="https://mail.ru/">2gis</a>
                 </li>
              </ul>
           </nav>
        </div> 

        <div class="kaktak?">   
           <nav>
              <ul class="menu">
                 <li>
                    <p>Мессенджеры и vk.com:</p>
                 </li>
                 <li>
                    <a href="vk.com">VK</a>
                 </li>
                 <li>
                    <a href="https://web.whatsapp.com/"> Whatsapp</a>
                 </li>
                 <li>
                    <a href="https://web.telegram.org/#/im">Телеграм</a>
                 </li>
              </ul>
           </nav>
        </div> 

     </section>
     <section> 
        <div class="container"></div> 
         </section>
     <section> 
       <div class="container">
          
       </div> 
     </section>
     <footer>   
      </footer>

   
 
  </body>
</html>

css

Код:

body {
   font-family: Georgia, sans-serif;
   padding: 0;
   margin: 0;
   color: #222222;
}
body{
   background: url(=".../img/palma.jpg");
}
.container   {
   width: 1000px ;
   margin: 0 auto;
   padding: 20px;
}
.menu {
   padding: 0px;
   margin-top: 20px;
   display:block;
}
.menu li {
   float:left;
   display:block; 
   margin-right: 25px;
}
.experiment{ 
color: red
}
.shta {

}
 }
 .shta li a {
    width: 1000px ;
   margin: 0 auto;
   padding: 20px;
    color:black;
 }
 .kaktak? li a {
    width: 1000px ;
   margin: 0 auto;
   padding: 20px;
    color:green;
 }
  

kotenok gav · 22.12.2018, 06:56

Так а чего вы используете li, если у вас все в строчку?

html · 22.12.2018, 14:02

kotenok gav в сообщении #1363047 писал(а):

Так а чего вы используете li, если у вас все в строчку?

А какая есть альтернатива?

rockclimber · 22.12.2018, 15:30

kotenok gav в сообщении #1363047 писал(а):

Так а чего вы используете li, если у вас все в строчку?

li тоже можно сделать в строчку. Все элементы делятся на строчные и блочные, строчные идут один за одним, блочные - каждый с новой строки. Превратить строчный в блочный или наоборот можно с помощью css свойства display:
display: block; - сделать элемент блочным,
display: inline; - сделать строчным.

html в сообщении #1363087 писал(а):

А какая есть альтернатива?

"Альтернатива - это утки" (с) анекдот
С тех пор, как придумали flex, лучше все делать на нем, а всякие display: inline-block;, margin: auto; и прочие древности забыть как страшный сон. Вот тут вкратце написано с примерами и демками: https://html5.by/blog/flexbox/ Минут 20 вдумчивого чтения, и вот вы уже ас верстки :mrgreen:

-- 22.12.2018, 13:35 --

html в сообщении #1363044 писал(а):

Даже картинку фоном не удалось поставить.

Конечно не удалось, URL у вашей картинки (.../img/palma.jpg), даже если бы и был корректным урлом (а пока он даже не корректный), ссылается на сам сайт codepen.io, а там такой картинки нет. Чтобы картинка отображалась, изображение должно быть доступно с компьютера, на котором просматривается страница. То есть это должно быть что-то вроде https://mysite.com/img/palma.jpg

-- 22.12.2018, 14:16 --

html в сообщении #1363044 писал(а):

Знак вопроса может быть частью имени класса?

html в сообщении #1363044 писал(а):

Код:

.menu li {
float:left;
display:block; 
margin-right: 25px;
}

Здесь сделайте display: inline-block;

html в сообщении #1363044 писал(а):

Код:

Все ul у вас имеют более-менее одинаковое назначение, сделайте им всем один класс, лучше всего menu.
И вообще, у вас куча лишних div, section и nav. Выкиньте всё и начните с нуля, добавляйте только то, что точно нужно и без этого никак.

html · 22.12.2018, 16:43

Спасибо большое! Но почему-то не помогли дисплей-инлайн, ничего не поменялось...

Код:

body {
   font-family: Georgia, sans-serif;
   padding: 0;
   margin: 0;
   color: #222222;
}
body{
   background: url(=".../img/palma.jpg");
}
.container   {
   width: 1000px ;
   margin: 0 auto;
   padding: 20px;
}
.menu {
   padding: 0px;
   margin-top: 20px;
   display:inline;
}
.menu li {
   float:left;
   display:inline; 
   margin-right: 25px;
}
.experiment{ 
color: red
}
.shta {

}
 }
 .shta li a {
    width: 1000px ;
   margin: 0 auto;
   padding: 20px;
    color:black;
    display:inline;
 }
 .kaktak? li a {
    width: 1000px ;
   margin: 0 auto;
   padding: 20px;
    color:green;
    display:inline;
 }
  

rockclimber · 22.12.2018, 16:47

Давайте сначала: что вы читали по теме?

html в сообщении #1363134 писал(а):

Но почему-то не помогли дисплей-инлайн, ничего не поменялось...

Если это единственное, что вы исправили, то ничего и не должно было поменяться.
И когда исправляете что-то, давайте ссылку на исправленную версию на codepen.io. Просто разглядывать текст вашего CSS неинтересно.

-- 22.12.2018, 14:49 --

html в сообщении #1363134 писал(а):

.menu li {

Контрольный вопрос: к каким элементам в вашем HTML файле будет применен этот стиль?

Научный форум dxdy

Первый простой сайт на html + css