470,590 Members | 2,080 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,590 developers. It's quick & easy.

CSS file is only running part of the code

I'm building a website, but my HTML and CSS are bugging me. When I load my website through Github Pages, or through local files, I can see my HTML and it all works perfectly fine. The problem is, only part of my CSS is loading.

On my website, I made a sidebar, and when I tested it through local files it worked fine. Yesterday I opened Notepad++ (I can't install VSCode on this computer) and opened my website to test what size font was the best.

When I opened it, some of the CSS didn't work. My background image is gone, and my sidebar was moved to under my text, and also it expanded the entire screen. Also, all of my colours were removed from my sidebar. I tried this with GitHub pages, but it was also bugged there with defect tracking tools.

Some of my CSS is still working, but around half is not working. I made a new CSS and HTML document and copied all of the code, changing the link and it was still bugged.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html> 
  3. <head>
  4. <link rel="stylesheet" href="GithubTestCSS.css">
  5.  
  6.     <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>
  7.         <div class="main-text">
  8.             <p> text</p>
  9.             <p> text</p>
  10.             <p> text </p>
  11.             <p> text </p>
  12.             <p> text </p>
  13.  
  14.         </div>
  15.  
  16. </head>
  17. <body>
  18.  
  19.   <header class="header" role="banner">
  20.  
  21.   <div class="logo">
  22.     <a href="#">Home</a>
  23.   </div>
  24.  
  25.   <div class="nav-wrap">
  26.     <nav class="main-nav" role="navigation">
  27.  
  28.       <ul class="unstyled list-hover-slide">
  29.  
  30.         <li><a href="#">Poems</a></li>
  31.         <li><a href="#">Collages</a></li>
  32.         <li><a href="#">Art</a></li>
  33.         <li><a href="#">Infographics</a></li>
  34.  
  35.       </ul>
  36.  
  37.     </nav>
  38.    </div>
  39.  
  40. </head>
  41. </body>
  42. </html>
  43.  
Expand|Select|Wrap|Line Numbers
  1.  
  2.   .bg-text {
  3.   position: center;
  4.   background-color: rgb(0,0,0); /* Fallback color */
  5.   background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */
  6.   color: white;
  7.   font-weight: bold;
  8.   font-size: 28px;
  9.   border: 5px solid #f1f1f1; 
  10.   position: fixed;
  11.   margin-right: 50px;
  12.   margin-top: 50px;
  13.   margin-bottom: 20px;
  14.   padding: 5px; 
  15. }
  16.  
  17.  
  18.  
  19.  
  20.  
  21.   .unstyled a {
  22.     text-decoration: none;
  23.   }
  24.  
  25.   .list-inline {
  26.     overflow: hidden;
  27.   }
  28.   .list-inline li {
  29.     float: left;
  30.   }
  31.  
  32.  
  33.   .logo {
  34.     font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;
  35.     text-align: center;
  36.     padding: 0;
  37.     margin: 0;
  38.   }
  39.  
  40.   /* The logo (top of sidebar*/
  41.  
  42.   .logo a {
  43.     display: block;
  44.     padding: 1em 0;
  45.     color: #03A062;
  46.     text-decoration: none;
  47.     transition: .75s linear color;
  48.   }
  49.  
  50.  
  51.   /* The sidebar */
  52.  
  53.   .main-nav ul {
  54.     border-top: solid 1px #3C3735;
  55.   }
  56.   .main-nav li {
  57.     border-bottom: solid 1px #3C3735;
  58.   }
  59.   .main-nav a {
  60.     padding: 1.1em 0;
  61.     color: #03A062;
  62.     font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
  63.     text-align: center;
  64.   }
  65.   .main-nav a:hover {
  66.     color: #03A062;
  67.   }
  68.  
  69.  
  70.   .list-hover-slide li {
  71.     position: relative;
  72.     overflow: hidden; 
  73.   }
  74.   .list-hover-slide a {
  75.     display: block;
  76.     position: relative;
  77.     z-index: 1;
  78.     transition: .75s ease color;
  79.   }
  80.   .list-hover-slide a:before {
  81.     content: '';
  82.     display: block;
  83.     z-index: -1;
  84.     position: absolute;
  85.     left: -100%;
  86.     top: 0;
  87.     width: 100%;
  88.     height: 100%;
  89.     border-right: solid 5px #03A062;
  90.     background: #3C3735;
  91.     transition: .75s ease left;
  92.   }
  93.   .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
  94.     left: 0;
  95.   } 
  96.   .testing-text{
  97.       text-align: center;
  98.       color: #fff;
  99.   }
  100.  
Please help me in this
Jan 24 '22 #1
2 8747
NeoPa
32,298 Expert Mod 16PB
Hi CloudyTechi.

Welcome to Bytes.com.

Your post seems fine but you must post technical questions in the appropriate forum. They are never allowed in the Lounge - which is where members hang out and chill, away from all the questions.

Good luck with your question here.

-Ade (Admin).
Jan 24 '22 #2
dev7060
569 Expert 512MB
Expand|Select|Wrap|Line Numbers
  1.  
  2. <html> 
  3. <head>
  4. <link rel="stylesheet" href="GithubTestCSS.css">
  5.  
  6.     <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>
  7.         <div class="main-text">
  8.             <p> text</p>
  9.             <p> text</p>
  10.             <p> text </p>
  11.             <p> text </p>
  12.             <p> text </p>
  13.  
  14.         </div>
  15.  
  16. </head>
  17. <body>
  18.  
  19.   <header class="header" role="banner">
  20.  
  21.   <div class="logo">
  22.     <a href="#">Home</a>
  23.   </div>
  24.  
  25.   <div class="nav-wrap">
  26.     <nav class="main-nav" role="navigation">
  27.  
  28.       <ul class="unstyled list-hover-slide">
  29.  
  30.         <li><a href="#">Poems</a></li>
  31.         <li><a href="#">Collages</a></li>
  32.         <li><a href="#">Art</a></li>
  33.         <li><a href="#">Infographics</a></li>
  34.  
  35.       </ul>
  36.  
  37.     </nav>
  38.    </div>
  39.  
  40. </head>
  41. </body>
  42. </html>
  43.  
Expand|Select|Wrap|Line Numbers
  1.  
  2.   .bg-text {
  3.   position: center;
  4.   background-color: rgb(0,0,0); /* Fallback color */
  5.   background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */
  6.   color: white;
  7.   font-weight: bold;
  8.   font-size: 28px;
  9.   border: 5px solid #f1f1f1; 
  10.   position: fixed;
  11.   margin-right: 50px;
  12.   margin-top: 50px;
  13.   margin-bottom: 20px;
  14.   padding: 5px; 
  15. }
  16.  
  17.  
  18.  
  19.  
  20.  
  21.   .unstyled a {
  22.     text-decoration: none;
  23.   }
  24.  
  25.   .list-inline {
  26.     overflow: hidden;
  27.   }
  28.   .list-inline li {
  29.     float: left;
  30.   }
  31.  
  32.  
  33.   .logo {
  34.     font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;
  35.     text-align: center;
  36.     padding: 0;
  37.     margin: 0;
  38.   }
  39.  
  40.   /* The logo (top of sidebar*/
  41.  
  42.   .logo a {
  43.     display: block;
  44.     padding: 1em 0;
  45.     color: #03A062;
  46.     text-decoration: none;
  47.     transition: .75s linear color;
  48.   }
  49.  
  50.  
  51.   /* The sidebar */
  52.  
  53.   .main-nav ul {
  54.     border-top: solid 1px #3C3735;
  55.   }
  56.   .main-nav li {
  57.     border-bottom: solid 1px #3C3735;
  58.   }
  59.   .main-nav a {
  60.     padding: 1.1em 0;
  61.     color: #03A062;
  62.     font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;
  63.     text-align: center;
  64.   }
  65.   .main-nav a:hover {
  66.     color: #03A062;
  67.   }
  68.  
  69.  
  70.   .list-hover-slide li {
  71.     position: relative;
  72.     overflow: hidden; 
  73.   }
  74.   .list-hover-slide a {
  75.     display: block;
  76.     position: relative;
  77.     z-index: 1;
  78.     transition: .75s ease color;
  79.   }
  80.   .list-hover-slide a:before {
  81.     content: '';
  82.     display: block;
  83.     z-index: -1;
  84.     position: absolute;
  85.     left: -100%;
  86.     top: 0;
  87.     width: 100%;
  88.     height: 100%;
  89.     border-right: solid 5px #03A062;
  90.     background: #3C3735;
  91.     transition: .75s ease left;
  92.   }
  93.   .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {
  94.     left: 0;
  95.   } 
  96.   .testing-text{
  97.       text-align: center;
  98.       color: #fff;
  99.   }
  100.  
- Why are lines 6-14 inside the head?
- Why use inline CSS in line 6? Where's the closing h1?
- Where's the closing header of line 19?
- There's no code that specifies the background image.
- What's with the extra </head> in line 40?

Describe or show the expected result and arrangement.
Jan 26 '22 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Tobias Nilsson | last post: by
2 posts views Thread by Peter Krikelis | last post: by
reply views Thread by John A. Bailo | last post: by
2 posts views Thread by peter | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.