Text Alignment with table within an HTML block

BradfordBenn · July 5, 2015

Howdy all-

I am trying to make my blog and SmugMug site complimentary. I have been tweaking my site and am getting very close, but am having trouble with getting vertical alignment to be middle in a table.

My HTML header is a 100% width table to provide the black background I want for it. It is 1x1
Inside of that is an 80% width table that has the actual navigation within it. It is a 1x2 table with the left hand cell just having text in it.
The right hand cell has another table within it.

The reason for the different tables is each one has slightly different formatting and I found it the easiest way. Also it still allows for the site to be stretchy.

I have added valigns in html with no change. I have added vertical-align to the CSS also with no luck. If I run the header on a regular html page on my testing site www.bradfordbenn.info other than the fonts it renders correctly. I am using a SmugMug provided Google Font and I wanted to strip this testing down to the simplest possible scenario. I literally just took the on page CSS from the test page and pasted it into the SmugMug HTML Customizer. I did the same thing with the HTML. I did have to change a minimum height on SmugMug but that was easy. I changed a min-height: 30px; to be 52 as they were not the same height.

You can see the plain HTML (except for the font) at www.bradfordbenn.info
The HTML SmugMug Custom is a sitewide header at photos.bradfordbenn.com

ANy ideas? Did I miss something?:dunno:scratch

Thanks

leftquark · July 7, 2015

Your HTML here works, however I did want to point out that the SmugMug Header with a logo content block and a menu content block would have worked to create exactly what you wanted without having to use tables and html. The following line of CSS should work for you:

#header-holder table {
  margin-top: 10px;
}

BradfordBenn · July 9, 2015

Thanks Aaron.

I did try the SmugMug Header with the Logo and navigation menu but there where two things I could not get to look right. The first was I want the navigation bar to be black background with white text to match my website. The other was that I could not get the dividers to show up like they do on the blog. So I created the tables to create the same effect. I would have rather used the SmugMug Header and Nav as they are mobile friendly. Was I just missing some settings?

Text Alignment with table within an HTML block

Comments