Gin and Golang: Implementing HTML files with CSS styling

I am still learning English, so please bear with me :)

My issue is that when using Gin to load HTML, my HTML file contains an import (/stylesheet/index.css), but when I run my app with Gin, it gives an alert that the stylesheet file could not be loaded.

workspace/
          main/
               main.go
          templates/
                   index.tmpl.html
                   css/
                       index.css

main.go

r.LoadHTMLFiles("../templates/index.tmpl.html")

r.GET("/index", func(c *gin.Context) {
    c.HTML(200, "index.tmpl.html", gin.H{
        "title": "Main website", //IGNORE THIS
    })
})

index.tmpl.html

<!DOCTYPE html>
<head>
  <title>Hola titulo</title>
  <style type="text/css" media="screen">
    <!-- 
        @import url("/css/index.css");
    -->
  </style>
</head>

<body>

  <header>
    <h1>City Gallery</h1>
  </header>

  <nav>
    London<br>
    Paris<br>
    Tokyo
  </nav>

  <section>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
  </section>

  <footer>
    Copyright © W3Schools.com
  </footer>

</body>

</html>

index.css

header {
   background-color:black;
   color:white;
   text-align:center;
   padding:5px; 
}
nav {
   line-height:30px;
   background-color:#eeeeee;
   height:300px;
   width:100px;
   float:left;
   padding:5px; 
}
section {
   width:350px;
   float:left;
   padding:10px; 
}
footer {
   background-color:black;
   color:white;
   clear:both;
   text-align:center;
   padding:5px; 
}

So, when I run my app, I encounter a 404 error in Gin mode debug.

[GIN] 2016/03/26 - 12:10:50 | 200 |     688.938µs | 127.0.0.1 |   GET     /index
[GIN] 2016/03/26 - 12:10:50 | 404 |       2.865µs | 127.0.0.1 |   GET     /css/index.css

However, if I load the HTML file only, the stylesheet displays without any issues. :(

I am unsure how to load the stylesheet with Gin.

Please assist me with this dilemma.

PS: I must use Gin

Answer №1

Ensure you have a static file handler in your main.go. Check out the Static method for help.

r.Static("/css", "../templates/css")

Answer №2

Make a simple change in your index.tmpl.html file by updating the code snippet below:

<style type="text/css" media="screen">
    <!-- 
        @import url("/css/index.css");
    -->
</style>

Replace it with this updated code:

<style type="text/css" media="screen">
    <!-- 
        @import url("css/index.css");
    -->
</style>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS transformation incomplete

I am currently creating a scrolling ticker animation for my website. Here is the HTML code: <div class="top-news"> <div class="t-n-c"> <div class="textwidget">Latest News: Our first 20 customers get 20% off their fi ...

Preserve line breaks within HTML text

Utilizing the powerful combination of Angular 5 and Firebase, I have successfully implemented a feature to store and retrieve movie review information. However, an interesting issue arises when it comes to line breaks in the reviews. While creating and edi ...

Steps to connect two drop-down menus and establish a starting value for both

In the scope, I have a map called $scope.graphEventsAndFields. Each object inside this map is structured like so: {'event_name': ['field1', 'field2', ...]} (where the key represents an event name and the value is an array of f ...

css media queries not taking precedence over default styles

Struggling to find a solution as no similar case was discovered!! To avoid adding a class name for each page, I am eager to utilize a generic class name as shown below: <div id="news"> <div class="news column">content 1</div> &l ...

What is the best way to incorporate a background image in a Bootstrap tooltip?

I'm having trouble displaying an element with a background-image property within a Bootstrap tooltip. The image is not showing up as expected. <div class="big-panel"> <a href="#" data-bs-toggle="tooltip" data ...

Ways to create distance between columns in Bootstrap 5

screenshot i want like this Looking at the image provided, there seems to be an issue with spacing between the red and blue columns. Despite trying various Bootstrap classes, the desired result has not been achieved. Adding m-4 to the Navbar, Header, and ...

Get hexa values from a colorpicker and use them as a background in an angularjs application

I'm currently working on an angularJS project and I've implemented an HTML color picker. My goal is to assign the selected color from the color picker to my div element, ensuring that the values are in hexadecimal format. Below is a snippet of my ...

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

CSS grid is organizing itself neatly on larger screens

I'm currently facing an issue with displaying a CSS grid on my page. When viewed on desktop, the grid appears stacked up instead of in separate columns. I've tried various methods like dividing it into 4 columns and using spans for width but noth ...

How can you display Bokeh HTML visualizations on your WordPress site?

I've developed a Python Bokeh dashboard with visualizations and saved the HTML file. Viewing it in my browser displays the graphs as expected. However, I'm facing issues trying to showcase this dashboard on my WordPress site. Simply pasting the H ...

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Is there a way to hide the .dropdown-backdrop element from Bootstrap for a specific dropdown on a webpage using only CSS? I found a solution that involves Javascript, you can view it on JSFiddle here. However, I am hoping to achieve this without relying o ...

Having trouble retrieving text from an HTML form in Node.js using express, as the req.body object is coming up

Having trouble extracting text from an HTML form to build a basic text to speech functionality. Despite using an express server, the req.body is consistently empty when attempting to fetch the text. I've experimented with body-parser and adjusted the ...

Glistening: A variety of designs for textInputs and selectInputs

I am working on styling 2 textInput and 2 selectInput functions, one on a dark background sidebar and the other inside a white bsModal. I want to style them differently. Is there a way to keep the sidebar elements styled one way and change the font and bor ...

Steps for modifying the documents on an osCmax website

I had a developer set up my website in osCmax a while ago, and now I want to update the design of some pages using HTML and CSS on my own. While I am comfortable with HTML and CSS, I have very limited knowledge of PHP. This is my first attempt at working o ...

What could be the reason why the navbar ul li a instance is not appearing in Bootstrap 4 modal when using an

Can anyone help me solve the issue I'm having with viewing HTML in a Bootstrap 4 modal? Everything shows up except for the navbar ul li a elements. I've searched for a solution everywhere, but haven't found one yet. Please assist! (I want t ...

Ways to alter the color of individual pseudo elements using a CSS loop

While working on creating a typewriter animation effect for my website using only CSS that I discovered through some online research, a question popped into my mind - is it possible to set different colors for each text in the animation? I have included t ...

Steps for styling the header of an Antd Collapse Panel

I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code: <Collapse accordion defaultActiveKey={defaultOpenPanel}> <StyledCollapsePanel key="tasksAssignedToMe" header={ ...

Tips for preserving user input from HTML into a text file and then reloading it back into the HTML document

I have recently created a character sheet for a game using HTML. The HTML file is mainly comprised of various input tags such as <input type="text">, <input type="number">, <input type="checkbox">, <input type="radio">, <select&g ...

Tips for showing images with the full path URL retrieved from JSON using AngularJS

I am currently working on a project that involves displaying images from a JSON file. The URLs of these images are stored in the JSON file. Currently, my code is only outputting the URLs themselves, which is expected. However, I am looking for a way to act ...

The menu on Android gets cut off by the status bar

Seems like an easy fix, our menu is getting cut off by the status bar on certain Android devices as shown in this screenshot. Any suggestions on how to resolve this issue? Could it be related to z-index properties? https://i.sstatic.net/Jh5SZ.png ...