I'm using two <div>'s to create two background colors in a logo. The top block has the client's name with one background color, and below it, the second <div> has the client's photo and navigation links with a different background color. This works well, EXCEPT that the height of the second <div> only extends down to the lowest navigation link, NOT to the bottom of the image. I can fake it by adding <br>'s after the last link, thereby extending the height of the div block, but that doesn't seem very clean. Am I missing something?
The result is two bands of color, the first enclosing the client's name, and the second enclosing the top of the photo and all of the navigation links, but the photo sticks out below the bottom of the band of color.
This is all part of a "header.php" file that is intended to begin (be included in) each page of the website (hence the php).
I'm guessing that <div> blocks define themselves by text, not photos?
As for the layout problem, were you suggestion that this change would make the <div> block automatically take into consideration the height of the <img>, or would my posted problem still remain?
As for the positioning of the links, in fact the client wants them staggered, so that the first link is next to the photo, at the top, the next link is both lower and more to the right, the next link yet lower and yet more to the right, etc.
It is a nice effect, and I've been playing (with very limited success) with the absolute and relative positioning features of each link's <div> block, and ended up just using spaces as a temporary fix. But first things first; I'll check (much later today) any effect of your suggestion on my original problem.
for the "HOME" link, and decreasing "top" and increasing "left" values for the remaining links. This positioned them to the right of the photo, and staggered, quite as desired.
Positioning the links does not remove the space from which they were re-positioned. That is, the photo's colored background extends several lines below the photos, i.e., to include where the links would have been had they not been re-positioned. Naturally, I'd like the height of the colored part to extend just one line (one <br />) below the photo, not five (for the five moved links). So, what's the next step??
and the other navigation <a> tags to reflect decreasing "top" and increasing "left". This worked, and the photo is now enclosed within the colored band.
Removing the "float" also allowed a later <div> with a "float" (for the left-side "contact info" that is also to appear on every page, below this logo part) to actually be at the left--when the <img>'s "float" was present, the later float wasn't all the way to the left; apparently the image's float prevented that (although perhaps there would have been another way to deal with that).
Anyway, I'm satisfied with what I'm now seeing, and with what I've learned about this tricky business. On to my next learning experience
Just after our last exchange, all looked well; Logo at the top, sidebar at the left, text of each link in the remaining part.
I'm not sure what I changed, but now the Sidebar is over on the right, with just a little room to the right of it for the main text in each link. Egads! I *think* I've now returned the html and css to its previous state, but I can't get that sidebar back to the left.
Below is the css, and the html of the header.php file included in each link's page. Any ideas or suggestions *very* welcome...
It is fine now. I moved the "float" from the CSS menu to the <img> tag. (Also, for other reasons I changed the CSS from ID to CLASS, but I doubt that mattered.) The sidebar is again on the left. I couldn't have come this far this fast without your kind assistance.
Now there's an interesting little problem, which I think I understand. The HOME page (index.php) currently has nothing in the non-logo, non-sidebar area. The sidebar's colored strip extends down the left side of the browser (Firefox) a ways. On other pages (Link3.php, etc) the sidebar looks great. However, on one of them, which has a lot of text, the sidebar extends down NOT the full height of the browser, but only part way--I'm imagining that it extends down as far as it did on the index.php page, and that it somehow fixes itself at that height. The lots of text appears to the right of the sidebar, but when the sidebar ends the text appears under it, in other words, fully across the width of the browser as if there were no sidebar (and in fact, based on the absence of the sidebar color, apparently there isn't). What do you think about my hypothesis?