|
|
Post by Brett Ludwick on Feb 27, 2015 22:19:13 GMT -8
This week went pretty smoothly, but what gave me the most trouble was trying the different methods of having a consistent column length. I tried a couple of the methods mentioned, but I just couldn't get them to work. I think I got confused with the wording on how the instructions were telling us to "nest" the columns inside another div. Another method just gave me one huge long background that didn't adjust to the height of my content, so that wasn't going to work. Oh well. So, I went to the tried and true image background that simulates columns. Question: Is there a better way to center images in a div other than putting the image between <p> tags then styling that div paragraph? Assignment 7 |
|
|
|
Post by Judy Fontanella on Mar 2, 2015 0:01:29 GMT -8
You did a really good job on this and you have done all of the requirements really well. I like your header image. Looks great - even though I'm not a big fan of worms.
What I meant about nesting the columns inside, was just to surround the columns div's with another div. I was trying to find that to make it clearer, but looking quickly could not find it. If you think of it, let me know, and I'll try adding to it.
About centering images. Images are inline elements - rather than block level elements. Therefore, they are supposed to be placed in a block level element like a div, paragraph, etc. If you set the text-align:center; declaration for the block level parent element, they will be centered. That really is the best way to do it.
Nice work.
|
|
|
|
Post by Judy Fontanella on Mar 2, 2015 0:03:50 GMT -8
PS - If you are wondering why a certain technique isn't working, you can always post the page and ask. I can look at you and tell you how to fix it.
|
|
|
|
Post by Brett Ludwick on Mar 2, 2015 15:21:41 GMT -8
Thank you. I'll do that next time. So, just to be clear, I could call the parent div that wraps the image(s) "div id=image", then apply "text: center" and it will center my image? Do I also have to style the next level parent up; such as "article", and would I have to style the "image" div with R & L margins set to auto, so that it's centered within the article div? I often run into this problem when nesting containers within containers, and I find myself chasing the styles to the next level up.
|
|
|
|
Post by Judy Fontanella on Mar 3, 2015 18:59:43 GMT -8
A lot depends on where the image is. If it's the only thing in your div, you can easily apply the "text-align:center;" to that div.
However, you might have an element like a div or an article, perhaps, and the image is in there, but there is a lot of text in the article, too. You want the image centered on one row, but the text needs to be aligned to the left. In that case, I'd put the image in it's own paragraph or div and set the alignment of that paragraph or div to the center. Then, it doesn't effect the rest of the content in the first div we mentioned. I guess this is the long way of saying that only the immediate block level parent needs to have the text aligned to center. You most likely would not want to keep going up levels with that.
If you're centering and image, you most likely don't need left and right margins on the image. Perhaps you'd like to set top and bottom margins on the parent element, though.
|
|
