2014 dxdy logo

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

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




Начать новую тему Ответить на тему
 
 Первый простой сайт на html + css
Сообщение22.12.2018, 04:45 


22/12/18
3
Доброго утра, Дамы и Господа. Создаю первый простой, но полезный сайт. Возникли проблемы.
Идея:
Создать сайт-навигацию, чтобы мне удобно было ориентироваться в интернете, чисто под себя.
Сайт хочу сделать просто из строк с названиями категорий, а дальше разные ссылки + фоновая картинка. Формат такой:
Название категории: ссылка№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;
}
 

 Профиль  
                  
 
 Re: Первый простой сайт на html + css
Сообщение22.12.2018, 06:56 


21/05/16
4292
Аделаида
Так а чего вы используете li, если у вас все в строчку?

 Профиль  
                  
 
 Re: Первый простой сайт на html + css
Сообщение22.12.2018, 14:02 


22/12/18
3
kotenok gav в сообщении #1363047 писал(а):
Так а чего вы используете li, если у вас все в строчку?

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

 Профиль  
                  
 
 Re: Первый простой сайт на html + css
Сообщение22.12.2018, 15:30 
Заслуженный участник


06/07/11
5627
кран.набрать.грамота
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 писал(а):
<div class="kaktak?">
Знак вопроса может быть частью имени класса?
html в сообщении #1363044 писал(а):
Код:
.menu li {
float:left;
display:block;
margin-right: 25px;
}
Здесь сделайте display: inline-block;
html в сообщении #1363044 писал(а):
Код:
<ul class="container">
Все ul у вас имеют более-менее одинаковое назначение, сделайте им всем один класс, лучше всего menu.
И вообще, у вас куча лишних div, section и nav. Выкиньте всё и начните с нуля, добавляйте только то, что точно нужно и без этого никак.

 Профиль  
                  
 
 Re: Первый простой сайт на html + css
Сообщение22.12.2018, 16:43 


22/12/18
3
Спасибо большое! Но почему-то не помогли дисплей-инлайн, ничего не поменялось...
Код:
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;
}
 

 Профиль  
                  
 
 Re: Первый простой сайт на html + css
Сообщение22.12.2018, 16:47 
Заслуженный участник


06/07/11
5627
кран.набрать.грамота
Давайте сначала: что вы читали по теме?
html в сообщении #1363134 писал(а):
Но почему-то не помогли дисплей-инлайн, ничего не поменялось...
Если это единственное, что вы исправили, то ничего и не должно было поменяться.
И когда исправляете что-то, давайте ссылку на исправленную версию на codepen.io. Просто разглядывать текст вашего CSS неинтересно.

-- 22.12.2018, 14:49 --

html в сообщении #1363134 писал(а):
.menu li {
Контрольный вопрос: к каким элементам в вашем HTML файле будет применен этот стиль?

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 6 ] 

Модераторы: Karan, Toucan, PAV, maxal, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group