www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: <img> in <div>

Hybrid View

  1. #1
    Join Date
    Dec 2011
    Posts
    8

    <img> in <div>

    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?

  2. #2
    Join Date
    Nov 2011
    Posts
    47
    Is the second div floating? you may need to add a clear: both; to your css for that div.

    helps to see the code.

  3. #3
    Join Date
    Dec 2011
    Posts
    8

    no CSS

    Thanks for your quick response. I'm using just the <div>'s with a style="background-color" setting in each.

    The second block contains
    <br />
    <img src=...>
    <br />

    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.

  4. #4
    Join Date
    Nov 2011
    Posts
    47
    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
    <div>
    </div>
    <br />
    <img>
    </br>

    <div>
    links
    </div>

    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?

  5. #5
    Join Date
    Dec 2011
    Posts
    8
    The html code is:

    <div style="background-color:#D9D9FF">
    <BR />
    <H1>
    &nbsp; Client Name</H1>
    <BR />
    </div>
    <!------------------------------------------->
    <div style="background-color:#96A6FE">
    <br />
    <img src="Photo.jpg" width="147" height="196" align="left">
    <br />

    <div class="menu">
    <a href="index.php">HOME</a>
    </div>
    <div class="menu">
    <a href="Link1.php">Link 1</a>
    </div>
    <div class="menu">
    <a href="Link2.php">Link 2</a>
    </div>
    <div class="menu">
    <a href="Link3.php">Link 3</a>
    </div>
    <div class="menu">
    <a href="Link4.php">Link 4</a>
    </div>
    </div>

    and the CSS is

    div.menu
    {
    FONT-WEIGHT: bolder;
    FONT-SIZE: x-large;
    TEXT-ALIGN: none;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none
    }

    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?

  6. #6
    Join Date
    Nov 2011
    Posts
    47
    <img src="Photo.jpg" width="147" height="196" align="left">

    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.

  7. #7
    Join Date
    Dec 2011
    Posts
    8

    align

    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.

    Thanks.

  8. #8
    Join Date
    Nov 2011
    Posts
    47
    Yes if you just have

    <div style="background-color:#96A6FE">
    <br />
    <img src="Photo.jpg" width="147" height="196" />
    <br />
    </div>

    The div will extend the height of the photo.

    As for your staggered text. It might be easier to add padding to your links. like so (you would obviously play with the values):

    <div class="menu" style="padding-left: 0px;">
    <a href="index.php">HOME</a>
    </div>
    <div class="menu" style="padding-left: 20px;">
    <a href="Link1.php">Link 1</a>
    </div>
    <div class="menu" style="padding-left: 30px;">
    <a href="Link2.php">Link 2</a>
    </div>
    <div class="menu" style="padding-left: 40px;">
    <a href="Link3.php">Link 3</a>
    </div>
    <div class="menu" style="padding-left: 50px;">
    <a href="Link4.php">Link 4</a>

  9. #9
    Join Date
    Dec 2011
    Posts
    8
    Your corrected <img> tag fixed the "sticking out" problem.

    For positioning the links to the right of the photo, I used

    <div class="menu" style="position:relative;top:-170px;left:180px;">

    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.

    However...

    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??

    Thanks!

  10. #10
    Join Date
    Nov 2011
    Posts
    47
    Try this.
    div.menu
    {
    FONT-WEIGHT: bolder;
    FONT-SIZE: x-large;
    TEXT-ALIGN: none;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
    float: left;
    padding-top: 30px;
    }

    <div style="background-color:#D9D9FF">
    <BR />
    <H1>
    &nbsp; Client Name</H1>
    <BR />
    </div>
    <!------------------------------------------->
    <div style="background-color:#96A6FE;">

    <div style="float: left; padding:10px; ">
    <img src="Photo.jpg" width="147" height="196" />
    </div>
    <div class="menu">
    <a href="index.php">HOME</a><br />
    <a style="padding-left: 60px;" href="Link1.php">Link 1</a><br />
    <a style="padding-left: 120px;"href="Link2.php">Link 2</a><br />
    <a style="padding-left: 180px;"href="Link3.php">Link 3</a><br />
    <a style="padding-left: 240px;"href="Link4.php">Link 4</a><br />
    </div>
    <div style="clear: both;">

  11. #11
    Join Date
    Dec 2011
    Posts
    8
    Nacort,

    This exchange is wonderfully helpful!

    I tried your suggestion, but it resulted in the photo once again "sticking out" below the colored band. So I deleted the "float" from the photo's <div>.

    This, of course, messed up the positioning of the navigation links. So I changed the <a> tag to:

    <a style="position:relative;top:-180px;left:180px;" href="index.php">HOME</a>

    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

    Many thanks!

  12. #12
    Join Date
    Nov 2011
    Posts
    47
    Hmm. that code worked fine for me. oh well as long as it's working. glad to help

  13. #13
    Join Date
    Dec 2011
    Posts
    8
    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...


    The CSS:

    #menu
    {
    FONT-WEIGHT: bolder;
    FONT-SIZE: x-large;
    TEXT-ALIGN: none;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
    float: left;
    padding-top: 30px;
    }

    #side
    {
    float:left;
    width:150px;
    padding:4px;
    height:100%;
    background-color:#F4FFDF;
    }


    and header.php:

    <!------------------------------------------->
    <div style="background-color:#D9D9FF">
    <BR />
    <H1> &nbsp; Client Name</H1>
    <BR />
    </div>
    <!------------------------------------------->

    <div style="background-color:#96A6FE;">
    <div style="padding:10px; ">
    <img src="Photo.jpg" width="147" height="196" /><br />
    </div>
    <div ID="menu">
    <a style="position:relative;top:-185px;left:180px;" href="index.php">HOME</a>
    <a style="position:relative;top:-165px;left:198px;" href="Link1.php">Link 1</a>
    <a style="position:relative;top:-145px;left:215px;" href="Link2.php">Link 2</a>
    <a style="position:relative;top:-125px;left:235px;" href="Link3.php">Link 3</a>
    <a style="position:relative;top:-105px;left:250px;" href="Link4.php">Link 4</a>
    <br />
    </div>
    </div style="clear: both;">

    <div ID="side">
    Sidebar Information
    </div>

  14. #14
    Join Date
    Nov 2011
    Posts
    47
    What browser are you using. Looks fine in firefox

  15. #15
    Join Date
    Dec 2011
    Posts
    8
    Nacort,

    Thanks for your continued interest.

    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles