Can I simulate a row of spacer/text/spacer with one HTML block?

RobR

I just posted a rant on the Feature Requests category asking for spacers and other elements not to change size when a new element is added in the same row. I think it should be possible to replace an alternating series of spacers and text blocks with a single HTML block. I tried doing it with this HTML:

<div width=10%></div>
<div width=15% style="text-align:center;font-size:x-large">
    Trains Gallery 1
</div>
<div width=75%>

That didn't work. It just gave me "Trains Gallery 1" centered in the page. Is there a way to do this?

Hikin' Mike

I don't understand what you're trying to do.

RobR

Take a look at this page, which uses the custom button HTML you were kind enough to show me a couple of days ago: https://www.smugmug.com/app/customize/Trains-and-Railroads-Page

The text over the slideshows is the title I specified as part of the slideshow settings. It's left-justified over the slideshow. I want it centered. The easiest way to do that would be to remove the title from the slideshow and add a row above the slideshows consisting of a spacer 10% wide, an HTML block 15% wide, and a spacer 75% wide. (Eventually, there will be more slideshows in each row, but this will do for a start.) But placing each of those elements one at a time and making sure they all have the correct width is a royal pain. I would like a single block of HTML that would do the same thing as the three blocks that would be in that row.

The HTML I posted is supposed to create an empty section that is 10% of the width of the screen, then a section that is 15% of the width of the screen that contains the slideshow title, and then an empty section 75% the width of the screen.

I just realized that I am missing the closing tag, but putting it in didn't change anything. All I get is the phrase "Trains Gallery 1" centered on my page.

Hikin' Mike

Page not found.

RobR

Oops. That was the customize page. This link should work: https://crumbs-of-reality.smugmug.com/Trains-and-Railroads-Page

I looked up the right way to set width and changed the HTML to this:

<div style="width:10%"></div>
<div style="width:15%;text-align:center;font-size:x-large">
    Trains Gallery 1
</div>
<div style="width:75%"></div>

I'm getting closer. The text is now close to the left side of the screen. But the left div should be 10% of screen width. The middle div, containing the text, should be in the same position as the slide show.

The HTML block is below the line of text that says "General Galleries". Below the HTML block is a row that consists of a 10%-width spacer, a 15%-width slide show, and a 75%-width spacer.

By looking at the page source, I see that I could get centered titles by playing the CSS for the sm-page-widget-header class, but I would like to have an answer to the original question anyway for future reference.

Hikin' Mike

You current HTML will not work. Those "empty div's" need content for it to work. You'll probably need to use grid (https://css-tricks.com/snippets/css/complete-guide-grid/). I don't have a lot of experience with it, but I'm willing to look into it.

Why not just use Galleries and be done with it? IMO a bunch of small slideshow will look busy and take a long time to load.

Hikin' Mike

Have you looked at your home page on a mobile device yet?

RobR

I don't want to use Galleries because I don't have a choice of which galleries to include. It just gives me all galleries in a folder. I want the two categories, "General" and "Specialized". I will try slideshows, and if they end up taking too long to load, I can switch to single photos.

You once said you'd never use spacers, instead using HTML blocks to position elements on your screen. How do you do that?

Hikin' Mike

You can select specific Galleries to display.

My gallery page ( https://gallery.imagesinthebackcountry.com ) is one HTML/CSS block.

RobR

Thank you.

In case anyone cares, here's an answer to my original question: a table.

<table style="width:100%">
  <tr>
    <td style="width:10%;background-color:#ff0000">a</td>
    <td style="width:15%;background-color:#00ff00">b</td>
    <td style="width:75%;background-color:#0000ff">c</td>
  </tr>
</table>

Hikin' Mike

@RobR said:
You once said you'd never use spacers, instead using HTML blocks to position elements on your screen. How do you do that?

I took the liberty of converting your "Train and Rail" spacers and text blocks to one HTML/CSS Block to give you an idea on how to do it. The margin: 0 auto; basically sets that "container" with a top/bottom 0 margin and right/left auto (centers it) at 80%.

HTML

<div>
  <h1>Trains and Railroads</h1>
  <p>I've liked trains all my life.  It probably began with frequent trips to a neighborhood picnic area we called "The Train Place" because there was a railroad running next to it.  Whenever a train came, we'd run over, wave to the crew, and count the cars.</p>
  <p>Many years later, after computers and the Internet became things, and long after I became serious about photography, on a whim I did a Google search for "Railroad photography".  I was blown away by some of the results.  My first reaction was "I want to do this!".  My second was, "Dammit, I CAN do this!"</p>
  <p>This page is divided into two sections.  The first contains all of my train and railroad photographs, divided into galleries of around 50 pictures each.  The second contains galleries of specific areas, topics or events.</p>
</div>

CSS

div {
  width: 80%;
  margin: 0 auto;
}

h1 {
  font-size: 80px;
  text-align: center;
}

p {font-size: 32px;}

Hikin' Mike

@RobR said:
Thank you.

In case anyone cares, here's an answer to my original question: a table.

They aren't responsive. Check it on a mobile device.

RobR

Good point, but my gallery isn't aimed at mobile users.

denisegoldberg

@RobR said:
Good point, but my gallery isn't aimed at mobile users.

You really don't control how your users view your site. While I usually look at photo sites on my computer I will also look on a mobile device.

Your approach also doesn't work well in a browser window that does not take the full width of my monitor. The following screen shot was taken with a reasonably sized browser window on a large monitor. Is this how you want your viewers to see your site?