Jump to content
  • 0

Помощь по СSS.

TEO_911

Asked by TEO_911,

 Share

Question

TEO_911 Explorer

TEO_911

Posted
Posted (edited)

Подскажите плиз! Почему я создаю в HTML тег " " в него закладываю "UL" и LI, а в "LI" текст которому хочу придать нужное изображение. В CSS делаю селектор - .menu, прописываю туда правила, но почему то это не влияет на LI, что бы изменить текст, мне приходится прописывать правила непосредственно для "LI". в чем причина?, и как сделать так что бы правила для блока .menu распространялись на текст внутри его? Ведь LI я хотел добавить еще в некоторые блоки уже с другими правилами. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MySite</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="text/style.css">
  </head>
  <body>
    <header class="page-header--home">
      <div class="menu">
        <ul>
          <li>Группа творчества</li>
          <li>Статьи</li>
          <li>Форум</li>
          <li>Видео</li>
          <li>Вход</li>
        </ul> 
      </div>      
    </header>               
    </div>
    <div class="avtorizacia">
      <input type="submit" name="Поиск">       
    </div>
  </body>
</html> 
	
body{
	background-image: url(..//img/MS3.jpg);
	max-width: 1920px;
	margin: 0;
     margin-top: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     margin-left: 0px;	
}
.page-header--home{
	position: relative;	
	background-image: url(..//img/MS4.jpg);
	width: 1920px;
    height: 80px;
    margin-top: 0px;
}
ul{
	position: relative;
	margin: 0px;
}
li{
	display: inline;	
    font-size: 32px;
	font-family: "Tahoma";
    font-weight: 800;
    color: #45a8ff;
    margin: 0px;
      margin-top: 5px;
      margin-left: 80px;
      margin-right: 80px;
}
.avtorizacia{
	position: relative;
	background-color: rgba(31, 16, 16, 0.75);
	max-width: 80px;
	height: 250px;
	margin-top: 100px;
}

 

 

 

Edited by TEO_911
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
TEO_911 Explorer

TEO_911

Posted
  • Author
Posted
  On 7/27/2017 at 11:46 AM, Svetlana_P said:

Привет! Выложите код в песочницу https://jsfiddle.net/ , пожалуйста . Так будет проще посмотреть Ваш вопрос

Expand  

Ммм, ну я скопировал туда HTML и CSS, а дальше что?) Скинуть скрин? Или можно как то ссылку дать? Я просто впервые пользуюсь этим ресурсом, так же как и данным форумом)

Link to comment
Share on other sites
  • 0
Svetlana_P Explorer

Svetlana_P

Posted
Posted
  On 7/27/2017 at 12:59 PM, TEO_911 said:

Ммм, ну я скопировал туда HTML и CSS, а дальше что?) Скинуть скрин? Или можно как то ссылку дать? Я просто впервые пользуюсь этим ресурсом, так же как и данным форумом)

Expand  

Научиться надо :) Вводите код, потом нажимаете слева вверху на кнопку Save (значит "Сохранить"). Тогда автоматически формируется ссылка на страницу. Ее копируйте и давайте сюда.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
  On 7/27/2017 at 11:19 AM, TEO_911 said:

прописываю туда правила, но почему то это не влияет на LI ... в чем причина?

Expand  

Уточните, про какие именно правила речь. CSS-свойства бывают наследуемые и ненаследуемые, первые (font-size, color и т.п.) распространяются на потомков по умолчанию, вторые (display, padding и т.п.) — нет, их надо указывать явно. Подозреваю, что дело в этом.

В примере на jsfiddle я стилей для .menu почему-то не наблюдаю. Возможно, они в файле style.css (который не загружается, т.к. указан относительный путь, а на сервере jsfiddle.com такого файла нет)? Лучше скопировать содержимое этого файла (как минимум, то, что относится к .menu) прямо в панель CSS в самом примере.

Link to comment
Share on other sites
  • 0
TEO_911 Explorer

TEO_911

Posted
  • Author
Posted
  On 7/28/2017 at 6:15 AM, SelenIT said:

Уточните, про какие именно правила речь. CSS-свойства бывают наследуемые и ненаследуемые, первые (font-size, color и т.п.) распространяются на потомков по умолчанию, вторые (display, padding и т.п.) — нет, их надо указывать явно. Подозреваю, что дело в этом.

В примере на jsfiddle я стилей для .menu почему-то не наблюдаю. Возможно, они в файле style.css (который не загружается, т.к. указан относительный путь, а на сервере jsfiddle.com такого файла нет)? Лучше скопировать содержимое этого файла (как минимум, то, что относится к .menu) прямо в панель CSS в самом примере.

Expand  

Вот оно как! Я не знал про наследуемые и не наследуемые свойства CSS, подозреваю, что дело действительно в этом!

Link to comment
Share on other sites

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

    • pryanya.darrrya
      Боковое навигационное меню
      By pryanya.darrrya
      Здравствуйте ! 
      Нужна ваша помощь . Не знаю как сделать такой стиль для меню ( отметила стрелочками на фотографии)
      Нужен стиль элементов меню   , вертикальной линии с маркерами как на фото . Буду рада любой помощи.

    • Bourdun
      Проблема с таблицей
      By Bourdun
      Не знаю как это объяснить, смотрите на скриншоты. Как решить эту проблему?
       


    • maxfloyd
      Как сделать высоту "a" по высоте родителя ul
      By maxfloyd
      Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно)

      Код: https://jsfiddle.net/aemjkhp9/
    • Vasilyyy
      Добавление и удаление классов по клику
      By Vasilyyy
      Доброго времени суток. Я начинающий в изучении JavaScript. Во время моих уроков я столкнулся с проблемой, которую не могу решить уже 4 дня. Она состоит в том, что при первом клике значок переворачивается на 180 градусов направо, а по следующему клику он должен крутиться в реверсе. В чем я допустил ошибку?    Вот код, который я использовал в письменном виде: 
      <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <button id="animStart" onclick="itemSpin();itemSpinRev();"><span id="burger">☰</span></button>     <script type="text/javascript">         function itemSpin(normal) {         animStart.classList.add('anim');         var start = getMilliseconds(ms);         var spinner = getMilliseconds(ms) - start;         if(spinner >= 400) {             animStart.classList.remove('anim');             // animStart.classList.add('animate');             // // animStart.classList.toggle('animate');         } };         function itemSpinRev(reverse) {             animStart.classList.add('animate');         var start = getMilliseconds();         var reverse = getMilliseconds() - start;         if(reverse >= 400) {             animStart.classList.remove('animate');          } };     </script> </body> </html> body {     background: #4f5a6e;     margin: 0;     padding: 0; } #animStart {     position: absolute;     background-color: #4f5a6e;     margin-left: 10px;     margin-top: 10px;     border: none;     font-size: 20px;     cursor: pointer;     outline: none; } #animStart.anim {     animation-name: spin;     animation-duration: 0.4s;     animation-timing-function: linear; } #animStart.animate {     animation-name: spin;     animation-duration: 0.4s;     animation-timing-function: linear;     animation-direction: reverse; } @keyframes spin {     from {         transform: rotate(0deg);     }     to {         transform: rotate(180deg);     } }  


    • leShik
      Помогите чайнику!!!
      By leShik
      Попросили добавить текста немного на сайт. Добавил блок со списком, отображение вот такое

      Какие стили отвечают за такое отображение?
      Его стили на данном этапе))
      div style="position: relative; clear: both;"
      "position: absolute; clear: both; z-index: 1000;" - отображает вот так

      почему "type" для ul не отрисовывает маркеры?
      Вроде на дримвивере написан, хотя хз))
×
×
  • 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