How can I center buttons under my slideshows?

RobR · November 25, 2020

My home page, at https://crumbs-of-reality.smugmug.com/, has three slideshows. Ideally, a user would click on a slideshow and be taken to the slideshow's source gallery. But I guess that's not possible. So, I have that ugly piece of text underneath them telling users to use the menu. Instead of that, I would like to have buttons underneath the slideshows that say "To the Crumbs", "To the Trains" and "To Nature" underneath the slideshows. The buttons would need to be centered under each slide show at all times. But slideshow sizes are specified as percent of screen width, as are the spacers I am using to position them horizontally. Button sizes are only "small" and "large". I can't specify the size of a button as percent of width, so I can't ensure that they're centered. SmugMug doesn't offer a container object whose size would be specified as percent of width, and into which I could place a button centered with respect to the container. Is there some HTML I can use? I know that HTML elements can have widths specified as percent of screen width, but can I add HTML to my page that would react to a mouse click?

Hikin' Mike · November 25, 2020

I would never use a spacer block to position a block. They don't play nice when you switch to mobile.

Add a HTML block under each of your slideshows. Make sure it's the same width as the slideshow. Add this:

HTML

<div class="custom-button">

  <a href="#">Custom Button</a>

</div>

CSS

.custom-button { text-align: center;}

.custom-button a {
  background-color: gray;
  color: white;
  padding: 1em 1.5em;
  border: 1px solid black;
}


.custom-button a:hover {
  background-color: white;
  color: black;
  border-color: gray;
}

You'll have to change the <a href="#">Custom Button</a> to add your link # and change the text to suit.

RobR · November 26, 2020

Thanks very much. That's good, but it still has a problem. The buttons appear left-justified within their HTML blocks. Is there a way to position them in the center of their HTML blocks? I published my home page with the custom buttons so you can see what I mean.

You say you never use spacers. The slideshows are positioned using spacers. The slideshows are all 27% of the screen wide, with four spacers each 5% wide (well, one's 4% to get exactly 100). What would you use to position the slideshows?

Hikin' Mike · November 26, 2020

Looks like you forgot this in your CSS: .custom-button {text-align: center;}

RobR · November 26, 2020

No, its there.

.custom-button {

text-align: center;
}

.custom-button a {
margin-left: auto;
margin-right: auto;
background-color: gray;
color: white;
padding: 1em 1.5em;
border: 1px solid black;
}

.custom-button a:hover {
background-color: white;
color: black;
border-color: gray;
}

And how do I mark my comment as code so that it appears as gray text on white?

Hikin' Mike · November 26, 2020

@RobR said:
No, its there.

You also copied 'css' before .custom-button:

css .custom-button {
    text-align: center;
}
.custom-button a {
    margin-left: auto;
    margin-right: auto;
    background-color: gray;
    color: #fff;
    padding: 1em 1.5em;
    border: 1px solid #000;
}
.custom-button a:hover {
    background-color: #fff;
    color: #000;
    border-color: gray;
}

Remove that and it will work.

@RobR said:
And how do I mark my comment as code so that it appears as gray text on white?

Two ways. You just wrap your code with a backtick: `. Use a single backtick for a single line code or use three backticks to use multiple lines. There is also a "Format" button (the Paragraph Icon) and click on 'code'.

RobR · November 26, 2020

Great! Thanks for curing my blindness and for your advice.

How can I center buttons under my slideshows?

Comments