Tooltip position relative to browser window

Hi -
I have a repeating region of left-floated divs that works
like a horizontal looper for my data set - items repeat
left-to-right, then start a new row. I have a tooltip on the div to
pop up a large-scale image of the underlying repeating data.
The problem is that on the rightmost column, the tooltip
image runs off the right edge of the browser window (causing the
horizontal scrollbar to appear). The bottom row does the same with
the bottom edge of the window - you have to scroll town to see the
entire tooltip, rather than the tooltip adjusting for the bottom of
the window. Does the tooltip widget have a setting that will change
its position relative to the mouse if you are up against the edges
of the browser window?
Thanks,
Rod

I have this same question. Can the tooltip flip horizontally
when it touches the browser edge?

Similar Messages

Help! layers change position from document window to browser window

dear all,
i have a single page site with buttons on which when clicked on show or hide layers.
BUT I have the age old problem in that the layers appear in a different position in the browser window
than where I positioned them in the document window.
Is there a fix? a plug-in?
I am tearing my hair out over this.
What is the use of having layers when they dont work in the end?

First off, code is important. If you don't post a link to the page in the question or at least the code (HTML + CSS) from the page in question all we can do is guess.
From your statement I would suspect you are using Absolute Positioned divs and you are hoping web design is like print design and you are now realizing it is now. Best suggestion I could give is read over the HTML and CSS tutorial at the following website:
http://www.w3schools.com/
Then come back here and post a link or the code from the page once you have a basic understanding. Otherwise our answers to you be as mysterious as your code is to us at the moment.

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>

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


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

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

External displays - browser window position when disconnected display

I'm using a laptop, connecting one or two external displays, - one using the HDMI port, second using an USB "dock station" (Toshiba standalone). Second screen normally to the right, third screen (usb) above the laptop screen.
Often when I have disconnected the USB external display, my Firefox browser window are still "on the third display" - position as if this display was still active.
Even if I quit Firefox and restarts ( or even restarts windows ) the same position window is retained. The only way to fix it (when the USB connected display is not available), is to change the window position of the second (HDMI) display to cover the area of the USB one, then move Firefox window to my main laptop display, and then reposition the second screen back to the normal.
Normally, I expect applications to automatically reposition the windows to the available display(s) under the conditions that an extra display is removed. However, this seems not to happen with Firefox. It's inconvinient, but possible to fix with the second screen available, but I'm lost when I am not able to connect an external display ...
Is there any solution to this? Is it possible to change (reset) window positions directly in RegEdit ??

Dear varkgirl:
Thank you very much for your help and valuable suggestion.
I've tried your suggestion but ran into some problems. The links I am trying to open in another window are actually PDF files that the viewer can download from my website.
Since I was having problems I decided to try something else. After publishing the website to my desktop I then opened the pages where the links are in Dreamweaver. The layout view is great and displayed the image just the way it appears on the browser's window. I first selected the "link button" to the file and then in the inspector windows (bottom of the page) I chose under target the "_blank" option. This tells the software that the linked page or file is to be opened in a new blank browser window. I then saved the page (re-saved it over the existing file) to incorporate the changes. After this I proceeded to navigate through the website and everything works great.
Thank you for your help and suggestions. I just thought I would post this here in case it may be of help to you as well as others.
Best regards,
Joseph Chamberlain

How do I make my website fit in all size browser windows?

Hi there,
I should start off by saying that I am very new to web design, and have very limited knowledge of CSS and HTML. I understand what they are and the nature of what they do, I'm just not code savvy.
Now that that's out of the way, I've been designing/attempting to build a website using Dreamweaver. I have all of the components and layout that I want designed and ready to go, but I desperately need help with translating that into Dreamweaver. I've been researching information all over the web, but with one person suggesting one thing and another suggesting something completely different I'm afraid my brain is about to melt.
Here's what I've done so far:
Because I want everything fully customized and to use a less common font style, I saved everything from the graphics, photos, and links as .png files. I then inserted each of those images into an AP Div Tag in Dreamweaver and arranged them appropriately. That's absolutely all I've done. It works great, except I have no idea how to configure everything so the site layout shows up centered in any size browser window, instead of sitting awkwardly in the corner.
Here's a link to what currently exists: http://ikikatawares.com
I've read dozens of articles and forum responses about building tables, but I'd like to avoid that since to me they seem clunky and kind of a hassle to deal with. Can anyone please help me? Thanks.
Beth

You need to put only the bold part into your code.
Immediately after your starting <body> tag add in
<div id="wrapper">
and immediately before your ending </body> tag add in
</div>
Then at the end of your css, you currently have...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
Change that to...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
#wrapper {
     position:relative;
     width:1005px;
     margin:0 auto;

How do i get my navbar to stay on one line when the browser window is minimized?

I am new to coding and have just created my first website in html and css. I know that the coding is pretty dire and that I have a lot to learn and hope that someone can guide me in how to solve this problem. When the browser window is minimized, the navbar breaks down into 2 or 3 lines but I want the navbar to fit to the window whatever the size of the client machine.
I think I need to add a media query but i'm not sure if i do and if so what code to use and where to put it?
I am worried that the page will only be viewable properly on a desktop and i really want to learn how to make a fluid layout which can be viewed on 320px, 768px and 1200px.
Any guidance would be greatly appreciated.
Here is my code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Engineer's Corset</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
body {
    background-color: #000;
</style>
</head>
<body>
<div id="container">
<div id="navbar">
    <ul id="nav">
    <li><span class="current-menu-item">Home</span></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="workshops.html">Workshops</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
<div id="header">
<img src="images/final/headerbeauty3.png" width="1100" height="341" alt="The Engineer's Corset">
</div>
<div id="links">
<ul id="link">
<li><a href="https://www.facebook.com/Bristolengineer" target="_blank"><img src="images/final/fb3.png" width="200" height="45" alt="Follow Us on Facebook"></li>
<li><a href="https://twitter.com/Engineerscorset" target="_blank"><img src="images/final/twitter2.jpg" width="200" height="45" alt="Follow us on Twitter"></a></li>
</ul>
</div>
<div class="chantry">
<img src="images/final/CD Logo fin.png" width="240" height="200" alt="Chantry Dance Company">
</div>
<div class="about">
<p> The Engineer's Corset is a new play written by Janet Goddard for performance by the community of Bristol in 2015. <br> ~ <br>
The play is based on the extraordinary real-life events of 1843 surrounding Isambard Kingdom Brunel's near-death experience after swallowing a coin. We travel through time to explore the adventure and horror of Victorian industrialisation. <br> ~ <br> Using a community theatre group The Engineer’s Corset tells a familiar tale of Brunel’s near death experience when he swallows a gold half sovereign. His wife Mary fights to maintain her composure but is ripped apart by the waiting game. Her servants and his workforce, using dance and sound, broaden her horizons. Just like Mary the audience too will see life in the 1840s through a different lens.</p>
</div>
<div class="workshops">
<img src="images/final/bridgebridge.jpg" width="1100" height="713" alt="clifton suspension bridge">
<span><a href="workshops.html">We will be running a series of workshops prior to production and hope you will join us. For further information, click here.</a></span>
</div>
<div id="sponsorspace"></div>
<div id="footer"> <p> © Heartprints Web Design 2014 </p> </div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:125%;
@media screen {
    #navbar:
#navbar li {
    font: 25px Arial;
    display: inline;
    list-style-type: none;
    background: #09F;
    color: #000;
    border-radius: 20px;
    padding: 15px 25px;
.current-menu-item {
    color: #0FF;
#navbar a {
    padding: 15px 25px;
    background-color: #6cf;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
#navbar a:hover {
    background-color:#0FF;
    color: #000;
    padding: 15px 25px;
#header {
    width: 1100px;
    height: 340px;
    margin-left: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
#links li {
    display: inline;
    width: 700px;
    margin-left: 300px;
.chantry {
    margin-left: 40px;
.about {
    position: relative;
    width: 860px;
    text-align:center;
    background-color: #CCC;
    color: #000;
    border-style: ridge;
    border-width: 3px;
    border-color:#09F;
    border-radius: 15px;
    float: right;
    margin-top: -200px;
    margin-right: 90px;
.workshops{
    position:relative;
    width: 1100px;
    height: 713px;
    font-size:24px;
    margin-left: 50px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
    margin-top: 130px;
.workshops span {
    position: absolute;
    background: #6CF;
    color: #000;
    left: 30px;
    top: 30px;
    right: 800px;
    padding: 15px;
    font: 1em georgia, serif;
    font-style:italic;
    text-align:center;
    border: 5px solid #09F;
    border-radius: 20px;
    margin-top: 35px;
.workshops span a {
    color: #000;
#link li {
    border-style: solid;
    border-color: #6CF;
    padding: 30px 10px 5px 10px;
.info {
    text-align:center;
    width: 1100px;
    margin-top: 50px;
    margin-bottom: 50px;
.CDC {
    float: left;
    margin-right: 50px;
    margin-left: 45px;
.workshopinfo {
    height: 250px;
    text-align:center;
    margin-top: 50px;
.photos {
    Height: 500px;
    text-align:center;
    margin-top: 50px;
#footer {
    text-align:center;
    margin-top: 700px;
    color:#0CF;
.brunel {
    margin-top: 50px;
    margin-left: 400px;
#workshops2{
    width: 1000px;
    border-style: outset;
    border-width: 5px;
    padding: 15px;
    border-color:#09F;
    background-color: #6CF;
    margin-left: 100px;
    text-align:center;
#workshops2 a {
    color: #000;
#sponsorspace {
    height: 300px;
    background-color: #6CF;
    border-style: outset;
    border-color: #09f;
    margin-top: 15px;

Give #navbar a width that is wide enough to hold all of the buttons within it.
#navbar {
     width:####px;
Replace #### with a pixel number large enough to hold the nav buttons.

How to center wireframe layout in browser window

HELP!!
I've created a set of wireframes for a website in Proto but when I bring them up in a browser window the layout is always left aligned and I cannot figure out how to get the layout to center in the browser window.
I've used margin: 0 auto; on the container div but it does no good, the layout stays left aligned. I'm about to pull my hair out on this one.
The URL is http://www.bluegrasswebservices.com/kpp/index.html
Thanks for your help
Gary

I had the same issue and decided to make the change myself. All you have to do is add a wrapper div, match it to the width of your file and center it via CSS. It would def be much more convenient to have this as an option, but alas your solution is below....
HTML
<div id="wrapper">
Your page content
</div>
CSS
#wrapper{
    width: (width of your content);
    position: relative;
    margin: 0 auto;

Overlap 2 Images and Make Their Positions Relative?

I need to essentially make a hotspot on an image that is another image.
I know how to make hotspots. I know how to overlap images. But I need the overlapping image's position to be relative to the image beneath it.
How can I do this?
I have tried searching for Overlapping Images (answer: CSS)
I have also tried searching for Mapping Images to Images (no luck, just brings up info on mapping images, period)
I'm not sure what to search for to get this answer. That is why I am posting.
I am using Dreamweaver CS3. I am a total n00b but if you point me in the right direction I can figure out the rest with research.
Thank you in advance for your time.
PS- Please don't say, "Why not just merge the 2 images with an Imaging Program?" I need to do this with hundreds of images, AND I need the images available separately on my site. This would create hundreds of additional images that I need to upload.

Ignore this. I lost over half my post somehow. I'll try again. -.-
<!Session data><input id="jsProxy" type="hidden"/></p><div id="refHTML"> </div><p></p><p><input id="gwProxy" type="hidden"/>

Making pop-up image always appear within browser window

In my CS3 CSS site I want to have images which are only revealed when the user runs their mouse over a photo icon. I've worked out how to make the AP div, which contains the show-hide image, appear in the same position relative to the left margin of my text container div but can't seem to control where they are vertically. As they are absolutely positioned, I know that they will, in theory, always remain in the place where I have positioned them (although this appears to vary greatly from browser to browser) but this causes problems if, for example, I place them above the icon and the viewer happens to rollover the icon while it is near the top of their browser window - the photo can't be seen. Can I make the image's vertical position relative to the browser window, whatever its size, or make sure it always appears within the browser window?! I've tried setting margin top and bottom to auto but that doesn't seem to work in the same way that it does for margin right and left. An example is on this page http://www.ernestcooktrust.org.uk/Contact_biogs/biogs_trustees.html . At the moment the images are set to appear above the icon of the person they are referring to. Or is there a better way then show/hide AP divs to achieve this? Many thanks in advance for any (not too technical please) help.

Learn CSS positioning in 10 steps - with visual examples of Static, Relative, Absolute, Fixed, Floats
http://www.barelyfitz.com/screencast/html-training/css/positioning/
CSS Positioning explained
http://www.brainjar.com/css/positioning/
CSS Positioning tutorials - w3schools
http://www.w3schools.com/Css/css_positioning.asp
Why do APDivs move?
http://forums.adobe.com/message/2181263#2181263
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Faux column background not aligned in smaller browser window...

I'm working on a three-column webpage. I'm using fixed-width columns, with the left and right columns floated (started with a dreamweaver layout). I am also using a background applied to the <body> tag to apply the faux column look, so that the side column backgrounds flow all the way down the page.
My layout is a total of 780px wide, but the background image I'm using is 2000px wide. It's the same image that was used in the previous version of the website, and I can only guess that the image is that wide to "fill" the extra space around the main content when the browser window is wider than 780px. Because the image is so wide, I have it styled to center on the page. When my browser window >= 780px wide, everything looks great... the faux columns line up perfectly with the divs. However, when I make the window less than 780px, things get messy.
My layout elements stay where they are, meaning that the left edge of the container stays aligned with the left edge of the screen and a scroll bar appears at the bottom. However, since my background is set to center itself, it continues to try to center itself in the browser window. Basically, the content is not centered in the browser window, but the background is, causing the faux columns to not line up with the divs. The relevant CSS I have applied is:
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 12px;
    color: #666666;
    background-repeat: repeat-y;
    background-position: center;
    background-image: url(../img/BG-gray.gif);
#container {
    width: 780px;
    margin: 0 auto;
    text-align: left; /* this overrides the text-align: center on the body element. */
Note: everything within the container div stays where it should relative to the container, so I didn't include the CSS for them, though I can post it up later if you really need to see it.
Is there a way to keep everything lined up in a smaller browser window? Or, would it be better to trim down the background image to the same width as the container?
Sorry for the long message, but I'm new at this. Please don't eat me.

Same problem, only worse. That causes the background to show from the very left edge of the image. All my text is in the gray area in the example below. Let me try to clarify...
The background image is something like this (colors are for clarity):
(filler)
Left faux column
Main content goes here. This is always in the center of the browser window.
Right faux column
(filler)
Where the combined width of the blue, white, and red sections is 780px. This is what I want my layout to line up with, the blue and red columns being the faux left and right columns, respectively. The gray areas are "filler" that colors the excess width in browser windows that are wider than the fixed width of the main content. With the background set to centered, the white stripe is always centered in the browser window. As long as the window is wider than my layout, the layout is centered in the browser window as well.
I'm looking for a way to either center the background relative to the layout container, not the browser window, or to keep the layout container centered in the browser window when the window is narrower than the layout.

Rolling window moves when browser window changes size??

I have added a rolling window into my page and it is in the
correct position when I click to preview, but when the browser
window moves (when I click on my Favourites window panel for
example) the rolling window moves along and out of its position.
Is there anyway to stop this?
Cheers,
Zoe

Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -
</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dollecom" <[email protected]> wrote in
message
news:e5ffjv$qa8$[email protected]..
> I have added a rolling window into my page and it is in
the correct
> position
> when I click to preview, but when the browser window
moves (when I click
> on my
> Favourites window panel for example) the rolling window
moves along and
> out of
> its position.
>
> Is there anyway to stop this?
>
> Cheers,
> Zoe
>

Background Image Fixed-Layers Above Move in Browser Window

Hi,
I created a table, single column and row. I inserted an image
(background graphics), then created Layers for my text and
navigation buttons. See layout online here:
http://www.tarbeatydesign.com/SG4/index.html
Why do the layers float around when the browser window
changes sizes? Is there a fix.
I'm using DW MX 2004 - v7.0.1
Thanks, Tar

First-cousin in my family, and lots of rumors...
Walt
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> SHE'S HIS COUSIN?
>
> --
> 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
> ==================
>
>
> "Walt F. Schaefer" <[email protected]> wrote
in message
> news:[email protected]...
>> He's responsible for the memory lapse. Well, him and
his cousin Mary
>> Jane.
>>
>> --
>>
>> Walt
>>
>>
>> "Murray *ACE*"
<[email protected]> wrote in message
>> news:[email protected]...
>>> Just think John Barleycorn.
>>>
>>> --
>>> 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
>>> ==================
>>>
>>>
>>> "Walt F. Schaefer" <[email protected]>
wrote in message
>>> news:[email protected]...
>>>> Yes, better. Thanks Murray. I was
momentarily lost for the term
>>>> "ancestor".
>>>>
>>>> --
>>>>
>>>> Walt
>>>>
>>>>
>>>> "Murray *ACE*"
<[email protected]> wrote in message
>>>> news:[email protected]...
>>>>>> Because that's how Layers
(position:absolute) work. They are
>>>>>> positioned absolutely relative to
the position of their containing
>>>>>> element (usually <body>).
>>>>>
>>>>> That's confusing. They are positioned
offset from the position of
>>>>> their closest positioned ancestor. If
there is no positioned
>>>>> ancestor, then the body tag is used,
hence, upper, left-hand corner of
>>>>> the page.
>>>>>
>>>>> --
>>>>> 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
>>>>> ==================
>>>>>
>>>>>
>>>>> "Walt F. Schaefer"
<[email protected]> wrote in message
>>>>>
news:[email protected]...
>>>>>>> Why do the layers float around
when the browser window changes
>>>>>>> sizes?
>>>>>> Because that's how Layers
(position:absolute) work. They are
>>>>>> positioned absolutely relative to
the position of their containing
>>>>>> element (usually <body>).
>>>>>>
>>>>>>>Is there a fix.
>>>>>> Stop using Layers. They are not a
good option for general page layout
>>>>>> purposes. They should be used
sparingly in special situations and
>>>>>> only if you fully understand how
they will interact with the rest of
>>>>>> your page. You need to learn and
understand CSS (+ HTML) if you want
>>>>>> to build anything but the simplest
of sites.
>>>>>>
>>>>>>
>>>>>> --
>>>>>>
>>>>>> Walt
>>>>>>
>>>>>>
>>>>>> "tarbeaty"
<[email protected]> wrote in message
>>>>>>
news:[email protected]...
>>>>>>> Hi,
>>>>>>> I created a table, single column
and row. I inserted an image
>>>>>>> (background
>>>>>>> graphics), then created Layers
for my text and navigation buttons.
>>>>>>> See layout
>>>>>>> online here:
http://www.tarbeatydesign.com/SG4/index.html
>>>>>>>
>>>>>>> Why do the layers float around
when the browser window changes
>>>>>>> sizes? Is there
>>>>>>> a fix.
>>>>>>> I'm using DW MX 2004 - v7.0.1
>>>>>>> Thanks, Tar
>>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>
>>>>
>>>
>>
>>
>

How to make page stay in the middle of browser window?

I was messing around with the CSS code that changes your
pages width based on browser window but it really distorted my
graphics badly so that was out, but is there a way to set it so
everything stays centered? I 'assumed' I could just set all my
tables and layers to centered but it doesn't seem to effect the
tables themselves only the things within the tables. Is there any
other way? (besides nesting every single thing in a single table,
which perhaps I should have done but probably too late for that
now).

Yes, you can add a div with left and right margin set to
auto.
Then, place everything inside this wrapper div.
Set its position attribute to relative.
Luis

How to detect browser window's border in a scrolling container

I am building a balloon tooltip and the tooltip got cut off by the flash player's border when the target component was scrolled close to the border of browser window so I want to position the balloon according to the distance between target component and window's border in a scrolling environment to avoid the tooltip overlap with borders.
I have two major issues:
1). since the target component (that trigger the tooltip) is in a scrolling container so localToGlobal didn't tell me too much about where the target component is.
2). I draw and position my balloon in updateDisplayList so I didn't have mouse event access ...
Any suggestion will be appreciated.

I am building a balloon tooltip and the tooltip got cut off by the flash player's border when the target component was scrolled close to the border of browser window so I want to position the balloon according to the distance between target component and window's border in a scrolling environment to avoid the tooltip overlap with borders.
I have two major issues:
1). since the target component (that trigger the tooltip) is in a scrolling container so localToGlobal didn't tell me too much about where the target component is.
2). I draw and position my balloon in updateDisplayList so I didn't have mouse event access ...
Any suggestion will be appreciated.

Centre page in browser window

Hi, I have a site at www.goldenumber.co.uk I have noticed that on large displays it doesn't look great because the pages are not centred in the browser window. Is there a quick way to do this. All the pages have a layout grid and the background is selected via a random script in css.
Many thanks for any advice, Matt.

Your text dont move ... its your background that moves
Your text i stuck in a div that are 1010px wide, and you background image is center on the background of the body .. when the window gets smaller than the image, the image "float" out on both side of the window leving the center part visible
You cud try to place the background image in the wrapper insted of the body so that it follow the wrapper
Change basic.css:
body { color: white; font-family: tahoma, verdana, arial; background: black url(../images/rotate.php) no-repeat fixed center 50%; text-align: center; } #wrapper { text-align: left; position: relative; width: 1010px; height: auto; margin-right: auto; margin-left: auto; }
To:
body { color: white; font-family: tahoma, verdana, arial; text-align: center; } #wrapper { text-align: left; position: relative; width: 1010px; height: auto; margin-right: auto; margin-left: auto; background: black url(../images/rotate.php) no-repeat fixed center 50%; }

Tooltip position relative to browser window

Similar Messages

Maybe you are looking for