CSS отказывается отображаться на моей странице. Проблема с каталогом? WebPack?

ProgramBox

CSS отказывается отображаться на моей странице. Проблема с каталогом? WebPack?

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css #intellij-idea #webpack

#javascript #HTML #css #intellij-idea #webpack

Вопрос:

Я уверен, что это что-то простое, но я погуглил слишком много разных решений, чтобы понять, где я ошибся сейчас. Я планирую сделать это полноценным сайтом в свое время, но я все еще новичок. Приветствуется любая помощь. Вот заголовок и навигация, за которыми следует css, с которым я возился

 /*General Styles*/
body{
  padding: 0;
  margin: 0;
  background-color: #007bff;

}
header nav #left{
  background: #0f6674;
  color: #f2f2f2;
  padding-top: 50px;
  min-height: 70px;
  border-bottom: #c82333;
}

header nav {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 14px;
}
header ul{
  padding: 0;
  margin: 0;
}
header li{
  float: left;
  display: inline;
  padding: 0 20px 0 20px;
}
/*Positions Container*/
.container{
  position:relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}

 <!doctype HTML>

<html>

<head>
  <title> Artistic Audio amp; Visual D.C. </title>
  <meta name="description" content="Distributed Home Systems"/>
  <meta name = "author" content ="Elishua S. Brown"/>
  <meta name="authorURL" content="http://www.artavdc.com/index.html"/>

  <!--Mobile Specific-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Internet Explorer-->
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>

  <!--Bootstrap-->
  <link href="bootstrap.css" rel="stylesheet"/>

  <!-- Reset page styles amp; Add Custom Styles-->
  <link href="Styles.css" rel="stylesheet" />
  <link href="Reset.css" rel="stylesheet" />
  <script	src="Homepage.js"> </script>


  <title> Artistic Audio/Visual | Welcome! </title>
</head>

  <body>

  <header>

  <!--Navigation Bar-->
    <!--Add Logo to SRC-->
  <img src= "src/img/Artav-logo-w.jpg" id="logo" alt="" />

    <div id= NavBarImg"></div>



      <nav>

        <ul id="left">

          <h1>You Imagine It, We Create It</h1>
          <li><a href="Artistic Home.html">Artistic Home</a></li>
          <li><a href="Audio.html">Audio Installation</a></li>
      


        </ul>
        <ul id="right">
          <li><input type="search" id="navSearch" placeholder="Search"></li>

          <h2>Subscribe to Recieve Special Offers amp; Updates</h2>

          <form>
            <input type="text" placeholder="Company Name.."/>
            <input type="email" placeholder="Email.."/>
            <button type="submit">Subscribe</button>


          </form>

          <!--Add link to Appointment Request Form-->
          <li><a href="">Request Appointment</a></li>



        </ul>

    </nav> <!--End Nav-->

Насколько мне известно, я закрыл и правильно использовал все теги. Это должно быть что-то довольно простое, я не совсем уверен.

1. На самом деле я не знаю, в чем ваша проблема, но, судя по предоставленным файлам, я думаю, что это работает хорошо. если ваш reset.css удаляет все стили в других файлах, поместите его поверх вашего импорта.

2. Находятся Styles.css и Reset.css в той же папке, что и ваш index.html файл? Кроме того, как они выглядят?

3. Не знаю, что именно вы предлагаете. Куда вы включили таблицу стилей? Это Styles.css ? Является ли css встроенным? Вы использовали <style> теги для встроенного css? Можете ли вы показать нам jsfiddle ? В чем именно проблема?

4. @Fr0zenFyr Если бы OP мог привести свой пример, используя фрагменты здесь, это было бы еще лучше 😉

5. C:UserselishIdeaProjectsArtisticAVDCsrcCSSStyles.css C:UserselishIdeaProjectsArtisticAVDCsrcCSSReset.css C:UserselishIdeaProjectsArtisticAVDCArtistic Home.html Это пути, которые я скопировал из intellij.

Ответ №1:

Вы должны использовать ./Reset.css , когда хотите включить файлы, которые находятся в том же каталоге.

Если ваши файлы находятся в другом каталоге, вы должны использовать ./css/Reset.css .

Также имейте в виду, что ваши файлы должны называться с прописными буквами, если вы хотите, чтобы это работало.

Основываясь на ваших путях, которые вы оставили в комментариях, вы должны включить их следующим образом:

 ./src/CSS/Styles.css

1. Где задокументировано? Любая цитата? Тогда мои веб-сайты работают на magic… Ни мои имена файлов не начинаются с верхнего регистра, ни я не использую ./ в path

2. @Fr0zenFyr URL-адреса чувствительны к регистру, поэтому, когда вы включаете файл css, по сути, вы вызываете URL-адрес. В Windows это не будет проблемой, даже если оболочка неправильная, но на большинстве серверов Linux да. Если вы используете сервер Linux и ваши файлы имеют имена в нижнем регистре, а вы вызываете их в верхнем регистре, вы получите ошибку 404

3. Имена файлов чувствительны к регистру, да, но в вашем ответе нигде не говорится о чувствительности к регистру… Это скорее предполагает, что имена файлов должны быть заглавными буквами, чтобы они работали, что абсолютно неверно. Более того, ./ просто означает из текущего каталога. Это работает абсолютно нормально без ./ Если только вы не хотите включить файл, для поиска которого серверу требуется дерево каталогов, для чего затем требуется .. /, .. / .. и так далее.

4. @Fr0zenFyr пожалуйста, внимательно прочитайте, в чем был вопрос. Из своего кода он пытается включить Styles.css итак, я сказал, что файл должен быть заглавным, потому что он пытается включить его как Styles.css, а не styles.css, так что мое предложение здесь правильное. Если вы вводите Styles.css, то ваш файл должен быть заглавным.

5. я сомневаюсь, что проблема заключалась в заглавных буквах. Я думаю, что мои каталоги были скопированы, поэтому я собираюсь добавить определенные пути к файлам и запустить webpack и сообщить вам, как это получается. Спасибо, ребята, я знаю, что это был очень краткий вопрос