473,289 Members | 1,791 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,289 software developers and data experts.

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 10922
NeoPa
32,554 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
626 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

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

Similar topics

2
by: Andrew Wrigley | last post by:
Hi I have a database that works OK except in two regards, that I suspect are related. Problem 1. After even minor changes to a form module (ContactFrm), such as editing a comment, I hit the...
2
by: TB | last post by:
I am seeing a very strange problem as follows... I have a loop where a fair amount of processing is going on and near the top of the loop I access a class that has only static helper functions...
1
by: Tobias Nilsson | last post by:
I have almost exactly the same problem as the guy below. Is it NOT possible running .NET code locally in Internet Explorer WITHOUT a webserver???? I've done some C# code and compiled to a .dll...
2
by: Peter Krikelis | last post by:
Hi, I have a C++ code. I tried to open and run in in VC++.Net and it gave me an error: fatal error C1083: Cannot open include file: 'getopt.h': No such file or directory Somehow it did not...
4
by: Jason | last post by:
I need to open a file for reading, but I only know part of it's name. The file I want to read is in the format of xxx-yyyy-zzz.EXT The last three digits of the file name are different on each...
5
by: JoeW | last post by:
Hi, I'm trying to create an ASP page which gets its content from a txt file. eg. I have a txt file which contains this: <html> <head> <title>PageTitle</title> </head> <body> Page...
0
by: thunder6 | last post by:
Hi, Can anyone please help me to make only a part of the text in a DataGridView cell bold, it shud look like this Size(in KB). Im trying to do this in a windows application Thank you
0
by: John A. Bailo | last post by:
I have a web application project that (after it was moved) got into a state where it has no project file. It's part of a solution but the project header just points to a directory. Is there a...
2
by: peter | last post by:
I'm not sure if this query should be directed to comp.lang.python or comp.os.linux.misc so I intend to post it to both with apologies if it's inappropriate on either. I have a small python...
1
by: soumen dey | last post by:
while running this code java.lang.nullpointerexception is showing. how to overcome? <%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@ page import="java.sql.*" %> <%@ page...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.