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
>

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

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.

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
>

Position multiple images CSS

Hello I need to position 5 images of different sizes
(combined they will equal a rectangle) the images will be links to
other pages. I have been trying to do this using an unordered list
with out anyluck.
can someone reccomend what method i should be looking for.
Thank you,
Shontelle

"shonts" <[email protected]> wrote in
message
news:f6oeqr$4o$[email protected]..
> Hello I need to position 5 images of different sizes
(combined they will
> equal
> a rectangle) the images will be links to other pages. I
have been trying
> to do
> this using an unordered list with out anyluck.
> can someone reccomend what method i should be looking
for.
Give your UL a width/height that matches the dimensions of
the rectangle
(style it with "position:relative"), then use
"position:absolute" to
position each one of the LI.
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
The perfect FAQ page:
http://www.TJKDesign.com/go/?9
CSS-P Templates:
http://www.TJKDesign.com/go/?1
CSS Tab Menu:
http://www.TJKDesign.com/go/?3

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

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>
<div id="footer1">
</div>
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>
<div id="footer1"></div>
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

How can I remove people tags from MULTIPLE images in Organizer 13?

How can I remove people tags from MULTIPLE images in Organizer 13? The strategy for removing keyword tags does not work. It appears that keyword tags and People tags are considered something completely different in 13. I highlight multiple images, right click, and under keyword tags it says there are no keyword tags. There does not appear to be an option for people or other tags. Can anyone help? It is going to take literally hundreds of hours for me to do this one photo one tag at a time. ??

Comp. 792 wrote:
Hi, my linked images all have dashed lines at the bottom of the images. I searched for an answer and someone said to add:
img a {text-decoration:none:}
to the end of my CSS,
That CSS is complete nonsense. The correct way to remove borders from around links is here: http://forums.adobe.com/thread/417110.
If you want to get rid of dotted lines, they are almost certainly caused by the outline property. However, outlines around links are there for a reason: it provides a visual "you are here" clue to people who navigate the web with the keyboard, either through preference or because of disability. You shouldn't remove the dotted outline without providing a different visual clue.

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>

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!

Positioning multiple images at bottom of Div Tag

Similar Messages

Maybe you are looking for