How to center a Tab bric in a column

Hello smart people –

How can I center this Tab bric in its column? I know of two options: create a custom class or generate a freehand class and adjust the margin…but is there not a better way?

The first time I placed this Tab bric in another file, using the same nav-tab classes, it was centered in its column, and so it was centered on the page.

But, this second iteration created in a new file, with the same nav-tab dimensions [900px wide], is stuck on the left side of the column…

Thoughts?

Hello @DanielF In the top of the tree you have a container, I don’t know if it is a div Bric but if not just add a div Bric and move all the tree inside that div. then click in the div and in the right side panel just choose to center content.

@Pealco I’m not sure but I think your method will align everything to the center including the text. Not just center the div?

@DanielF When you have a tab and you give it a width dimension Blocs aligns it to the left. This is true in most everything in Blocs. With the nav-tabs class just set your width and then click the left and right side of the margin box and type the letter a this will auto align the tab content to the center.

If you want the content below the tabs to be the same width just create a class for the div (already there) and set the width the same as the tabs and again set the left and right margin to auto.

Hope this helps.
Casey

3 Likes

THANK YOU Casey – Worked like a charm! Whew!!! :heart_eyes:

I had already drilled down into every setting in the Class Editor on the first iteration of this design, where I had the Tab Bric centered, but didn’t recall how I did it, and because the Class Editor became ‘corrupt’, when I was drilling down into the margin/padding setting I couldn’t see the ‘auto’ margin setting, because the Class Editor wouldn’t allow me to select only the left & right sides, so I couldn’t get that info out of the first iteration.

This Class Editor issue was why I began to rebuild this Tab bric in a new file, and attempted to reuse the first iteration settings, but rebuild the Tab bric in a cleaner way – all part of my learning how to do this!

What I mean by ‘corrupt’ in the Class Editor, is that the margin/padding controls were no longer responses to selecting only one, or shift-select to add another edge, so it concealed the ‘auto’ input I had used, and I did not recall that I had (I’m still a newbie).

Not sure if this is a ‘sensitive’ class editor issue, or simply because I had made so many adjustments in trying to learn how to customize the Tab bric, that I produced conflicting lines of code, causing the Class Editor to become ‘corrupted’.

Thoughts?

The tab bric can be very tricky, I’m glad I could help. Just remember in Blocs most any time that you set a width the auto margin will center the object.

Casey

2 Likes

Your right @casey1823 thank you… I never found that feature of auto, many thanks for that. I just assume that the “nothing” inside is the “auto”.

1 Like

thanks for the suggestion Pealco! we both see, now, that casey1823 guidance was very helpful…

Yes, so true, Casey. Tabs styling & functionality has been my long standing primary question regarding if I could make Blocs work for me, since I am coming from Muse.

So finally, with Blocs 3, I’ve been carving away at all the bit & pieces that comprise the Tab bric, and I am finally getting the hang of it. It’s been a patient but persistent journey for me…

Eldar’s video on using the INSPECTOR within Blocs for doing a forensic study on the CSS has been key for me in learning how to do this…and of course, his entire Mastering Bloc 3 videos have been super essential for learning!

And, now (it appears to me) that I’ve sufficiently solved this essential Tab bric (the accordion bric is up next) for my website needs, and so am more and more super on board with Blocs…and can say goodbye to Muse…

Thanks again for your ongoing forum support…cheers!

Welcome back @DanielF. I’m glad Blocs has helped you to see your way forward, thats good to hear.

1 Like

I’m glad your sticking with Blocs. It’s like any new program, just takes some time. Adobe is no longer supporting Muse, been a lot of Muse users move to Blocs.

If you stick with @Eldar mastering Blocs 3 videos you will be up to speed in no time. He’s a great teacher and I’ve been following his videos from day 1.

The inspector feature is a great addition for digging in and learning the classes. It’s really the key to all of the powerful controls. You can do so much without adding any external code.

Casey

1 Like

Yep…the Inspector feature gave me a window into what I needed to see, the stuff I couldn’t see (or recognize) otherwise in Bloc’s UI (beautiful as it may be), and that is precisely what empowered me to gain control of what I need to control (ascetics wise)

…of course, I first needed to spend much time learning the syntax of html and css to grasp what I was seeing, something I’ve been doing for the past year (I’m not a website designer, and only need to build my one and only site for myself) which I did not need with Muse, so moving over to blocs did require a deeper dive into html/css in order to get the results I need…which was a shock to my system, but because I like being a learner (when I have the time to do it) it appears patience is paying off…and the fact that Norm’s baby is growing up nicely, has helped a lot. Thank you Norm!

Thanks! Never really left…just sitting tight and watching as Blocs is maturing, and Muse is still functioning.

The TABs bric is what was missing for me in Blocs 2, and so the developments with Blocs 3 has opened the door wider for me to enter in and stick around…