A+ You got it spot on this time around. Exactly what I wanted.
All I have left now is to pick out the images for the site and paste a few pieces of icon codes into the pages and send it up for testing.
The only thing that is not exact and I am not sure it ever can be is when the pages start with different elements they have a slightly different spacing from the top. examples are pages that start with an h tag vs pages that start with say an image, photo gallery or video. The head and nav all align up so this is not a big deal. Most viewers will not even look twice at that.
I may actually get out of this project with all of my hair unlike what happened to this guy.
The default vertical alignment for the first elements in table-cells is {vertical-align:baseline;}. That alone could make the top elements in table-cell columns appear grossly misaligned. A common “reset” is to apply {vertical-align:top;} to table-cells. If you want the contents of the less populated column to be vertically “middled”, then apply .tcell {vertical-align:middle;} instead.
Foreground mages present a similar issue. Images (like words in a sentence) are inline elements which means they have spacing between them (like words in a sentence) and a small amount of margin along the bottom. Depending on the situation, one common “reset” for images in table-cell columns is to apply {vertical-align:top;} to the img selector. Another choice in many situations is to set the display property of the image to block, img {display:block;}. There is nothing to be gained by doing both. Pick the best reset for the situation.
Finally, text elements, such as paragraphs ( <p> tags) or headers ( <h1>, etc ) have default vertical margins of 1em. Other elements such as [un]ordered lists, <ul> and <ol>, also have default vertical margins and padding-left. It’s up to you to learn the default properties and values that are applied to the various elements. You could try setting the top margin of a <p> or <h1> to zero if you wish: {margin-top:0;}
I use Firefox for most of my coding and have installed the “Firebug” plugin as my primary dev tool. There are other tools for Firefox and other browsers have excellent tools as well. Take some time and become familiar with the dev tools in your browser. Doing so will pay big dividends when you need to troubleshoot your code (or someone else’s)
This is a “play page” for testing vertical alignments in table cells as columns. It is also attached as a file at the bottom of this post. Take your pick
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table-cells vertical-alignment</title>
<!--
See how stuff behaves.
Be aware that the default vertical alignment in a table-cell is vertical-align:baseline.
Instructions for this play page:
Delete the left-most comment mark to apply a declaration. See what happens when....
-->
<style type="text/css">
.table {
display:table;
}
.tcell {
display:table-cell;
/* vertical-align:top; /* */
/* vertical-align:middle; /* */
outline:1px solid red; /* TEST Outline. To Be DELETED. */
}
/* eliminate space beneath [inline] img */
img {
/* display:block; /* */
/* vertical-align:top; /* */
}
</style>
</head>
<body>
<div class="table">
<div class="tcell">
<p>Lorem Ipsum lives here</p>
</div>
<div class="tcell">
<img src="http://placehold.it/300x200" alt="" width="300" height="200">
</div>
</div>
</body>
</html>
Thanks for that fix, I never noticed an issue there.
Also so you know when I was mentioning the top alignment I was not speaking of alignment in the tables. I was just simply stating that if my first item in a section is an image vs paragraph vs li vs video that they seem to have different default space settings.
I will work on those as time allows, as most people will never notice that the image is a couple lf pixels closer to the above border than a page starting with an h.
Those are minor things I will work on as I can so I can figure them out on my own.
At least for now we can go live with the new site.
Definatly great work on the columns. Thank You again.
Whether the tag is inside a table-cell column, inside a section or located at the top of the page, <p> paragraphs have margins, <img> images do not.
If the first tag at the top of the page (or top of a div) is a text tag, then you can remove the margin-top to bring it closer to the top of the page (or top of the div). If that still doesn’t align things close enough, you can apply a bit of padding or margin above the image to push it down, or apply some negative margin to the top of the text tag to pull the text upward. I’m talking small amounts like .125em or so. Either method should work.
Okay we are all good, I just did not want you to think I thought the tables were a problem.
The margins are on my list to work with next, just need some sleep, up again over 24. Hopefully, last of these hours for awhile. Just want to get back to if not normal at least not crazy hours. 90 hours in 9 days.
Thanks for everything. Will look at word game again after some rest.
