Position images at bottom of div tag?

How do I position images at the bottom of a div tag?
These images are going to be used as links and Im using a
template which will double there size on certain pages, so I cant
use background images.
Please help as I cant believe this isn't possible!
James

I dont understand what you mean by;
'If you do not know the widths, and you want them all to flow
one after
the other, the make another div as their container, and move
the
"position:absolute;right:0px;" styles to the new div'
When I apply a rule for all images in the div tag, the images
all sit on top of one another;
.container img {
position: absolute;
bottom: 0px;
If I set the images individually I can stop them from doing
this;
.container #image1 {
position: absolute;
bottom: 0px;
left: 320px;
The problem however is that this design is for a template.
The images in the template will double in size when the user is on
that page.
If i use a pixel (or a %) value for the left position, then
the left hand side of the image is centered, not the centre of the
image. This means that the space between the images will vary when
one of them enlarges.
This could be solved if there was some way of making the
images sit next to each other, without specifying a position left
value (like when you insert images into a div tag with no rules).
Can this be done?
Alternatively, is there a way of using a position left value
which controlled the position via the center of the image, not the
left side? Then I could use % values and the images would still
look ordered.

Similar Messages

  • Position Image at Bottom of Div Tag

    OK, so this may be the stupidest question ever, but how do I
    Position an Image at Bottom of the Div Tag? I named the image and
    then set;
    vertical-align: bottom;
    But this doesn't seem to have worked. I could achieve the
    bottom alignment with multiple div tags but this seems needlessly
    complicated. How should i do this?

    > ok, is there a rule for when you should use an image as
    a background as
    > opposed to placing it normally?
    No. But there are things you can do with a background image
    that you cannot
    do with a foreground one, and vice versa. I'm sure that's not
    the answer
    you wanted to hear however.
    Anytime I need to place an image at a specific location
    within a container
    (like at the bottom, or the right edge), I'm thinking of
    using a background
    image.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "jameswoody" <[email protected]> wrote in
    message
    news:fv5el0$dn1$[email protected]..
    > ok, is there a rule for when you should use an image as
    a background as
    > opposed to placing it normally?
    > Thanks

  • Positioning multiple images at bottom of Div Tag

    I want to position some images so they are side by side, at
    the bottom of a div tag. So far the only way i've managed to do
    this is by using a padding-top value. Is there a better way?
    I also want these images to be centered horizontally.
    Thanks

    Are these cosmetic in use? Make them a single image
    background.
    #foo { background-position: center bottom;
    background-repeat:no-repeat; }
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "jameswoody" <[email protected]> wrote in
    message
    news:fvctr7$ls3$[email protected]..
    >I want to position some images so they are side by side,
    at the bottom of a
    >div
    > tag. So far the only way i've managed to do this is by
    using a padding-top
    > value. Is there a better way?
    >
    > I also want these images to be centered horizontally.
    > Thanks
    >

  • Inserting an image in dreamweaver through div tag

    Hi I am inserting an image in a created div tag but my image is checkered and repeats it's self like a pattern.  How do i turn that off?

    Working with CSS Backgrounds:
    http://www.w3schools.com/css/css_background.asp
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • How do I center an image inside a CSS div tag using dreamweaver?

    I know this may seem like a very silly queston to ask because it should seem so simple but how do I do that? I am having trouble being able to center an image inside of a div tag. Here is the code I have come up with so far. Thanks in advance for your help.
    </style>
    </head>
    <body>
    <div id="PageContainer">
      <div id="PageHeader"> img.centered{display:block; margin-left:auto; margin-right:auto; }<img src="Untitled-5.jpg" alt="rowland" class="centered" /></div>
    <div id="PageMenu">Content for  id "PageHeader" Goes Here</div>
    <div id="PageBody">Content for  id "PageHeader" Goes Here</div>
    <div id="PageFooter">Content for  id "PageHeader" Goes Here</div>
    </body>
    </html>
    Also you can ignore the other div tags after the first div id. The first div id that has my image link is the one I am trying to get to center my image. The image is in there just not centering.

    Centering Pages, Images and other elements with CSS:
    http://cookbooks.adobe.com/post_Centering_web_pages_and_other_elements_with_CSS-16640.html
    Nancy O.

  • Image Map in a div tag causing problems in webpage

    I have an image map in a div tag (I'm using Dreamweaver so
    I've place hot spots on a gif within a div tag). When I preview in
    a browser the hot spots are creating an empty space between the
    image and the div tag below it, which there shouldn't be. Prior to
    this I had done the same thing but using layers instead of div tags
    and it was fine... there was no unwanted space. What am I doing
    wrong?

    Hi lauren,
    I tried to replicate the above mentioned issue, but did not get the <div> around the image in Webhelp output. Would it be possible for you to provide more information on this:
    At what point does the <div> start appearing around the image, as soon as the CBT expression is applied?
    If yes, what is the expression?
    What happens when expression is set to None again and individual CBT is under application
    Is there a spacing or the CBT text just follows the inline image?
    Please send us a sample file for the same, if possible. Thanks!
    Amit

  • Inserting Images into Dreamweaver through Div Tag

    Hi im quite new to Dreamweaver and i've got CS3...I've just
    designed and sliced up a website in Photoshop and have started to
    compile it together in Dreamweaver using HTML and CSS. I've just
    added a Div tag and added images into the page and i've got stuck,
    i cant seem to put another image next to one iv already placed
    their.
    I need help on how to work with Div Tags and applying images
    so that i can fix my website like a Jigsaw.
    I have provided the code i hav in my HTML so far...

    Maybe this will help you -
    Taking a Fireworks comp to a CSS-based layout in Dreamweaver
    http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html
    http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "DThandi" <[email protected]> wrote in
    message
    news:gk8anj$4qc$[email protected]..
    > Let me show you the before and after images of the site
    im working on,
    > then
    > maybe what im trying to describe can become more
    clearer...Your right that
    > i do
    > need some basic understanding, I actually used to know
    the answer to my
    > own
    > question but since i havn't played around with
    Dreamweaver for a while i
    > seem
    > to have forgotten.
    >
    > This was the image on Photshop:
    >
    http://i187.photobucket.com/albums/x151/ohhchakdeh/SAMPLE.jpg
    >
    > This is where I am stuck now:
    >
    http://i187.photobucket.com/albums/x151/ohhchakdeh/stuck.jpg
    >
    > These are all the small images i have sliced up from
    Photshop:
    >
    http://i187.photobucket.com/albums/x151/ohhchakdeh/Untitled.jpg
    >
    > As you can see i have trouble coding in HTML. So far i
    have been
    > following a
    > tutorial video showing me how to had images and align
    them through Div
    > Tag...But now i am trying to put images side by side in
    the Navigation
    > area and
    > on top of and underneath each other. As you can see i
    have Home.jpg and
    > Home-Scrap.jpg. Home Scrap needs to go under Home and
    both of them images
    > need
    > to go next to image Left-Short.jpg.
    >
    > Thank You
    >

  • SWF not aligning to bottom of div tag?

    I'm trying to build a tight site and have an .swf file that RELIES on being at the absolute bottom of its div section, but when I put it in and look at it online, there's a small gap between the .swf file and the next div.  It's HORRIBLE.  http://www.hrwisellc.com/newsite
    How do I fix this?

    Can't be done reliably, but you can fool people into thinking you have done so.  Google "Faux Columns".

  • How do I center an image inside a div tag using fluid grid layout?

    where do I find and what do i use the image properties position when using the fluid grid layout. I'd like to center the image in the mobile page versus th left position in the desktop.

    This is what my css codes looks like where the image is in the div tag:
    #logo_links {
        clear: both;
        float: left;
        margin-left: 0;
        width: 32.2033%;
        display: block;
    This is the html code where the image is:
      </div>
        <div id="logo_links">
          <div align="center">
            <p><img src="../fluidgrid/images/3_7x2logo.jpg" alt="" width="236" height="110" align="left"></p>
          </div>
        </div>
    I'm going to need more detail where to insert the suggested code as I am a newby!
    Thanks

  • Positioning image?

    I have two images in their own div tag but I'm not having any luck keeping them level with each other. The 2nd image want to jumps to the division below.
    I floated the 2nd image right and cleared left but this doesn't isn't keeping my image level with first image. I put the positioning as relative.
    This is what my division looks like. Is there anything I can do to move my image back up?
    <div id="servicesPhotos">
    <img src=file:///I|/Dreamweaver/bikes/assets/photos/bike_on_stand.jpg width="332" height="249" id="bike_on_stand" alt="Bike maintenance"/>
    <img src=file:///I|/Dreamweaver/bikes/assets/photos/wheel_service..jpg width="332" height="249" id="wheel_service" alt="Wheel truing" />
    </div>
    #container #servicesPhotos #bike_on_stand {
    float: left;
    clear: right;
    #container #servicesPhotos #wheel_service {
    float: right;
    position: relative;
    clear: left;

    Maybe this will help you see how floats and margins can be used to create 3-evenly spaced boxes.  You can put images, text, flash objects or whatever you wish inside them.
    3 CSS boxes -
    http://alt-web.com/DEMOS/3-CSS-boxes.shtml
    Alternatively, you could do the same thing much quicker with a 3-column table. 
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists
    http://alt-web.com/
    http://twitter.com/altweb
    http://alt-web.blogspot.com

  • CS4 Div Tags Help Needed

    I just upgraded to CS4. In dreamweaver I am trying to build a
    site that I designed in Photoshop to Dreamweaver using all Div
    Tags. I can get the container to center, but when I place other
    divs on top, they wont stay where I put them. I have taken absolute
    positioning off, but then they fly off position totally. How to get
    around this? I have tried relative, fixed and inherit, all with the
    same result. I just cant figure it out. Can anyone help me?

    Most of which are erroneous guesses.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "Ian Edwards" <[email protected]>
    wrote in message
    news:ggb7c1$qtg$[email protected]..
    > Hi
    >
    > it would he if you uploaded the code so we can see it.
    If you do that then
    > no doubt you will be deluged with solutions.
    > cheers
    >
    > Ian
    > "martcol" <[email protected]> wrote in
    message
    > news:ggavg8$gf7$[email protected]..
    >>
    quote:
    Originally posted by:
    [email protected]
    >> ....when I place other divs on top, they wont stay
    where I put them. I
    >> have
    >> taken absolute positioning off, but then they fly
    off position
    >> totally.
    >>
    >> Do the< div> tags sit under each other rather
    than if it is what you
    >> want, sit
    >> side-by-side? Or do they actually, "fly off
    position?" Have you thought
    >> about
    >> the "float" property?
    >>
    >> Sometimes, leaving off a single closing tag in my
    code can have
    >> catastrophic
    >> results for positioning - have you checked if your
    HTML validates.
    >> Often, that
    >> can be a useful way of checking if your code is the
    problem.
    >>
    >> Martin
    >>
    >

  • Why aren't my CSS and div tag boxes displaying the background images I'm plugging in?

    I'm using the CSS dialog boxes to places images via the background image option into my dreamweaver site. Everything looks fine in dreamweaver but when I view it any of the browsers, two of the images I've place as div tag background images don't work....the overal background image of the site works, but these don't show up ....
    here's my code if it helps to answer
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Main</title>
    <style type="text/css">
    body {
    background-image: url(images/realgrade.jpg);
    background-repeat: repeat-x;
    text-align: center;
    html, body {
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 25px;
    #wrapper {
    width: 930px;
    text-align: left;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/possible%20image. jpg);
    background-repeat: no-repeat;
    #header {
    height: 192px;
    width: 237px;
    background-image: url(images/logo_fill.jpg);
    background-repeat: no-repeat;
    position: absolute;
    left: 35px;
    top: -25px;
    #mainNav {
    background-color: #33F;
    height: 200px;
    width: 272px;
    float: left;
    margin-top: 233px;
    #maincontent {
    height: 600px;
    width: 608px;
    float: right;
    margin-bottom: 45px;
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: center 270px;
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/images/opaqueMaincontent .png);
    #sidebar {
    background-color: #F36;
    height: 250px;
    width: 272px;
    clear: left;
    float: left;
    #footer {
    height: 525px;
    width: 870px;
    clear: both;
    padding-top: 45px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    background-image: url(images/footer_image.jpg);
    background-repeat: no-repeat;
    margin-top: 45px;
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header">
        <p> </p>
        <p> </p>
        <p> </p>
      </div>
      <div id="mainNav">
    <p> </p>
    </div>
      <div id="maincontent"></div>
      <div id="sidebar"></div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    here's what I'm going for
    here's what I'm getting in the browser
    Please help!

    Your image files are pointing to your hard drive, not your server.  You have this
    background-image: url(file:///Macintosh%20HD/Users/jimmymoreira/Unnamed%20Site%204/imag es/opaqueMaincontent.png);
    and you should have this
    background-image: url(imag es/opaqueMaincontent.png);
    Also, is your images file named imag es?
    Gary

  • How do I overlap text in a Div Tag over an Image

    Hi,
    I have a large image which I would like to set as as border around the page.
    Please see www.touchw1.com, it is the grey border with the 3 archways on it that I would like as a border.  At present, everything on this screen apart from the contact details at the bottom are saved as one JPEG.  I saved it like this as I don't know how to set that border as a border and then insert other div tags over, or in it?  Can anyone help??
    Thanks

    Create a 'wrapper" and 'footer1' <div>
    <div id="wrapper">
    </div><!-- end wrapper -->
    <div id="footer1">
    </div><!-- end footer1 -->
    Create some css:
    #wrapper {
    border: 1px solid #333;
    border-bottom: none;
    width: XXXpx /* width you require */
    margin: 0 auto; /* centers wrapper horizontally in browser window */
    #footer1 {
    background-image: url(archway.gif); /*archway image plus borders */
    background-repeat: no-repeat;
    height: XXpx /* height of background archway image */
    width: XXXpx /* width you require */
    margin: 0 auto; /* centers footer1 horizontally in browser window */
    Then start adding content to the 'wrapper' <div>. Insert your logo into a <h1> header.
    <div id="wrapper">
    <h1><img src="images/logo.jpg" width="XXX" height="XXX" alt="TouchW1 Sales and Press Agency - Central London" /></h1>
    <p>TouchW1 is a newly created niche agency that specialises in all aspects of sales management, press and licensing, based in the heart of Central London</p>
    </div><!-- end wrapper -->
    <div id="footer1"></div><!-- end footer1 -->
    Move h1 header into position in the 'wrapper" <div> with css:
    h1 {
    margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
    padding: XXpx XXpx XXpx XXpx;
    Do the same with the paragraph tag
    #wrapper p {
    margin: XXpx XXpx XXpx XXpx; /* top, right, bottom, left */
    padding: XXpx XXpx XXpx XXpx;
    Add rose as background to 'wrapper' <div>
    #wrapper {
    border: 1px solid #333;
    border-bottom: none;
    width: XXXpx /* width you require */
    margin: 0 auto; /* centers wrapper horizontally in browser window */
    background-image: url(rose.jpg);
    background-position: top right;
    background-repeat: no-repeat;
    Hummm that its really....add a 'footer2' <div> for the address line

  • Placing images on top of a div tag

    Hello Dreamweavers
    Id like to know if how can I place an image in front,or should I say ontop of a div tag,for example
    Ive made a div tag,and I would like an image of a logo to be in front of that div tag.
    thank you.

    inquestflash wrote:
    Hi osgood.
    In the header i would have a background image of some sort. now you are going to tell me,why dont I place the logo on the banner
    No I was making sure there is no text in the header first.
    You can use an absolutely positioned <div>
    #header {
    position: relative;
    height: 220px; /*change height to the height of your bg image */
    #logo {
    position: absolute;
    top: 10px;
    left: 30px;
    height: 200px; /*change height to the height of your logo image */
    width: 200px; /*change width to the width of your bg image */
    Then just add the 'logo' <div> inside the 'header' <div> like below:
    <div id="header">
    <div id="logo">Logo goes here</div>
    </div><!-- end header -->

  • Div tag with text and image verticaly centered

    I am having a problem with vertically aligning an image with
    a text line in a div tag using an external CSS file.
    Any help would be appreciated

    quote:
    Originally posted by:
    Night_Ripper
    You can simply do this:
    ProdDimensions img {vertical-align:middle;}
    Or you can use an un-ordered list that has your arrow
    embedded as a background image, something like this:
    .ProductList ul {list-style-image:
    url(Arrow.gif);list-style-position:outside;list-style-type:none;text-align:left;}
    .ProductList li {margin:0;}
    wrap your unordered list around a div with the class
    ProductList (or whatever you want to call it) and it will display
    with the arrows in the middle of the text.
    Another way to do it would be to set a background image on
    ProdDimensions class like this:
    background: url(Arrow.gif) left center
    no-repeat;padding-left:21px;
    That will simply put a background image to the left middle of
    your div, the padding will ensure the text is not on top of the
    arrow.
    I used your idea of using the arrow as the div bg and it
    worked like a charm.
    Thank you very much for your help!

Maybe you are looking for