How to get my Image to outline correctly in an assigned DIV

The last question I posted here regarded placing DIVs within parent DIVs and getting them to outline correctly. This question is actually strinkingly similar, and hence my hesitance to post it. I feel I'm looking over something extremely obvious, but I just can't seem to pinpoint my thoughts to it. My problem has to with the 'Image' block in the picture posted below:
Click here for image
Whenever I place an image/background image into that DIV, it jumps into the center and for some reason sees that place as its starting position. Using absolute positioning and negative values for left and top I got it into position, but I figured that this was just a temporary solution to a problem currently unsolved. Like ducktaping a leaking valve, you want to find a good solution ASAP.
I have left the leftcolumn edited so an image can be given of what I want to reach. However, the center column will also include text on the right of the image (quite possibly alligning around it should the image be smaller in height than the border). I want the image to outline below the upper title (and seperate DIV) 'Corporate News'.
Another thing that seems to happen is that it completely takes out the bar which is put in as a seperate DIV, presumabely because it just knocks it down because the two don't overlay for some reason (despite the bar having a higher z-index and being absolutely positioned with 0px from the bottom).
Source coding for the center column:
<div id="centercolumn">
  <div id="indextitles">
    <div id="centercolumntitle">CORPORATE NEWS</div>
  </div>
  <div id="centercontent"><img src="images/Index page/News/newsmain.png" width="843" height="411" /> </div>
  <div id="centercbar">
    <div id="cbartext"> <a href="news.html">
      <div id="centercbartext">Old makes way for the new</div>
      </a> </div>
  </div>
CSS coding for the parent DIV:
#centercolumn {
background-image: url(../images/Columns/centercolumn.png);
background-repeat: no-repeat;
height: 349px;
width: 672px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
float: left;
overflow: hidden;
CSS coding for the indextitle (Corporate News) [This CSS coding applies to all three black colored titles in the image]:
#indextitles {
position: absolute;
z-index: 2;
left: 10px;
top: 5px;
CSS coding for the bar which is meant to be resting on the lower border of the image (similar to the ones of the other columns):
#centercbar {
background-image: url(../images/Column%20bars/centercbar.png);
background-repeat: no-repeat;
height: 49px;
width: 672px;
position: absolute;
z-index: 5;
bottom: 0px;
No formatting has been applied yet to the actual image. I'm just trying to understand why it won't jump into place, despite all of my efforts.

How come you need to use so many <divs>? The less <divs> the better and easier to work with (see example below) Incidentally the image size in the code that you have supplied is way bigger in dimension than the parent <div> it's inserted into which will distort everything. Copy and paste the code below into Dreamweaver. Position the image <div> 'contentcenter' using margin NOT absolute positoning.
<!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>Untitled Document</title>
<style type="text/css">
#centercolumn {
background-image: url(../images/Columns/centercolumn.png);
background-repeat: no-repeat;
height: 349px;
width: 672px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
float: left;
background-color:#FF9;
#centercbar {
background-image: url(../images/Column%20bars/centercbar.png);
background-repeat: no-repeat;
height: 49px;
width: 672px;
position: absolute;
z-index: 5;
bottom: 0px;
background-color:#CC0;
#centercontent {
width: 430px;
height: 230px;
margin: 40px auto 0 auto; /* sets equal margin left/right */
border: solid 1px #000;
background-color: #999;
</style>
</head>
<body>
<div id="centercolumn">
<div id="centercolumntitle">CORPORATE NEWS</div>
<div id="centercontent"> </div>
<div id="centercbar">Old makes way for the new</div>
</div>
  </div>
</body>
</html>

Similar Messages

  • How to get the image stored in archieve link as an attachment in work item.

    Hi All,
    through transaction OAWD we are storing scanned images.
    Once this transaction is executed a workitem appears in the inbox of the initiator with the scanned invoice as attachment.
    When the user executes the work item FV60 screen is displayed where the user enters the data based on the scanned invoice attachment.
    After the user Parks the document the custom workflow triggers and a workitem appears in the inbox of an approver.
    Our requirement is that the scanned image should also appear as the attachment.
    Can you please suggest how to get the image stored in archieve link as an attachment in work item.
    Regards
    Shraddha

    Hi Martin,
    with every parked document a scanned image is linked.
    I need to create a link under objects and attachments in the work item, such that when the user clicks that link the image is displayed.
    At present the following functionality is available.
    The BO used is FIPP
    Objects and attachments:
    parkeddocument:AK0108500001252008.(via FIPP binding with WIOBJECT_ID)
    On clicking the link below objects and attachments: the parked document AK0108500001252008 opens in display mode.
    Now we want to have 2 links:
    parkeddocument:AK0108500001252008.
    image.
    When we click on the link image then the scanned invoice linked to the document should get opened.
    I am able to get the image id of the the image through  SAP_WAPI_GET__OBJECTS,
    export parameter leading_object provides the detail.
    But I am not able to figure out how to use it in my workflow to display it as an attachment.
    Hope this will give a better understanding of my question.
    can you please suggest as to how I should proceed with it.

  • How to get my images always order by file name, and not by time of captur, in all the folders in the library?

    How to get my images always order by arquive name, and not by time of captur, in all the folders in the library?
    Sorry for the poor english, but im portugues.
    In the library we can change the order of classification of image by, time of capture, name of file etc... I'm wondering if its possible define to be always by the name of file.
    It ´s possible?
    And i have other question, in print label we have an option to auto rotate to feet in page to have the image using the maximum area in the page (auto rotate, zoom etc), its possible to change the orientation of the rotation to be always in  the other direction?

    The Muvos are USB Mass Storage devices and do not have the ability to display track information based upon ID3 tags.
    The Zens all read and display track info based upon ID3 tag information that is either gathered from an online source or entered by the end-user.
    If you want the track information displayed instead of the ID3 tag information, you could edit the ID3 tags and rename the title to whatever you have as the file name. Not sure why your file names would differ so much from the ID3 tag info though, almost all of my content has the same name for the filename as it does on the ID3 tag title.

  • How to get all images in indesign CS5 with javascript?

    Hi,everybody,
    How to get all images in indesign CS5 with javascript?I want to delete them.
    Anyone can give me some example codes?
    Thanks,
    Bridge

    Hey!
    This will remove all images from your InDesign document:
    var myLinks = app.activeDocument.links.everyItem().parent;
    for(var i = 0; i < myLinks.length; i++)
        myLinks[i].remove();
    Hope that helps.
    tomaxxi
    http://indisnip.wordpress.com/
    http://inditip.wordpress.com/

  • [CS2]How to get the Image Width & Height using JS (ILLUSTRATOR CS2)

    Hi,
    How to get the Image width & height of an Image using javascript .Im using Illustrator CS2.
    Any sample code
    Regards
    MyRiaz

    you can reference the dimensions of a loading image (or swf)
    by referencing the target movieclip's dimensions AFTER loading is
    complete. ie, use preloader code or the onLoadInit() method of a
    moviecliploader listener.

  • Hi I have opened my trial of photoshop,but cant figure out how to get an image from my pictures in t

    I have opened my trial of photoshop,but cant figure out how to get an image in.

    Hi,
    The first video on https://helpx.adobe.com/creative-cloud/learn/start/photoshop.html shows you one way to do this: If you open Photoshop, just drag the image file from Explorer/Finder into the PS workspace (or even just to the PS icon).
    Another way is to open Photoshop, select File > Open from the menu, and navigate to your image.
    Hope this helps,
    Randy Nielsen
    Learning Content Manager, Creative Cloud Learn
    Adobe

  • How to get the obiee dashboard secuirity in adf to assign the roles in adf for users

    how to get the obiee dashboard secuirity in adf to assign the roles in adf for users

    thanks Benjamin...
    my present requirement is pull Role to Dashboard mapping from OBIEE Catalog
    in my project we are going to restrict the users and assigning the roles from adf.
    Pls Help me..

  • How to get all images from folder in c#?

    I am trying to get all images from folder. But it is not executing from following:
     string path=@"C:\wamp\www\fileupload\user_data";
                string[] filePaths = Directory.GetFiles(path,".jpg");
                for (int i = 0; i < filePaths.Length; i++)
                    dataGridImage.Controls.Add(filePaths[i]);
    Please give me the correct solution.

    How to display all images from folder in picturebox in c#?
    private void Form1_Load(object sender, EventArgs e)
    string[] files = Directory.GetFiles(Form1.programdir + "\\card_images", "*", SearchOption.TopDirectoryOnly);
    foreach (var filename in files)
    Bitmap bmp = null;
    try
    bmp = new Bitmap(filename);
    catch (Exception e)
    // remove this if you don't want to see the exception message
    MessageBox.Show(e.Message);
    continue;
    var card = new PictureBox();
    card.BackgroundImage = bmp;
    card.Padding = new Padding(0);
    card.BackgroundImageLayout = ImageLayout.Stretch;
    card.MouseDown += new MouseEventHandler(card_click);
    card.Size = new Size((int)(this.ClientSize.Width / 2) - 15, images.Height);
    images.Controls.Add(card);
    Free .NET Barcode Generator & Scanner supporting over 40 kinds of 1D & 2D symbologies.

  • How to get background image to fill the browser and remain fixed in both IE and Firefox?

    Basically what it says in the title. I've come very close in achieving this but something just doesn't tie up in the html and css code...
    First of all, I'm using IE8 and the latest version of Firefox to test this.
    I used 2 sources of information for getting this done: 1) http://css-tricks.com/perfect-full-page-background-image/ and 2) http://stackoverflow.com/questions/8958697/css3-background-size-cover-doesnt-make-image-co ver-vertically
    In Case 1 the example on the page called CSS-Only Technique #1 gives code that works almost perfectly for me, except that obviously I need a background image, however the CSS provided there is clearly just for an image dropped in the body of a page with no regard for other content that may already be there. The html code that I put on the page is simply <img class="bg" src="../images/background_image.jpg">
    Obviously I used the CSS code provided in the example, minus the last bit which is "@media screen" etc etc, which seems irrelevant to me. Obviously substituting values to suit the image on my page.
    So what happened is that it almost worked as intended in both the browsers (which means the image filled both browsers width-wise as intended and also remained fixed when I zoomed in or out in each case) except that the image went over the top of the current content that I had there already precisely because it's not a background in this "technique". (A curious side-note is that the image didn't push down the content, as I'd have expected in normal circumstances, but went right over the top of it so it hid it (like z-index).
    One thing that does bother me about this "technique" is that if you click on View Demo just below the code provided you will see on the working example page (forest background) the image clearly works as a background and the content sits happily on top! So I don't know whether the person providing the example was trying to mislead people or what! Or he got lazy and showed a different page that didn't use the exact code he provided. No matter.
    In any case this leaves me with the job only half finished, as I still need a background image that works like the 'normal image' code provided.
    On to Case 2 and on this page the first example provided gives the CSS for the background image - namely the code within html {...} part and also shows the same 'normal image' code as given in Case 1. In this case however, although the person provided a suggestion, the css and html doesn't really tie up properly plus some of the css and html seems a bit redundant. So this time when I used the 'html portion' of the CSS code (i.e. just the bit that was most relevant) I got two different behaviours in each browser and neither of which was quite what I'm looking for. In IE8 initially the page looks fine (background fills the page and content is on top) however when I zoom in or out the background also zooms in or out accordingly so is NOT fixed. In Firefox the background image DOES stay fixed, however because the image originally is not the whole height of the browser I'm guessing the code stretches it downwards (while keeping proportions - so the image essentially enlarges) to fill all of it. The quick way to get around it is to probably add some white space to the bottom of the image just to give it enough height that it doesn't stretch/resize automatically. But it would be nice to find out anyway how to get around this in the code. Overall I would say that the result in Firefox comes closest to the desired solution but of course it doesn't help matters with IE8.
    Apologies for the lengthy description but that should at least provide plenty info for anybody that might have a possible solution for me. Essentially what would be great is if somebody could advise me how to take the code from Case 1 and apply it to a 'background' piece of coding like the type that's contained within html {...} in Case 2. Like I said, it's so nearly there but I just can't make it work atm after trying to combine the various bits of code this way and that... Alternatively, if somebody has another html-css version that works nicely for achieving this then please by all means let me know! Thanks v much in advance!

    This works in modern CSS3 supporting browsers.  But not pre-IE9.
    http://alt-web.com/TEST/Resizable-BG.shtml
    Nancy O.

  • How to get the image in docking control  in a report using doc management

    HI All
    My question is that is that i am storing one image using documents in jha2n.
    Now I want to get that image in report using Document management.
    Pls guide how to proceed as I am new and dont know anything about document management.
    Thanks
    Pooja

    Hi,
    Please kindly refer to the online help link below:
    [http://help.sap.com/saphelp_erp60_sp/helpdata/en/7a/973035624811d1949000a0c92f024a/frameset.htm|http://help.sap.com/saphelp_erp60_sp/helpdata/en/7a/973035624811d1949000a0c92f024a/frameset.htm]
    And for handling the DMS document, you may check the BAPIs in SAP Note: 504692
    Function group: CVBAPI
    BAPI_DOCUMENT_GETDETAIL2
    BAPI_DOCUMENT_CREATE2
    BAPI_DOCUMENT_CHANGE2
    BAPI_DOCUMENT_DELETE
    For display image in the docking control, pleae kindly refer to the SAP DEMO: RSDEMO_DOCKING_CONTROL
    Cheers,

  • How to get larger images in albums?

    I just realized that when you click on a thumbnail in one of my albums, the larger image is actually smaller than the original photo! All the photos I've put into my web albums have been shrunk to fit into the album display area. For instance, a photo that normally displays about 7 inches high when I view in Preview, comes out about 4.5 inches tall when displayed in my web album.
    How can I get it to display photos at actual size?

    Ray Dunakin wrote:
    I tried turning off "optimize images", but they still were showing up at the reduced size.
    providing a url to your site so people could have a look at what's going on may help...
    What I'd really like is a way to designated specific images to display at a larger size -- most don't need to be very large, but some do.
    I think that's not possible in iWeb PhotoPages... As you choose one format for all. However to get larger images in albums click on a photo and a window will popup called "Photo grid". You can increase the size of the images displaying by reducing the spacing and/or decreasing the number of columns.
    Regards,
    Cédric

  • How to get operation/activity number in correct sequence

    hi all,
    in Tcode CA03, we can see the first column "operation number" come in sequence.
    0010     INSTRUCT
    0020     STAGE
    0030     SMT1
    0040     SMT2
    0050     ROUTING
    0060     TEST1
    0070     QC
    0080     LBLPACK1
    0090     FQA-TEST
    0100     FINALQA
    0110     QCE
    However when query in the z report on table PLPO,
    it would appear something like the following:
    10     10000185     INSTRUCT
    20     10000212     STAGE
    30     10000178     SMT1
    40     10000199     SMT2
    110     10000407     QCE
    10     10000197     ROUTING
    20     10000205     TEST1
    30     10000195     QC
    40     10000188     LBLPACK1
    50     10000315     FQA-TEST
    60     10000180     FINALQA
    those number comes after 110 is maintained in "reference operation set". it has inserted in between
    SMT2 and QCE in CA02.
    Please advise how to get the correct sequence in the z program through table PLPO. Or any other table with the entries maintained properly.
    thanks .

    The document is confusing indeed. Here's what to do:
    Since you already have Adobe Reader 9.4 installed (distributed via GPO), all you need to do is create an administrative installation point (AIP) for version 9.4.1 so you can deploy it to upgrade version 9.4.
    Here's an example:
    - Copy AdbeRdr940_en_US.msi (the 42MB MSI installation file) and AdbeRdrUpd941_all_incr.msp (the 3.24MB patch) to C:\Temp folder
    - Create a new subfolder under C:\Temp folder (let's call it AdbeRdr941)
    - Run this command:
    msiexec /a C:\Temp\AdbeRdr940_en_US.msi
    - When prompted, specify target drive C:\Temp\AdbeRdr941
    - When the above process completes, run the following command to slipstream version 9.4.1 into 9.4.0:
    msiexec /a C:\Temp\AdbeRdr941\AdbeRdr940_en_US.msi /p C:\Temp\AdbeRdrUpd941_all_incr.msp
    Note: the above AdbeRdr940_en_US.msi in folder C:\Temp\AdbeRdr941 file size is about 3.8MB
    - When prompted, once again the target is C:\Temp\AdbeRdr941
    When the process completes, copy C:\Temp\AdbeRdr941 folder to a shared network folder and create a new GPO to distribute the new version. Hope that helps.

  • UREGENT: How to get a Image displayed on Canvas?

    Hi, my problem is: I have an image drew on Canvas, but I cannot access this image through Java, the image is there on Canvas, but I simply can't get that image.
    Anyone know how can I get an Image displayed on Canvas?

    Pt 1. > but I cannot access this image through Java, the
    Q1. > Anyone know how can I get an Image displayed on Canvas?
    From the axioms given, I would say that it is not possible. :)
    Why is it so UREGENT?

  • How to get siri to spell Shawn correctly?  None of the "tips" posted so far work.  I tried changing the phonetic first name but that didn't work.  Nothing works.  Thank you

    How do I to get Siri to spell Shawn correctly?  None of the "tips" I've seen so far work.  I tried changing the phonetic first name but that didn't work.  I tried adding another dictionary but that didn't work either.  I spell his name but Siri sows it as SH A WN (or something like that).  Thanks

    Hi Susie, I use Norton 360 and have the latest Firefox 8 installed is working fine for me. Firefox 8 support for [http://community.norton.com/t5/Norton-360/Firefox-8-Support-for-Norton-Toolbar/td-p/581640 Norton Toolbar] was released on Nov 8th. Install the appropriate add-ons based on the version of Norton 360 you're using (see official Norton link above). Hope this helps.

  • How to get an image to repeat horizantally

    How do I get an image to repeat horizontally? I am pretty new
    to dreamweaver and have little experience with CSS so try to
    explain things in the easiest manner possibly.
    www.wiggles.3dslice.com
    See the banner up top? I want the edges to repeat until the
    end of the screen.

    Change the CSS style's properties and set the
    'background-repeat' option to the property 'repeat-y'. You can edit
    the style in the properties dialogue of the CSS section in the
    side-bar, by using the CSS properties dialogue box in Dreamweaver
    or by working with the raw code. I personally don't like the
    latter, mainly due to the fact that if you choose to work with code
    view have to manually type the property in to the class and it can
    be confusing for beginners, but if that works for you I encourage
    you to do that.
    Hope this has helped you.
    EDIT: Please never mind what I have written above; after
    further reviewing your question I realized that I don't think that
    it'll be able to help resolve your specific problem after all. I
    have left the original text there for you to read anyway in case it
    may be of some use. My apologies for speaking too soon and I hope
    things work out for you.

Maybe you are looking for