CSS file is only running part of the code

2 New Member

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

  
<html> 

<head>

<link rel="stylesheet" href="GithubTestCSS.css">
 
    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>

        <div class="main-text">

            <p> text</p>

            <p> text</p>

            <p> text </p>

            <p> text </p>

            <p> text </p>
 
        </div>
 
</head>

<body>
 
  <header class="header" role="banner">
 
  <div class="logo">

    <a href="#">Home</a>

  </div>
 
  <div class="nav-wrap">

    <nav class="main-nav" role="navigation">
 
      <ul class="unstyled list-hover-slide">
 
        <li><a href="#">Poems</a></li>

        <li><a href="#">Collages</a></li>

        <li><a href="#">Art</a></li>

        <li><a href="#">Infographics</a></li>
 
      </ul>
 
    </nav>

   </div>
 
</head>

</body>

</html>

Expand|Select|Wrap|Line Numbers

  
  .bg-text {

  position: center;

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */

  color: white;

  font-weight: bold;

  font-size: 28px;

  border: 5px solid #f1f1f1; 

  position: fixed;

  margin-right: 50px;

  margin-top: 50px;

  margin-bottom: 20px;

  padding: 5px; 

}
 
  .unstyled a {

    text-decoration: none;

  }
 
  .list-inline {

    overflow: hidden;

  }

  .list-inline li {

    float: left;

  }
 
  .logo {

    font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;

    text-align: center;

    padding: 0;

    margin: 0;

  }
 
  /* The logo (top of sidebar*/
 
  .logo a {

    display: block;

    padding: 1em 0;

    color: #03A062;

    text-decoration: none;

    transition: .75s linear color;

  }
 
  /* The sidebar */
 
  .main-nav ul {

    border-top: solid 1px #3C3735;

  }

  .main-nav li {

    border-bottom: solid 1px #3C3735;

  }

  .main-nav a {

    padding: 1.1em 0;

    color: #03A062;

    font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;

    text-align: center;

  }

  .main-nav a:hover {

    color: #03A062;

  }
 
  .list-hover-slide li {

    position: relative;

    overflow: hidden; 

  }

  .list-hover-slide a {

    display: block;

    position: relative;

    z-index: 1;

    transition: .75s ease color;

  }

  .list-hover-slide a:before {

    content: '';

    display: block;

    z-index: -1;

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    border-right: solid 5px #03A062;

    background: #3C3735;

    transition: .75s ease left;

  }

  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {

    left: 0;

  } 

  .testing-text{

      text-align: center;

      color: #fff;

  }

Please help me in this

Jan 24 '22 #1

Subscribe Reply

11086

NeoPa

32,568

Recognized Expert Moderator MVP

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

644

Recognized Expert Contributor

Expand|Select|Wrap|Line Numbers

<html>

<head>

<link rel="stylesheet" href="GithubTestCSS.css">

    <h1 style="text-align:center; color: #fff; font-size: 40px;  font-family: Comic Sans MS; margin-left: 425px; "> Text <h1>

        <div class="main-text">

            <p> text</p>

            <p> text</p>

            <p> text </p>

            <p> text </p>

            <p> text </p>

        </div>

</head>

<body>

  <header class="header" role="banner">

  <div class="logo">

    <a href="#">Home</a>

  </div>

  <div class="nav-wrap">

    <nav class="main-nav" role="navigation">

      <ul class="unstyled list-hover-slide">

        <li><a href="#">Poems</a></li>

        <li><a href="#">Collages</a></li>

        <li><a href="#">Art</a></li>

        <li><a href="#">Infographics</a></li>

      </ul>

    </nav>

   </div>

</head>

</body>

</html>

Expand|Select|Wrap|Line Numbers

  .bg-text {

  position: center;

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0, 0.6); /* Black w/ slight opacity see-through */

  color: white;

  font-weight: bold;

  font-size: 28px;

  border: 5px solid #f1f1f1;

  position: fixed;

  margin-right: 50px;

  margin-top: 50px;

  margin-bottom: 20px;

  padding: 5px;

}

  .unstyled a {

    text-decoration: none;

  }

  .list-inline {

    overflow: hidden;

  }

  .list-inline li {

    float: left;

  }

  .logo {

    font: 100 1em "Source Sans Pro", Helvetica, Arial, sans-serif;

    text-align: center;

    padding: 0;

    margin: 0;

  }

  /* The logo (top of sidebar*/

  .logo a {

    display: block;

    padding: 1em 0;

    color: #03A062;

    text-decoration: none;

    transition: .75s linear color;

  }

  /* The sidebar */

  .main-nav ul {

    border-top: solid 1px #3C3735;

  }

  .main-nav li {

    border-bottom: solid 1px #3C3735;

  }

  .main-nav a {

    padding: 1.1em 0;

    color: #03A062;

    font: 400 1.125em "Source Sans Pro", Helvetica, Arial, sans-serif;

    text-align: center;

  }

  .main-nav a:hover {

    color: #03A062;

  }

  .list-hover-slide li {

    position: relative;

    overflow: hidden;

  }

  .list-hover-slide a {

    display: block;

    position: relative;

    z-index: 1;

    transition: .75s ease color;

  }

  .list-hover-slide a:before {

    content: '';

    display: block;

    z-index: -1;

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    border-right: solid 5px #03A062;

    background: #3C3735;

    transition: .75s ease left;

  }

  .list-hover-slide a.is-current:before, .list-hover-slide a:hover:before {

    left: 0;

  }

  .testing-text{

      text-align: center;

      color: #fff;

  }

- 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

Similar topics

1632

VBE window switches between (Running) and (Code) when saving a form module

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 save button and instead of a quick save, the VBE window spends at least a minute jittering between (Running) and (Code). By this I mean that you can see two alternative messages in the title bar of the VBE window (ESG is the project name):

Microsoft Access / VBA

1780

Very strange error when running debug code

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 to perform some calculations. After some number of iterations, randomly, I'll get an uncaught NullValueException error on one of these calls, as if the class name is being treated as an object reference and is null. Here is some psuedo-code to...

C# / C Sharp

1285

NOT possible running .NET code locally in IE????

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 ... using the OBJECT tag and CLASSID all works fine when I upload it to a webserver... but trying to run it locally without IIS the object till not execute (why should I use IIS btw when it's 100% clientcode?) I've read that CLASSID only support...

C# / C Sharp

5414

Running C++ code in VC++.Net

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 find the standard C++ library. And the question is what do I need to do in order to run the C++ code in VC++.Net and get it working or can I do it at all. What should I do with the not found getopt.h library?

.NET Framework

2805

Read a file, knowing only a part of its name

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 pc, for example PC7 has xxx-yyyy-zz1.ext PC5 has xxx-yyyy-zz2.ext PC3 has xxx-yyyy-zz8.ext

Visual Basic .NET

2285

Running ASP code with response.write

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 Content

ASP / Active Server Pages

1060

How to make only a part of the cell text in datagrid bold ??

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

.NET Framework

1144

Adding Project file to existing web code

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 way I can easily add a project file and have it take in all the existing web application code?

.NET Framework

1644

Alarming message when running Python code

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 utility which I wrote myself and which crawls through a directory comparing all possible pairs of files. Under Windows it works fine, while the same code under Linux (Fedora Core 3) works for a while then starts continuously throwing up the following...

Python

1771

while running this code, i encounter a nullpointerexception.

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 import="java.io.*" %> <%@ page import="java.util.*" %> <%@ page language="java" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

Java

8440

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8352

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

8863

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8780

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

7378

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6189

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

2765

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2005

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

1763

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General