Dynamic position of an image at the right bottom of the browser window

Dear Dreamweaver-community,
I'm trying to have an image positioned at the bottom right of a html-page. It is embedded in a table so that it doesn't interfere with the rest of the site's content (which it would if I simply used an absolute position). The height of the table is height=100% and I thought that this would make sure that if the browser window is being dragged smaller or bigger the image stays at the bottom right (just as the content stays centered if you set the width of a table to 100% and center it). But if you make the browser window higher the image won't keep sticking to the right bottom but will stay in one place while the rest of the page (bottom) is simply filled with the black background color. Do you have any ideas what I'm missing out on? Is there something like a valign-tag for a table or the page's body that dynamically keeps the image at the bottom right position no matter how you change the size of the window? I hope you can help me. Thank you!
Missy
Here's the code:
<body bgcolor="#000000">
<center>
<!-- Start Content-Tabelle -->
<TABLE BGCOLOR="#000000" BORDER=0 CELLPADDING=0 CELLSPACING=0 width=100% height=100%>
     <TR>
          <TD width=100% align=center valign=top>
               <p> </p>
            <IMG SRC="images/kopf.jpg" width=300>
          </TD>
     </TR>
     <TR>
          <TD width=100% align=center valign=top>
               <IMG SRC="images/text.jpg" width=394>
          </TD>
     </TR>
     <TR>
          <TD width=100% align=center valign=top>
               <a href="mailto:[email protected]"><IMG SRC="images/post.jpg" border=0 width=269></a>
          </TD>
     </TR>
</TABLE>
<!-- End Content-Tabelle -->
<!-- Start Wuerfel-Tabelle -->
<TABLE BGCOLOR="#000000" BORDER=0 CELLPADDING=0 CELLSPACING=0 width=100% height=100>
     <TR>
          <TD width=100% align=right valign=bottom>
               <IMG SRC="images/wuerfel.jpg" width=200>
          </TD>
     </TR>
</TABLE>
<!-- End Wuerfel-Tabelle -->
</body>

Below is your complete page. Copy all, paste into a Dreamweaver document, save and view in browser.
<!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 name="keywords" content="Mario, Klingeberg, Mario, Klingeberg, Grafik, Illustration, Design, Grafikdesign, Grafik-Design, Illustrator, Bachelor, Medienmanagement, Mediendesign, Medien, IJK, Hannover, Bauch Beine Po, bauchbeinepo, Adobe, Photoshop" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mario Klingeberg</title>
<style type="text/css">
html, body, #container {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
background-color: #000;
table td {
vertical-align: top;
text-align: center;
</style>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15622817-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</head>
<body>
<table id="container" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/kopf.jpg" width="300">
</td>
</tr>
<tr>
<td><img src="images/text.jpg" width="394">
</td>
</tr>
<tr>
<td><a href="mailto:[email protected]"><img src="images/post.jpg" border=0 width=269></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: bottom; text-align: right;"><img src="images/wuerfel.jpg" width="200" height="90"></td>
</tr>
</table>
</body>
</html>

Similar Messages

  • The right side of my browser window is cut off. There is no scroll bar on the right and the search bar (upper right) is chopped off (right side).

    Actually, the whole right side of the window is cut off, including the page/window header. This isn't just the websites I visit, it's the whole browser window(s). The word "Settings" is also cut off on the right side.

    It is possible that the screen is too wide or too high and that the scroll bars fall off.
    * Use Restore or Maximize in the right-click context menu of the Taskbar icon to set focus to the Firefox application if you do not see the Firefox window.
    * Open the system menu of that Firefox window via Alt+Space and see if you can move and resize that window.
    If that works then close Firefox (File > Exit/Quit) to save that setting.
    See also:
    * http://kb.mozillazine.org/Resizing_oversize_window
    If the above didn't help then see:
    * http://kb.mozillazine.org/Corrupt_localstore.rdf

  • How can I close the giant bookmark search screen that runs along the entire bottom of my browser/window?

    View, toolbars, unclick Bookmark toolbar doesn't close it. It opens everytime I launch the Browser.

    Can you attach a screenshot?
    *http://en.wikipedia.org/wiki/Screenshot
    *https://support.mozilla.org/kb/how-do-i-create-screenshot-my-problem
    *Use a compressed image type like PNG or JPG to save the screenshot
    *Make sure that you do not exceed the maximum size of 1 MB
    Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.
    *Switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance
    *Do NOT click the Reset button on the Safe Mode start window
    *https://support.mozilla.org/kb/Safe+Mode
    *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

  • Urgent, SOS for help: How to show the pdf file name at the right bottow of the page?

    I want to show the pdf file name at the right bottow of the page for filing purpose, anybody knows anything?
    I know it can be showed at the left bottom through adobe printer, but i need it to be at the right bottom.
    thanks.

    The result is a UIWebView that displays a blank page. No errors occur in the UIWebView delegate method. The thing is that data has the correct length, in bytes, for the PDF I am trying to display, and I also get the pdf file in Library/Application Support/iPhone Simulator/4.3.2/Applications/ Does anyone have an idea as to what might be going wrong here or how I can better debug this problem?

  • The HUD Inspector in Full Screen View seems to position at the right margin of the image as a default(?)  If I toggle the button in the top right of the HUD it 'unlocks' and I can drag it to where I prefer -- at the left margin; (for over a decade) my doc

    The HUD Inspector in Full Screen View seems to position at the right margin of the image as a default(?)  If I toggle the button in the top right of the HUD it 'unlocks' and I can drag it to where I prefer -- at the left margin; (for over a decade) my dock has resided at the right margin so all my slider manipulation over countless editing sessions in Aperture has been ingrained to work at the left margin -- but, the vast majority of the time, the HUD overlaps the image I am editing in this 'unlocked' mode. 
    Every occasionally I enter Full Screen View and it positions on the left margin *without* superimposition...(!) My great joy is modulated into aggravation, however, should my tracking cursor drift all the way 'out of bounds' -- to call in the hidden pane of adjacent images sequenced in the library... This dramatically shrinks the Full Screen display and re-locks the HUD; if I toggle the switch to re-xpand the image it re-positions at the right margin!!!!  I SOOoooooo wish I knew how to control the default 'locked' margin of the HUD in Full Screen View...

    Drag it over to the Left. Then lock it there.

  • Question - How to Revise a Javascript for Printing a Dynamic Date in the Right Corner of the Page

    Hi Everyone,
    I am using Adobe Professional 8.0.
    How do I revise the JavaScript (not created by me) below in order to execute the two (2) following changes:
    1) Dynamic Print Date - 1.0 inch Up and 1.0 inch Over from the Right Corner of the Page.
    2) Dynamic Print Date - 0.5 inch Up and 1.0 inch Over from the Right Corner of the Page.
    The JavaScript I want to revise is the following:
    /* Put script title here */
    // Add field to each page of form
    var inch = 72;
    for (var p = 0; p < this.numPages; p++) {
    // create rectangle quads for field
    var aRect = this.getPageBox( {nPage: p} );
    aRect[1] = 1.0*inch;
    aRect[3] = aRect[1] - 72; // and 24 points high
    // now construct text field to fill with date information
    var f = this.addField("PrintField", "text", p, aRect )
    f.delay = true;
    f.textSize = 10;
    f.textFont="Arial,Bold";
    f.textColor = color.black;
    f.alignment = "right";
    f.readonly = true;
    f.print = true;
    f.hidden = true;
    f.delay = false;
    var myWillPrintScript = 'var f = this.getField("PrintField"); \r'
    + 'f.hidden = false; \r'
    + 'var d = new Date(); \r'
    + 'var year = d.getYear()+1900; \r'
    + 'f.value = "Print Out Date:" + (d.getMonth()+1) + "/" + d.getDate() + "/" + year; \r';
    var myDidPrintScript = 'var f = this.getField("PrintField"); \r'
    + 'f.value = ""; \r'
    + 'f.hidden = true; \r';
    this.setAction("WillPrint", myWillPrintScript);
    this.setAction("DidPrint", myDidPrintScript);
    Thank you for your help!
    Tracy

    this.addWatermarkFromText({
    cText: util.printd("mmmm dd, yyyy", new Date()),
    nTextAlign: app.constants.align.right,
    nHorizAlign: app.constants.align.right,
    nVertAlign: app.constants.align.bottom,
    nHorizValue: -72, nVertValue: 72
    Will insert the current Monday/Day/Year as a text watermark at the bottom of every page of a document, 1 inch up and 1 inch in from the right corner.

  • Slideshow-Images not displaying in the right place on the screen

    I am trying to use the SlideShow widget for the first time. I have a pretty basic slideshow with six images that I want to display. When I preview it in IE or Firefox,what I get is really weird. The first image displays in the right place.  The second displays in the right place, but with a black box underneath it. The third displays under where it's supposed to go, with a black box above it. After this, the images alternate between where they're supposed to be and just below that, with a black box of the same size in the second location. I've looked at the source of other webpages that have working slide shows, and I don't see a difference between what I'm doing and what they're doing. Here is what I think is the relevant code. Can anyone suggest a way to fix this?
    <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
    <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-81003-5']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    </script>
    </style>
    <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141543: #ImageSlideShow */
    #ImageSlideShow {
    width: 426px;
    height: 303px;
    border: solid 1px #000000;
    background-color: #717c96;
    #ImageSlideShow .ISSClip {
    background-color: #000000;
    /* EndOAWidget_Instance_2141543 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141543" binding="#ImageSlideShow" />
    </oa:widgets>
    -->
    <div class="column2">
    <div id="thumb">
    <div>
    <ul id="ImageSlideShow" title="">
        <li><a href="images/balloon1a.jpg"><img src="images/baloon1a.jpg" alt="" /></a></li>
        <li><a href="images/balloon2a.jpg"><img src="images/baloon2a.jpg" alt="" /></a></li>
        <li><a href="images/balloon3a.jpg"><img src="images/baloon3a.jpg" alt="" /></a></li>
        <li><a href="images/balloon4a.jpg"><img src="images/baloon4a.jpg" alt="" /></a></li>
        <li><a href="images/balloon5a.jpg"><img src="images/baloon5a.jpg" alt="" /></a></li>
        <li><a href="images/balloon6a.jpg"><img src="images/baloon6a.jpg" alt="" /></a></li>
    </ul>
                                                          <script type="text/javascript">
    // BeginOAWidget_Instance_2141543: #ImageSlideShow
    var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    widgetID: "ImageSlideShow",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 8000,
    transitionDuration: 2000,
    componentOrder: ["view"]
    // EndOAWidget_Instance_2141543
                                                          </script>
    <h3 align="center"><br />A Different Way of Thinking</h3></div>
    </div>
    </div>

    If you have a look at basic_fs.css, you will notice that the styles taget a class called BasicSlideShowFS.
    Yet when I look at the constructor, the class is missing as in
    var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
        widgetID: "ImageSlideShow",
        widgetClass: "BasicSlideShowFS",
        injectionType: "replace",
        autoPlay: true,
    Because you are not using the thumbnails (filmstrip), I am wondering why you did not implement the basic slideshow, which will make it a lot easier for you.
    Gramps

  • Facebook is not loading properly and all my text and images are lined up along the right side of the page. How can this get fixed to the way it use to be?

    Facebook is not loading properly and all my text and images are lined up along the right side of the page. How can this get fixed to the way it use to look?
    Everyone who logs into Facebook on my Firefox has this problem however if we use Internet Explorer - facebook looks normal.

    If you have increased the minimum font size then try the default setting "none" as a high value can cause issues like you described.
    * Tools > Options > Content : Fonts & Colors > Advanced > Minimum Font Size (none)
    *Tools > Options > Content : Fonts & Colors > Advanced > [X] "Allow pages to choose their own fonts, instead of my selections above"

  • Position of the days and dates being on the right side of the day in the week calendar.

    I'm having a huge problem with the days and dates being on the right side of the day in the week calendar. Can I change that to the left upper side?
    it makes the whole schedule off balance you see.

    Thanks for stating that. So quickly. That *****. I also now see that more people have problems with this. Where can I complain?

  • Has anybody else been seeing (Not Responding) at the top of the screen and having thier browser not respond to wheel scrolling and scrolling with the usual slider at the right part of the screen?

    I have noticed my Firefox browser is having way too many incidences where it is "Not Responding". The browser freezes up for a second quite often and the "Not Responding" message will appear at the top of the screen.
    The browser will also not scroll with either the scroll bar on the right nor with the mouse wheel. Both used to work in previous versions of Firefox, but it seems to have gotten worse since Firefox 5 0r 6. The same with the "Not Responding". It is happening more with Firefox 7 than in at least the past two versions.
    Anybody else having these issues? Seems like they are hand-in-hand. Thanks for any and all help or advice. It's making me pretty angry since I'm online all day for work.
    Just an FYI. At the bottom of my troubleshooting copy/paste is a suggestion to update the driver for my graphics. That was a no-go. I tried that.

    Thank you for this first reply! I'll have to give this a try later....the main laptop I experience this on crashed not more than an hour after I posted this issue. I'm on a tiny, slow netbook that hasn't had the same problem. Now I'm wondering if I picked up a Trojan on the main laptop and the "Not Responding" message is a side effect of a virus or Trojan.
    One of the system .dll files has been corrupted and I'm not being allowed to use recovery discs, previous disc images, or any recovery options. That was an all day sucker yesterday and from what I've read on forums and have researched, it appears I'm going to need to reload the operating system. If it is indeed a Trojan/virus, I'm surprised it made it through my antivirus and firewall. Anything is possible, really.
    Thanks again, I'll get back with results once I get the wounded laptop back up and running.

  • How do you adjust Firefox to print what is on email page without adding a 1 inch left marghin to that page as it cuts off some of the right side of the page?

    When I receive an email the page often has a certificate that I would like to print. Using the print function at the top of the page brings up the email as a page as it looks in my web email. When I hit the print button on that page there is always a 1 inch margin added to the printed page cutting off the right side of the desired page to be printed.
    My printer accepts what ever I send it from word, pdf files as they appear on the screen, Why doe Firefox not send the same images as is displayed to the printer?
    This seems to occur whenever the screen shows an image that is almost border to border and not text. When a margin is part of the email message or it is text this doesn't seem to occur.
    HELP Please. I really need to be able to print what is displayed to print the proper document.
    Thanks
    Bob Ferguson
    Sonoran Consulting & Finance, LLC

    Some pages add their own margin to the minimum margin set in Page Setup. First you might reduce the margin here:
    Alt+f (displays the classic File menu) > Page Setup > Margins & Header/Footer tab
    Second, you could try using Shrink to Fit. However, if the image is a background image rather than part of the content of the page, that might not have any effect.

  • Updated to Firefox 18.0 and now the windows are wrapping improperly, with more and more of the right side of the window showing up on the left as you go down.

    Updated to Firefox 18.0 on a MacBook running Mac OS 10.6. Non-static areas of the window (url & search boxes, main area of window, etc.) now display incorrectly, looking like what happens when a program thinks the image is (for example) 500 pixels wide, when its actually 512 pixels wide. Each line after the first starts with what's "leftover" from the line above it, resulting in an image that appears slanted, with what should be the right side of the image appearing on progressively more on the left side of the image. No other programs (including Safari) seem to be exhibiting this problem, and it appeared immediately after the upgrade. Minimizing the window into the Dock, then re-opening temporarily fixes the problem. As soon as I scroll the window, the problem reappears.

    I am having the same problem. the screen slants to the right making the navigation impossible, also some fields like the address bar are complely messed up-looks like a no signal TV screen. I have tried to reinstall and remove the plist file. Am using firefox 18 on a intel macbook running 10.5 thanks for any help

  • 1px line created on the right side of the browser

    Hi All,
    I want to have a banner image, which fades into blackness so i have made the image smaller to fade into a black solid background. I have simply placed this behind the background image.
    When adding either a rectangle with a fill image or a solid black image to my banner, it is somehow creating a 1 pixel thin white line on the right of the browser. It's as if there is an element which is larger than my width (1400px including the 100px for left and 100px for right margins). It is also creating a horizontal scroll bar.
    Once i delete this rectangular fill/solid colour fill, i no longer have a horizontal scroll bar or a 1px thin line on the right.
    I have double checked every single element of the page that it does not exceed the canvas size and it touches the edges to create the red lines that it is 100% full browser width. I have checked the master etc.. everything seems to be fine and the correct 1400px width.
    Can anyone assist with what could potentially be causing this? I have attached some screenshots if you need any.
    PLEASE NOTE! This is only an issue with GOOGLE CHROME for desktop and on any browser for tablets (haven't tested on mobile yet as i have not optimised my site for mobile).
    I've tried this is Safari and it has no horizontal scroll bar or an issue with the 1px thin line on the right side of the browser.
    This is killing me because i can't find out what it is!

    Hi All,
    Anyone have any ideas?!

  • I need to place icons (Next, Back, Print, Show) on the right side of the page.

    The current solution is to use the following in the CSS.
    div.options {
      position:relative;
            width:100%;
            left: 860px;
            padding:2%;
            background:transparent !important;
    However, this solution locks the icons to the right and they do not move when the window is sized:
    Is there a responsive method I can use to accomplish my goal?
    I am using RoboHelp 10.
    Thanks - Dan

    Hello William,
    Silly me. I’m using HTML5 – Desktop layout.
    I know just enough HTML to get myself in trouble. I started with your  “PnP-WH-Generic” layout and got it to this point:
    Your first suggestion moves the icons to the right side of the screen. I need them to be as shown above.
    Here’s the relevant (I believe) HTML:
    And here’s what I believe is the applicable CSS info:
    div.content
    div.toolbarbuttons
    div.toolbarbuttons > div
    div.logo
    div.searchsimple
    div.options
    div.printbutton
    div.header div.showhidebutton {
                    height: 23px;
                    line-height: 23px;
                    float: left;
                    margin-top: 5px;
                    margin-left: .8em;
                    font-size: .8em;
                    padding: 0;
                    width: auto;
    Thanks for your help!
    Dan

  • When opening foxfire on my mac the website extends off the right side of the window. how do I fix this?

    when I start up foxfire, the page the loads and any further browsing is extended to the right further than the window shows. I can get it to work correctly if I click the Green plus button on the window to maximize the window to full screen and then click it again to restore it to the size it was. Is there any way to fix this so it just loads up correctly upon starting the application?

    Window sizes and positions are stored in the localstore.rdf file in the Firefox Profile Folder.
    This can be a problem with the localstore.rdf file in the Firefox Profile Folder.
    *http://kb.mozillazine.org/Corrupt_localstore.rdf

Maybe you are looking for