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?
12-10-2011, 11:31 AM
Is the second div floating? you may need to add a clear: both; to your css for that div.
helps to see the code.
12-10-2011, 11:40 AM
Thanks for your quick response. I'm using just the <div>'s with a style="background-color" setting in each.
The second block contains
for the photo, followed by a bunch of
<div class="menu"><a href="xxx">link</a></div>
for the links, then the </div> to close this second block.
12-10-2011, 11:49 AM
paste the code from the beginning of the first div to the end of the second div and the css code for the menu class and any other classes used in that section of code.
reason I need to see the code is that if it's like
Then your links should be below your img. and the background should cover the img. But im pictureing you have the links to the right or left of the img?
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?
the align="left" is deprecated
remove that and add a /
so it looks like this
<img src="Photo.jpg" width="147" height="196" />
But this is going to create a new problem for you. It is going to push the links down below it. Let me know if you need help on getting them next to the picture.
12-10-2011, 01:41 PM
Thanks for the correction to the <img> tag.
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 :)
12-11-2011, 02:27 PM
Hmm. that code worked fine for me. oh well as long as it's working. glad to help
12-11-2011, 06:58 PM
Ok, now I'm *totally* confused!
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?