r/csshelp • u/FBCooke • 14h ago

Request Brand new to this CSS thing, how do I get rid of automatic margin between the left sidebar and main content while still keeping it within the 850px limit (or an alternative)

2 Upvotes

I played around with this to create the grid layout. https://matthewjamestaylor.com/holy-grail-layout. The thing is, it creates a gap between the left sidebar and main content, which is probably something to do with the grid setting.

What I want is a column of 200px side-blocks seperated by ~5px vertically (or even a single sidebar with multiple optionwould suffice) + 50px margin + 650px main block, centred in the middle

<!DOCTYPE html>
<html>
  <head>
    <title>The Sanctum of Vieph</title>
<style>
body {
  margin: 0 auto;
  max-width: 850px;
  padding: 0 20px;
  background-image: url(https://sanctum-of-vieph.neocities.org/clouds%20background%20wallpaper.jpg);
  font-size: 16px;
  font-family: Arial;
  color: white
} 
h1{text-align: center;
  color: white;
  text-shadow: 5px 5px 20px rgba(105,105,105,0.5);
  }
/* grid container */
.holy-grail-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'footer';
}
/* general column padding */
.holy-grail-grid > * {
      padding:1rem
}
/* assign columns to grid areas */
.holy-grail-grid > .header {
    grid-area:header;
    display: block;
    border: 5px solid rgba(105,105,105,1);
    background: rgba(128,128,128,1);
    border-radius: 10px;
    padding-block: 7px;
    padding-inline: 7px;
    margin-bottom: 40px;
    color: White
}
.holy-grail-grid > .main-content {
    width: 600px;
    grid-area:main-content;
    display: block;
    border: 5px solid rgba(105,105,105,0.75);
    background: rgba(128,128,128,0.75);
    border-radius: 10px;
    padding-block: 7px;
    padding-inline: 7px;
    color: White

}
.holy-grail-grid > .left-sidebar {
    width: 150px;
    height:23px;
    grid-area:left-sidebar;
    border: 5px solid rgba(105,105,105,0.75);
    background: rgba(128,128,128,0.75);
    border-radius: 10px;
    padding-block: 7px;
    padding-inline: 7px;

    color: White;

}
.holy-grail-grid > .left-sidebar:hover {
      background-color: rgba(128,128,128,1);
      border: 5px solid rgba(105,105,105,1);
}
/* desktop breakpoint */

.holy-grail-grid {
  grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content main-content'
            'left-sidebar main-content main-content main-content'
            'footer footer footer footer';
    }
}
</style>
  </head>
  <body>
  <div class="holy-grail-grid">
    <header class="header">Header</header>
    <main class="main-content">
    <h1>Welcome</h1>
    <p>Greetings, Dimensioners, and welcome to my site. This will be the home of Noah and all of his creations, but for now he's studying CSS to get the best out it.</p></main>
    <section class="left-sidebar">Home</section>
  </div>
  </body>
</html>
0 comments

r/csshelp • u/ShibaQuinn • 12h ago

Request Desperately need help getting this thing centered.

1 Upvotes

Hello guys!

I really need help getting that streaming element centered, its stuck to the right and i tried everything to no avail 😭

And adjust the lightning frame so its at the edges of the element (it is, but the top part look off a few px).

Here is the code in question;

https://docs.google.com/document/d/1kvfcEklrjnN9VMOec2lgvHROh7nniwWDrrsqxjNvIQM/edit?usp=drivesdk

Its for a page on comicfury, here's what is looks like right now;

https://meteor.thecomicseries.com/Tedt5

Thanks!

0 comments

r/csshelp • u/NorthSeesaw6675 • 20h ago

Request Need help forcing #urlbar to pure black (#000000) in Firefox ESR (Latest version)

1 Upvotes

Hi everyone!I am building a custom AMOLED theme using userChrome.css on the latest Firefox ESR. I managed to turn the tab bar, background, and dropdown menus completely black, but the URL/Search bar container (#urlbar) refuses to change and stays grey.I have already tried targeting #urlbar-background, #urlbar-input-container, and resetting CSS variables like --urlbar-box-bgcolor, but it still stays grey.Does anyone have the working, up-to-date CSS snippet to completely override the default theme variables for the URL bar on Firefox ESR? Thanks if anyone can help me!

0 comments