Help with Border-Image CSS - SOLVED

[ThistleKnight]

Hello! I am having a problem I'm not sure how to solve. I am working on my links page, and I have a sidenav bar in that page. The padding was displaying perfectly until I added my border-image. this is the first time I've used border-image and I'm not sure whats causing it to shrink so much inside. I linked the page above for people to inspect, and also, here is the code I added to my nav element:

Code

border-style: solid;
border-width: 70px;
border-image-source: url("images/fullscroll.png");
border-image-slice: 19% fill;
border-image-repeat: stretch round;
border-image-outset: 40px;

Thanks all!

[Rubbereon]

If you open inspect element with f12 and tick off "border-image-source: url("images/fullscroll.png");" you'll immediately see why. The border width (displayed in black) is huge for some reason. (See attached image if it shows up, I dunno how melonland handles attachments)

Turning "border-width: 70px;" off fixes your problem, but consequently, it removes parts of the graphic like the top part of the scroll.

Maybe this can be fixed with some overflow shenanigans, but I don't know how.

Setting all the nav padding values to 0 kind of improves the navbar, but that doesn't fix the problem completely. I'm not sure you'd wanna mess with negative values, but I tried and it wouldn't work, so I'm not sure it's possible.

Alternatively, something I noticed is that by disabling "width: 220px;" it allows the full navbar to display correctly, however now it overlaps with the main area.

My proposed solutions with a small tradeoff for each.

First solution if you don't mind having a smaller-looking scroll.

• Reduce border-width to 36px at most or 24px at the very least
• Reduce padding to 0px
• If border-width is 36px, set the regular width to 240px, it should not overlap with the main scroll area
• Done, it should look fine now.

Second solution if you don't mind the size of the scroll relative to the page.

• Increase nav width to 400px
• Change "left" to 50 on the navbar
• Change "margin-right" to 50px on the main area
• and also "margin-left" to 520px on the main area to keep the same size
• Done, should look good, but it will use nearly all your page, no dead air basically.
• Bonus: You can still set the padding to 0 if you want, but it doesn't look like it improves things much, so I omitted it.

Again, maybe it's possible to avoid this problem with overflow or by messing with padding and margin on the bullet list area, but I don't know how. 

[IndigoGolem]

The best solution i found is to decrease border-width and also have border-image-width (separate properties) for the <nav>, and make the <nav> wide enough (240px) to fit all the buttons without needing a horizontal scroll bar. But i will mention, this makes the page look worse on mobile, or at least with Firefox' responsive design mode.

I'm sure there is a simple way to make the border expand out as border-width increases, rather than always expanding down and right, but i don't know what that way might be.

I've attached a screenshot, and here's the updated CSS. Is this close to what you're looking for?

Spoiler

Code

nav {
    width: 240px;
    height: auto; 
    max-height: 90%;
    position: fixed;
    top: 50px;
    left: 150px;
    overflow: scroll;
    padding: 0px;
    scrollbar-width:none;
        border-style: solid;
        border-width: 30px;
        border-image-source: url("images/fullscroll.png");
        border-image-slice: 19% fill;
        border-image-repeat: stretch round;
        border-image-outset: 40px;
    border-image-width: 70px;
}

[close]

[ThistleKnight]

Thanks everyone for your input!! I looked at the messages I got and fudged around with the image and the code until I got to a point where I feel like its looking good.
Heres what I did:

1. edited the border-image itself to be closer to the final shape
2. while messing with the border-width, I tried setting it at 0px, which seemed to fix alot of my problems? I am not sure how, lol
3. changed to overflow: auto;
4. lowered the font size of the nav buttons & removed the boxes around them to allow for more space
5. changed my section headers to h2 for better semantic html
6. I put everything thats in the nav bar into its own div wrapper so that I could add padding to the nav to edit the scroll overflow cut-off so its not in a strange place(you would only notice this if I get enough "sections" to go past the max-height I set)(this was not working with just the nav by itself, it would change the size of the nav)