Misc Others Trouble with CSS, for the love of god I need help

[jeffyTheHomebrewer]

Okay, so you may know me from my previous thread about needing help with CSS. This time it's worse.
Why. The fuck. DOES THE CSS BREAK WHEN I MAKE IT EXTERNAL INSTEAD OF INTERNAL?!?!?? What the fuck!
additionally, how the fuck do I make a navbar that doesn't suck ass?

specifically, let me show you what happens.
code with internal css and its result:


Now, the same, EXACT css put into the external css file, still linked properly, with the internal CSS in the HTML removed, and THAT result.

I feel like I'm starting to just go insane.
All I want is something relatively simple like this for the navbar, ENTIRELY in EXTERNAL CSS so I can JUST LINK TO IT FOR EACH PAGE.
(yes I know it doesn't look the best, I threw it together in Paint + Aesprite, okay?)

Simple navbar in the center, with the red/purple endings stretching to the edges of the page, and each button on the navbar darkening when hovered over, with the logo (3 gifs on top of eachother) nice and centered above it.
Am I doing it wrong? Or is it SUPPOSED to be internal CSS? I don't even understand why there's a different result when using internal and external CSS! It's the same code n shit, but in a different location! What makes it go wrong here?
Sorry for being an idiot if I am, but to quote my past self in the page, I feel like homer simpson trying to make Le Grille.
And like last time, there'll be a live preview of the page at:
catboybeebop.neocities.org/pages/main.html
(the CSS file is in catboybeebop.neocities.org/styles/main.css)

 

[Shape]

I would have to see the code for how you are embedding the style sheet in your webpage, but it definitely looks like it's simply not loading your full CSS code. It would be worth it to share your code for how and where you embedded the full CSS (not the small snippet in main.css) & it might be worth it to clear your browser cache to make sure that it hasn't cached an older version of your code.

 

[jeffyTheHomebrewer]

I would have to see the code for how you are embedding the style sheet in your webpage, but it definitely looks like it's simply not loading your full CSS code. It would be worth it to share your code for how and where you embedded the full CSS (not the small snippet in main.css) & it might be worth it to clear your browser cache to make sure that it hasn't cached an older version of your code.

The INTERNAL CSS within the <style> tag of main.html is:

.logo {
  position: relative;
}

.image2, .image3 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* this is bad, dumb code, and more importantly, bad dumb code because it breaks when I put it in the stylesheet (main.css) instead of in here. WTF? */
/* and yes, i took it from w3schools. at this point, why even use a css file? why not just style every html like this? thats how you do it on webtv anyway */
/* but for real, someone please tell me why this breaks when its in the css file and not in the style tag in the html itself, i need to know. */
ul {
  list-style-type: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

It breaks when I put it into main.css.

How I link to the stylesheet, which DOES load and execute because the background is correct and the text is white Helvetica, as specified in the stylesheet:

<link rel="stylesheet" type="text/css" href="/styles/main.css">

And, of course, the main.css as it is currently:

/* Main CSS for the website. For the error pages, there is no CSS for now. */
body {
  background-color: #000000;
  background-image: url("/pages/images/general/background.gif");
  color: #FFFFFF;
  font-family: Helvetica;
}

Post automatically merged: Nov 19, 2022

I would have to see the code for how you are embedding the style sheet in your webpage, but it definitely looks like it's simply not loading your full CSS code. It would be worth it to share your code for how and where you embedded the full CSS (not the small snippet in main.css) & it might be worth it to clear your browser cache to make sure that it hasn't cached an older version of your code.

Additionally, I WOULD refresh the cache, but it seems... unnecessary? Whenever I refresh the page after making an edit, it's immediately there! Guess I'll just clear it anyway though, might be good luck

Edit: If you're on desktop, you can also simply just go to the page and right click, then hit view source to see the raw HTML. As for the CSS file, just go to where I said it was (again, catboybeebop.neocities.org/styles/main.css) and it'll just be displayed raw.

 

[Shape]

I thank you for the specific details. I have been unable to produce the same results you are obtaining, and I have both used the Firefox browser inspector as well as a local system to test your HTML/CSS code.

For real, I would really like to know why this is breaking for you.

 

[jeffyTheHomebrewer]

I thank you for the specific details. I have been unable to produce the same results you are obtaining, and I have both used the Firefox browser inspector as well as a local system to test your HTML/CSS code.

For real, I would really like to know why this is breaking for you.

Me too!
Honestly.. considering how you know CSS... why don't we just try to redo the logo and the navbar from scratch, with main.css housing the styling? (I know 3 gifs on top of eachother is a little stupid, but boy does it look pretty damn good. Plus they have the same dimensions to make em easier to line up properly)

Post automatically merged: Nov 19, 2022

Huh. Odd, apparently clearing the cache DOES fix the CSS stylesheet not loading properly? WTF??? Shouldn't the browser be able to detect if main.css is larger/smaller, and if so use the new version rather than the cached one?

Post automatically merged: Nov 19, 2022

I mean, sure, I am still a bit new to CSS in general, but it's still total BS. But hey, at least I know it wasn't something I did now.

Now if only we could make that navbar the way I want...

 

[Shape]

Huh. Odd, apparently clearing the cache DOES fix the CSS stylesheet not loading properly? WTF??? Shouldn't the browser be able to detect if main.css is larger/smaller, and if so use the new version rather than the cached one?

Whether the browser loads a newer version generally depends on the server's page caching policy. CSS files can be especially bad about getting cached. An easy workaround to avoid clearing-clearing-clearing is to add a request parameter into your page request, such as "yourpage.com/index.html?version=1". As long as you change the value after the equals sign, your browser will almost for-sure fetch fresh copies of all hosted files.

As for making the navbar perform how you want, here is some CSS and Javascript. There are more performant ways to get what you want out of the browser, but this code should do it.

Add this to your CSS:

Spoiler: Insert into main.css

.topbar {
  color:#fff;
  font-size: 2.4em;
  height:1.25em;
  width:100%;
  position:absolute;
  left:0px;
  background-color:#faf;
}
.topbar-left {
  background-color:#f00; /*rgb*/
  width:20%;
  height:100%;
  position:absolute;
  left:0px;
}
.topbar-spacer-orange-on {
  background-color:#e80;
  position:absolute;
  top:0px;
  width:12%;
  left:20%;
  height:100%;
  right:auto;
}
.topbar-spacer-orange-on:hover {
  background-color: #000;
}
.topbar-spacer-orange-off {
  background-color:#940;
  position:absolute;
  top:0px;
  width:12%;
  left:20%;
  height:100%;
  right:auto;
}
.topbar-spacer-orange-off:hover {
  background-color: #000;
}
.topbar-spacer-yellow-on {
  background-color:#db6;
  position:absolute;
  top:0px;
  width:12%;
  left:32%;
  height:100%;
  right:auto;
}
.topbar-spacer-yellow-on:hover {
  background-color: #000;
}
.topbar-spacer-yellow-off {
  background-color:#983;
  position:absolute;
  top:0px;
  width:12%;
  left:32%;
  height:100%;
  right:auto;
}
.topbar-spacer-yellow-off:hover {
  background-color: #000;
}
.topbar-spacer-green-on {
  background-color:#0f0;
  position:absolute;
  top:0px;
  width:12%;
  left:44%;
  height:100%;
  right:auto;
}
.topbar-spacer-green-on:hover {
  background-color: #000;
}
.topbar-spacer-green-off {
  background-color:#0c0;
  position:absolute;
  top:0px;
  width:12%;
  left:44%;
  height:100%;
  right:auto;
}
.topbar-spacer-green-off:hover {
  background-color: #000;
}
.topbar-spacer-cyan-on {
  background-color:#66f;
  position:absolute;
  top:0px;
  width:12%;
  left:56%;
  height:100%;
  right:auto;
}
.topbar-spacer-cyan-on:hover {
  background-color: #000;
}
.topbar-spacer-cyan-off {
  background-color:#33c;
  position:absolute;
  top:0px;
  width:12%;
  left:56%;
  height:100%;
  right:auto;
}
.topbar-spacer-cyan-off:hover {
  background-color: #000;
}
.topbar-spacer-blue-on {
  background-color:#00f;
  position:absolute;
  top:0px;
  width:12%;
  left:68%;
  height:100%;
 
  right:auto;
}
.topbar-spacer-blue-on:hover {
  background-color: #000;
}
.topbar-spacer-blue-off {
  background-color:#00c;
  position:absolute;
  top:0px;
  width:12%;
  left:68%;
  height:100%;
  right:auto;
}
.topbar-spacer-blue-off:hover {
  background-color: #000;
}
.topbar a {
  text-decoration: none;
  color: #fff;
  display:block;
  text-align:center;
}
.topbar a:hover {
  text-decoration: none;
  color: #ddf;
  background-color:transparent;
  display:block;
  text-align:center;
  -webkit-animation: glowfx 1s ease-in-out infinite alternate;
  -moz-animation: glowfx 1s ease-in-out infinite alternate;
  animation: glowfx 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glowfx {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0000ee, 0 0 40px #000073, 0 0 50px #0000ee, 0 0 60px #0000ee, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #0000aa, 0 0 40px #0000ee, 0 0 50px #000044, 0 0 60px #000099, 0 0 70px #0000ff, 0 0 80px #0000aa;
  }
}

And replace your <ul></ul> unordered list tag that you are using for your topbar with this HTML & Javascript snippet:

Spoiler: Topbar HTML code

<span class="topbar">
  <span class="topbar-left">&nbsp;</span>
  <a href="#link1"><span class="topbar-spacer-orange-off">Link 1</span></a>
  <a href="#link2"><span class="topbar-spacer-yellow-on">Link 2</span></a>
  <a href="#link3"><span class="topbar-spacer-green-off">Link 3</span></a>
  <a href="#link4"><span class="topbar-spacer-cyan-on">Link 4</span></a>
  <a href="#link5"><span class="topbar-spacer-blue-on">Link 5</span></a>
</span>

Spoiler: Topbar Javascript code

<script type="text/javascript">
    var topBarCycleAnimation = function() {
      console.log("cycling");
      var colors = ["orange", "yellow", "green", "cyan", "blue"];
      var states = ["on", "off"];
   
      for(var c=0;c < colors.length;c++) {
        for(var s=0;s < states.length;s++) {
          var elements = document.getElementsByClassName("topbar-spacer-"+colors[c]+"-"+states[s]);
          if(elements.length > 0) {
            if(Math.random()*1000 < 550) continue;
            elements[0].className = "topbar-spacer-"+colors[c]+"-"+ (s == 0 ? states[1] : states[0]); //A conditional statement. Eh.
          }
        }
      }
    }
 
    setInterval(topBarCycleAnimation, 600);
  </script>

If set up correctly, you should end up with a result similar to this:

Spoiler: End Result

Tweak for multi-platform, and for taste.

 

[jeffyTheHomebrewer]

Alright, gonna try that now. I might tweak it to make it a bit smaller, but thank you!

Post automatically merged: Nov 19, 2022

Heh, it works! Now to tweak it a bit...

Post automatically merged: Nov 19, 2022

Hrm... if only the widths of the buttons were done automatically according to the length of the strings they had.. Eh, I'll figure it out anyway.
Though, then again, the fixed lengths are a little nice...

 

[Quincy]

Alright, gonna try that now. I might tweak it to make it a bit smaller, but thank you!

Post automatically merged: Nov 19, 2022

Heh, it works! Now to tweak it a bit...

Post automatically merged: Nov 19, 2022

Hrm... if only the widths of the buttons were done automatically according to the length of the strings they had.. Eh, I'll figure it out anyway.
Though, then again, the fixed lengths are a little nice...

If you want to be able to calculate within css files you should take a look at SASS (.scss files if I recall correctly, it's been a while since I last done anything web related )