Hi there,
First off, I’m a newbie with golang and with webdev in general.
I’m trying to program a simple website and I’m not able to get the css config right.
.
├── static
│ └── css
│ └── test.css
├── test.go
└── tmpl
└── test.html
test.go:
package main
import (
"log"
"net/http"
"text/template"
)
func main() {
website := func(w http.ResponseWriter, r *http.Request) {
templ := template.Must(template.ParseFiles("tmpl/test.html"))
templ.Execute(w, nil)
}
http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
http.HandleFunc("/test/", website)
log.Println("Listening on :8081 ...")
err := http.ListenAndServe(":8081", nil)
if err != nil {
log.Fatal(err)
}
}
test.html:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="“X-UA-Compatible”" content="“ie" ="edge”" />
<title>Llynx Demo @ IGMR</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<!-- <style> -->
<!-- [class*="col"] { -->
<!-- padding: 1rem; -->
<!-- background-color: #33b5e5; -->
<!-- border: 2px solid #fff; -->
<!-- color: #fff; -->
<!-- text-align: center; -->
<!-- } -->
<!---->
<!-- [class*="con"] { -->
<!-- padding: 1rem; -->
<!-- background-color: #9e33e5; -->
<!-- border: 2px solid #fff; -->
<!-- color: #fff; -->
<!-- text-align: center; -->
<!-- } -->
<!-- </style> -->
<link rel="stylesheet" type="text/css" href="static/css/test.css" />
</head>
<body>
<div class="container">
<h1>HI</h1>
</div>
</body>
</html>
And the test.css:
.col {
padding: 1rem;
background-color: #33b5e5;
border: 2px solid #fff;
color: #fff;
text-align: center;
}
.con {
padding: 1rem;
background-color: #9e33e5;
border: 2px solid #fff;
color: #fff;
text-align: center;
}
3 Thinks I’ve observed:
- The Chrome Dev tool does not show an error that it could not load some css files
- If i go on http://localhost:8081/static/css/test.css I see the content of the .css file - thats good, right?
- In the test.html: If I write the styling there I can see the div in purple, so the css should not be the issue?
I’m searching for 3 hours now, I hope somebody can give me some hints:)
Thanks!
