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
1 час назад, Svetlana_P сказал:

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

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

Link to comment
Share on other sites
  • 0
Svetlana_P Explorer

Svetlana_P

Posted
Posted
1 час назад, TEO_911 сказал:

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

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

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
18 часов назад, TEO_911 сказал:

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

Уточните, про какие именно правила речь. 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
1 час назад, SelenIT сказал:

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

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

Вот оно как! Я не знал про наследуемые и не наследуемые свойства 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 не отрисовывает маркеры?
      Вроде на дримвивере написан, хотя хз))

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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