Sun, 2010-03-14 05:05
This weekend I was able to start ridding my site of frames. I replicated the frame effect with CSS and a PHP "include" statement, as suggested.
The result is this mock-up PHP page. The lower left area contains the "include" content, which comes from this page. My CSS is here; it's based on CSS borrowed from this site.
Here's what I can't figure out. When you look at the "included" page by itself, the thumbnail photos have no space beneath them. But on the PHP page, they do. If I add more rows of thumbnails, I get more spaces. Why is this? The styling for the thumbnails is ad hoc and not good, but I can't see why the effect would differ, regardless.
TIA for any help.
Sun, 2010-03-14 05:07
#1
I'd bet validating would
I'd bet validating would eliminate most if not all of your issues.
Sun, 2010-03-14 05:28
#2
Kk saw some links for that in
Kk saw some links for that in a sticky, will try. Thanks.
Sun, 2010-03-14 09:34
#3
You are misunderstanding the
You are misunderstanding the use of includes at the moment. An include is a section of the complete page, it's like a jigsaw. Look at a complete page and divide it up into what would be useful sections to call in from one source.
An example would be ones Navigational links, tedious to have to make changes to every page of a site when you wanted to ad or change a link so you would turn the links markup into an included file; this file however will ONLY have the necessary markup for the links e.g
<ul> <li><a href="#">Link</a></li> </ul>
You include this file at the point at which you want the links to appear in the main page.
It must not have further html tags, head sections etc.
You can also turn the head section of the page into an include opening the page with html tag and opening body tag and then create a further file that might include your footer links and the closing body and html tags.
Sun, 2010-03-14 12:30
#4
Hugo wrote:You are
You are misunderstanding the use of includes at the moment. An include is a section of the complete page, it's like a jigsaw. Look at a complete page and divide it up into what would be useful sections to call in from one source.
I haven't tried this yet, but I think I understand you, Hugo: I was "including" content that was duplicative of what is in the container page. IOW, I was incorrectly applying frame sensibility in a non-frame context. I will apply this new learning today!
And yes, you're very much understanding what I want to do with "include." I have a menu with a lot of little thumbnails and links in it, which will appear on every page on my site. I do not want to have to edit every page in order to make changes to that menu; it will change often.
I ran the validators, and I was surprised. I got no errors connected to the thumbnails. Only errors associated with "border" properties for other elements. But that information is nonetheless useful. I'm glad to have found these tools, because I will use them again and again.
Thanks to both of you for your help. This forum is a great resource.
Elizabeth
Sun, 2010-03-14 13:15
#5
You don't include the <head>
You don't include the <head> and <body> in each include file. The resulting html page must have only one of these. As Hugo said, like a jigsaw puzzle. You're throwing in pieces from another jigsaw puzzle and hammering them into place. 
Sun, 2010-03-14 13:45
#6
Yeah, I was definitely doing
Yeah, I was definitely doing that. I've carved the content of the "included" page down to nothing but the thumbnail pictures. No "html" "body" tags etc., just "img src" after "img src."
The problem with the spaces below the thumbnails is still there, but I'm seeing it can be corrected by mandating a tiny font-size for the area where the thumbnails land. I'm assuming that means there's a line height or margin issue afoot, but neither of those tags is working - at least not when applied to the container "div" or "p" for these thumbnails. Hmmm.
Sun, 2010-03-14 14:36
#7
you should apply your updates
you should apply your updates to the online test page as well as your local copy. We're not seeing the changes you have made.
The space under the images is reserved for descenders of a font (g,j,p), while the image is set to the baseline. You can set the images to align to the bottom to eliminate the gap.
.div img { vertical-align: bottom; }
btw, it's probably not a good idea to name ids and classes as html elements.
Sun, 2010-03-14 15:43
#8
I don't have a local copy
I don't have a local copy going; I have a new mock-up going remotely, sorry for not linking to that! Here it is:
http://www.elizabethlarose.com/untitled-7.php
I licked the "space below" problem, albeit inelegantly, by applying the line-height and margin styles to the paragraphs containing the images. I will try vertical-align and see if that works, too. Thanks for the suggestion.
After applying the line-height and margin styles, I then had an issue with gaps *between* each image in a given row of images (sigh), which I solved by applying the "font-size" property and setting it to 0px. "Display: block" separated each image so that it appeared in a different row. And consequently, I gave up on that as a possible solution.
A different problem I realized yesterday. If my menu expands, it does not scroll, because the container page has no idea what height the included menu content is. There's a javascript solution to that, I'm sure. Add'ly, even if I can get it to scroll, when a new page loads, wherever the user last scrolled to, will be lost. Probably a JS solution there, too. This should be fun because I don't know how to write javascript. 
Mon, 2010-03-15 15:34
#9
Gaps between are due to being
Gaps between are due to being inline, you could get rid of them by writing all your <im> tags on the same line with no space separating them, not best approach, or float them which will display:block them automatically and close the space up.
Mon, 2010-03-22 12:31
#10
Hugo wrote:Gaps between are
Gaps between are due to being inline, you could get rid of them by writing all your <im> tags on the same line with no space separating them, not best approach, or float them which will display:block them automatically and close the space up.
Hugo, thank you for your post. I was doing the former for awhile, and you're right, it's not the best approach; makes it difficult to edit. When I apply "float" to my images, I have a choice of left/right. I want images to be centered. I tried to apply "float: left" with "margin: auto" or "margin: 0px" to each image to get them to center, and they resisted me. They all aligned left. Div tags had no effect.
See the menu in the lower right and the thumbnails on the right:
http://www.elizabethlarose.com/beulah/index.php
I applied this to each paragraph of images on the left:
{ margin: auto; font-size: 0px; border: 0px; }
And this to each paragraph containing images on the right:
{ margin: 0; line-height: 0px; border: 0px; }
No clue as to why these different combinations worked on one and not the other. I'd really like a consistent way to get images centered without spacing around them because every page on my site is just one series of vertically stacked, centered images after the other.
Thanks again for your help! 
Mon, 2010-03-22 13:50
#11
If you know how many images
If you know how many images you want in a line and given that images have inherent fixed widths, create a parent element for them and give that a fixed width equal to a multiplication of the number of individual image widths and apply auto margins to the parent that will allow you centre a block of images en mass.