There once was a stack called Foundation…

Classic Stacks
1

Last year I built a fully functional website using Divider 1.5.1, Footer Text 1.9.4, and other relics from yesteryear using Foundation 1.

Then early this year I took the bait and upgraded to Foundation 6, and now realize that I [apparently] need to master CSS to use these basic F6 stacks to achieve what was achievable in Foundation 1.

With the goal of placing a horizontal divider at the very top of every page, today I dropped the Foundation 6 Divider stack onto a page of a new site, added an F6 Site Style stack, then added this CSS (with thanks for the code provided my new best-bud, ChatGPT) to the page:

.divider-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px; /* Thickness of divider /
background-color: red; / Color of divider /
z-index: 9999; / Ensure it stays on top of other elements */
}

The code did produce a 3px red horizontal line across the page, but not at the very top…perhaps 5mm from the top of the page? Attached to the red line was an uninvited super-thin grey line at the bottom of the red line.

Before I close <slamming-door-closed.wav>the door </slamming-door-closed.wav>on Foundation 6 for good, I’d like to ask if there is something I’ve missed in positioning the divider exactly where I want it.

Thanks for your help with this.

Cheers,

John

PS: My friend makes this observation:

There once was a stack called Foundation,
That caused him a great aggravation.
With settings galore,
He clicked evermore,
Now he’s lost in a sea of frustration!

3 Likes
2

You don’t need to use CSS. For (nearly) all what you need you have swatches. For example you can easily style the horizontal divider with a ‘Border’ swatch and you can control its width with a ‘Width’ swatch.

2 Likes
3

Thanks very much for the tip, Matthias. I’ll look into those swatches.

1 Like