Comic Fury Webcomic Hosting - How do I make my navigation bar look like the tabs from a folder?

You are not logged in. Log in, Register, More info
Forum > Layouts, HTML, CSS & Javascript > How do I make my navigation bar look like the tabs from a folder?
Pages: [1]

"How do I make my navigation bar look like the tabs from a folder?", 19th May 2019, 10:10 AM #1
Timelapse11
goes fast
User avatar
Posts: 802
Registration date: 14th May 2017
Location: UK
Since my other comic is ending soon, I wanted to try and get the page up for my new comic up, I had the idea that the navigation bar looked like a folder, folders that look like this
I'm not really sure how to achieve this though any help?

Merged Doublepost:

I've gotten slightly close to what I wanted it, but I can't seem to bridge the gap between the nav bar and the body.
image

There is also that box next to the home link that I need to remove, but I don't know how

Literally nothing is working. I. Give. Up. This stupid endeavour was a waste of my time. I don't know why I even bothered trying, nothing I do works.

Turns out my mind won't let me give up, it's frustrating. Does anyone know what I am doing wrong?
I think this is the right part of code
_______________________
image
image
19th May 2019, 6:05 PM #2
Robotwin.com

User avatar
Posts: 3007
Registration date: 22nd Sep 2010
Location: USA, Milky Way
Basically, you wanna set the border radius on the top of the tabs, and butt the bottoms against the top of the content section.
(Hopefully I understand what you want)

This might work, added to your "#navigation li a" selector:
border-top-left-radius: 6px;
border-top-right-radius: 6px;


If you want tabs and content butted together, add this to your "#navigation" selector
padding-bottom: 0; 


After that, you will have more fiddling with borders and whatnot. Baby steps.

Maybe some info here will help:
https://css-tricks.com/tabs-with-round-out-borders/
19th May 2019, 6:37 PM #3
Timelapse11
goes fast
User avatar
Posts: 802
Registration date: 14th May 2017
Location: UK
That worked! Thanks, I knew the solution would be something like that, it seems I've forgotten most of what I learnt in collage.
_______________________
image
image
20th May 2019, 1:15 PM #4
Timelapse11
goes fast
User avatar
Posts: 802
Registration date: 14th May 2017
Location: UK
Okay, so I went back and did a bit more editing and I'm happy with the result, however, the little box next to the home button is still there (circled in red), and again, I'm not sure how to remove it.
Any ideas?
image
_______________________
image
image
20th May 2019, 1:34 PM #5
Snarkclaw

User avatar
Posts: 136
Registration date: 9th Oct 2014
Location: MO, USA
Timelapse11:Okay, so I went back and did a bit more editing and I'm happy with the result, however, the little box next to the home button is still there (circled in red), and again, I'm not sure how to remove it.
Any ideas?


Is there something in your navigation menu's HTML that puts that box there?
_______________________
image image
20th May 2019, 1:38 PM #6
Timelapse11
goes fast
User avatar
Posts: 802
Registration date: 14th May 2017
Location: UK
I'm not sure, if there is something there, I'm not seeing it.

 <ul id="navigation">
                <li><a href="/">Home</a></li>
                <li><a href="/comics/">Latest</a></li>
                <li><a href="/comics/first">First</a></li>
                [c:searchon]
                    <li><a href="/search/">Search</a></li>
                [/]
                <li><a href="/archive/">Archive</a></li>
                [c:hasblogs]
                    <li><a href="/blog/">Blog</a></li>
                [/]
                [l:extrapages]
                    <li><a href="[v:l.link]">[v:l.title]</a></li>
                [/]
                [c:!hidefromhost]
                    <li><a href="[v:addsubscriptionlink]">Subscribe</a></li>
                [/]
            </ul>


I haven't meddled with this part of the code.

Merged Doublepost:

So, my dad took a look at the code and he managed to get rid of the small box next to the home button
_______________________
image
image
Forum > Layouts, HTML, CSS & Javascript > How do I make my navigation bar look like the tabs from a folder?
Pages: [1]