Attachment of an element in the browser window - why margins collapsed here?

Someone at Watch video tutorials form this youtubechannel? I understand everything except this part:

072 setting an element in the browser window - YouTube

I read article margins collapse - SitePoint, but in this case I don't understand what the margins are collapsing? We have a header element that has position fixed :

#header {
    position: fixed;
    width: 1200px;
    background-color: #FFFFFF;
}

and we figure element with ID = 'Heroes' (which is just under the header element) with margin-top140px, which is the same as the height of the header:

#hero {
    margin-top: 140px;
}

(HTML):


<div id="wrapper">
  <header id="header">
     ...
  </header>
  <figure id="hero">
     ...
  </figure>
...
</div>

)

But the result is the following:

This problem is solved by adding

Top: 0px;

to #header, but I do not understand why the header element also moved down, as it also top of the margin: 140px when there post fixed , which means that it is positioned compared to the browser window:

An element with fixed position is positioned compared to the browser window.

Fixed position elements are removed from the normal flow. The document and other elements behave as the fixed positioned element does not exist.

CSS positioning

Let's see if I can explain it and no sense of it...

Because the #header element is pulled out of the natural flow of the document through its position: setting fixed, #hero next item margin collapses with #wrapper since there is nothing in the #wrapper to stop him doing that. In this case, the addition of HTML in the #wrapper, before the item #header or by adding a css padding-top or border-top to #wrapper are otherwise, you can stop thecollapse.

A fixed element itself doesn't fix left/top of the default browser window (i.e. What are the top and left parameters for), it attaches to its own location in the normal document flow. The rest of the content of the document does not account this positioning and moving as if the fixed element is not there. You can see very well if you give a fixed position to one of your

elements and let all the top, left, bottom or right settings. The

items under the fixed we will move upward as if fixed is just not there, yet one fixed will always be in its normal flow position dictated by the html code.

That being said, the 'normal' position of the fixed element #header in the document would be 0/0 of the #wrapper. The #wrapper that has a margin of 140px instance collapse of her second child, because this second child is now the first child, with the removed #header element in the normal flow of the document by post: fixed. Then, without high settings or to the left, the #header knows he must be 0/0 of the #wrapper which is lower in the page because of the collapse. That's why the addition of the question in patches of higher setting, he tells the #header away #wrapper 0/0 to the top viewport: 0px.

Clear as mud?

Tags: Dreamweaver

Similar Questions

I can't send an attachment from my email whice is an overview, but when I click on the attachment it does not bring the browser window

When I click on the attachments it does not have a window to be able to navigate to my files

Hello

You also have another question in these Forums on your e-mail problems.

They can be connected:

Here is a link to your other question:

http://answers.Microsoft.com/en-us/Windows/Forum/windows_vista-windows_install/when-i-try-to-send-an-email-i-get-this-msg-the/a8333fe9-cda8-49bc-A4E7-f8756a3086fc

See you soon.

Element is FLUSH left, right and top of the browser window.

OK, this should be an easy one for you guys. Can someone tell me how to do something (in this case a header bar) aligned to the left, right and top of the browser window? I tried many different ideas. Do not know where the margin or the padding is coming.
Something with a fixed width will push right (always leaving the gap on the left) and bring up the scroll bars. I don't want to scroll bars. I want an elastic element that fits flush, without a space.
Here is the code. I deleted everything except the header bar. View online at: http://www.upstartstudio.com/HS2.html . Thank you!
---------
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "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" >
{#body}
margin: 0px;
padding: 0px;
}
#header {}
background-color: #333;
margin: 0px;
padding: 0px;
height: 100px;
}
< / style >
< / head >
< body >
< div id = "header" > < / div >
< / body >
< / html >

-Change

{#body}

margin: 0px;

padding: 0px;

}

on this subject.

{body

margin: 0px;

padding: 0px;

}

You have an ID selector when you should have a type selector (or a tag selector).

How I would get the background of the body element to open the browser window wide

How I would get the background of the body element to open wide the browser window? I've heard that using an HTML tag or CSS rule that I can put across a background which is placed in the body element without using javascript is that true?

You could, but why, (she also would work properly, as it is)?

This size not your background image and that only the window correspond to your design, not your design to adapt to the window. If you want your design to fit a window much easier and not javascript dependent way would be to use page css liquid layouts, (as I said earlier, the background image will not develop unless you use values of %).

For liquid layouts testing - http://www.adobe.com/devnet/dreamweaver/articles/bk_dwcs4_mastering_css.html

PZ

Page DW8 with HTML to fit in the browser window

I created a basic html page and wish to have the page continue to fit in a browser window as the window changes size. Tried with CSS "background-size = 100%" fixed online codes, but doesn't seem to work.

The background-size setting is only to set a background image. Would not resize the entire page.

Several things working against you in your code. The first and most difficult to treat while using it on the page, is "position: absolute". In General, this setting is the opposite of reagent. Position: absolute "can" be used in sensitive designs, but it requires additional code to make it happen. Absolute positioning of objects include an exact amount of pixels high, left, down or to the right of the parent (just up and left by default in DW) element. In your case, #Layer1 will always be 431 pixels from the top of the page and 329 pixels from the left that is decidedly "not suitable."

These parameters (position, top and left) must be removed and the APDiv/layer button should be ignored here on out if you want your design to adapt to different screen sizes. You will need to learn how to position elements using css float, margin and padding if you want to create something sensible. Running through the tutorials at http://www.w3schools.com/css for some databases. Some other links on css positioning...

Learn CSS positioning in ten steps: absolute relative static position float

CSS - float and clear formatting

Your width settings also say your items to an exact pixel size as well. To make your attentive elements, you can use % width settings. The actual size of an element using a percent width is determined by the setting of its parent element. For example, if you set the width of #Layer1 to 80%, instead of 674 pixels, it will eventually be 80% as wide as thesetting the tag. Given that theis assumed 100% unless otherwise stated, layer1 would end up being 80% of the width of the browser window. With ' width: 60% ", you can use a setting min-width" never get smaller than that "in css. If you set your same #Layer1 width: 80% a min-width: 400px will keep it from never has less than 400 pixels wide.

Once you have the basics of layouts css under your belt, look into CSS Media Queries. Basically what they allow you to do, is put "break points" in your .css file so "once that window reached 401 pixels or more, use this css instead" so it allows you to write completely different rules for various devices.

Try to float my icons so that they are always in the lower right of the browser window.

I am currently using tags div to achieve, but because I am now fields a preloader, I can't use this method. I have elements which must float including my logo on the lower left, my icons at the bottom right and request a tab on the top right of the window. I also need my main_mc to be centered in the browser window. I could do all this using CSS and DIV tags but because I would use a preloader, need to understand how do have instead.
Someone said in a previous debate that I could use javascript in some way to position elements, but do not know much about him. If someone could put a solution relatively easy to do this I would really appreciate it.

What kind of preloader is that? Do you use some sort of preloader javascript which shades site and preloads the page? How the preload affects your need to change the CSS? The SWF resize itself?

If you are not very familiar with JavaScript, it is better to get a frame that will handle things like differences between the browsers for you. jQuery is a very popular and easy to use framework. You can use the class ExternalInterface AS inform JavaScript your Flash loading is completed and use jQuery to measure and align your SWF object. You would need a resize handler to adjust necessary also when the user resizes the browser.

Although I keep just simple with CSS is better. I don't understand why a preloader is not what allows some CSS work unless the SWF is actually changing the size.

An example of a JavaScript function using jQuery that ExternalInterface might be called to reposition the SWF, assuming the SWF file has the id = "MainSWF":

JavaScript

$(document) .ready (function)

{

resize the listener

$(window) .resize (function () {AlignElements() ;});

Make sure SWF is absolute positioned

$('#MainSWF').css({'position':'absolute'});

call it to begin

AlignElements();

});

function AlignElements()

{

Use the top/left properties to align SWF

var left = Math.round (($(window) () - $('MainSWF').width () .width / 2) + "px";

Var high = Math.round (($(window) () - $('MainSWF').height () .height / 2) + "px";

$('#MainSWF').css({'left':left,'top':top});

}

AS:

LIKE, called SWF after preloading

ExternalInterface.call("saveglobalscore",score) ("AlignElements");

Make sure you download and load jQuery into your pages, so it is available or not working. There are a lot of other JavaScript frameworks you'll love more or are together lighter on the loading of the basic page for such things. Looking around doesn't hurt.

How can I get rid of the gap at the top of the browser window?

I am working on the design of a Web page and I have the first page done, but there is a gap between the top of the browser window and the top of my design.
I don't have the coding, page breaks before my head... How to fix this?
Here is the screenshot...

It is the padding: 20px;

on the body in your css element

Full screen swf don't auto-size until the browser window is resized
Hi all
I posted my test here at http://www.urbanlinx.com/Test.swf.
I have 4 MCs in the film. A header, content box (Center), footer and background image.
When the browser is set to scale the background will scale proportionally to the widow and maintains its proportions.
My problem: when the clip is loaded first, the background is not resized until the browser to resize manually by the user.
Is there a code I can add that will check the size of the window prior to the loading of the movie?

My code is attached.
Stop();

Stage.scaleMode = "noscale";
Stage.Align = "tl";
Stage.addListener({onResize:reposition});)

function reposition() {}
var header = _root.myHeader_mc;
var bg = _root.image_mc;
var content = _root.myContent_mc;
var _root.myFooter_mc = footer;

var NPOS;

NPOS = getNewPosition (header);
Header._x = nPos.x;
Header._y = 0;

NPOS = getNewPosition (content);
Content._x = nPos.x;
Content._y = nPos.y;

NPOS = getNewPosition (bg);
BG._x = nPos.x;
BG._y = nPos.y;

NPOS = getNewPosition (footer);
footer._x = nPos.x;
footer._y = Stage.height - footer._height;
};

function getNewPosition (mc) {}
var agree = Math.floor ((Stage.width-mc._width) / 2);
var = Math.floor ((Stage.height-mc._height) y / 2);
return to {x: agree, y: Y};
};

reposition();

Stage.scaleMode = "noScale";
Automatic resizing
stageListener = new Object();
stageListener.onResize = function() {}
backgroundResize (_root.image_mc);
};
Stage.addListener (stageListener);
Background resizing
function backgroundResize (image) {}
var imageHeight = 400;
var imageWidth = 700;
var wRatio = Stage.width/imageWidth;
var hRatio = Stage.height/imageHeight;
Report higher
If (wRatio > hRatio) {}
var ratio = wRatio;
} else {}
var ratio = hRatio;
}
Resize
If (Stage.width < = imageWidth & & Stage.height < = imageHeight) {}
image._width = imageWidth;
image._height = imageHeight;
} else {}
image._width = imageWidth * ratio;
image._height = imageHeight * ratio;
}
}
backgroundResize (_root.image_mc);

Special thanks in advance.

PS: If you know a way to do this with a cleaner code, help would be greatly appreciated... If it is already the correct code... Thanks to all the people in the community who taught me :)
Well right after that a whole bunch of tracks and errors as much as I found the resize code is not like code reposition. Tried another code to reposition and its working great. It is also much smoother during resizing.

Here is the code I use. Basically the bottom scales proportionally to the browser window, keeps its ratio and scales of the Center. If anyone has any advice on how to do it more easily if you please drop me a line.

The browser window will not move back other windows when I click on them.

I minimize the browser window to view anything else. Any solution?

Hi marytpapa,
Please upgrade to the latest version of Firefox, the latest version is 40.0.3:
- Update to the latest version of Firefox
And Yes by clicking on the tab will bring the window to the front, not back. In Windows 7, you can import a program at home https://social.technet.microsoft.com/.../moverecover-offscreen-window

Resizing of the buttons on the toolbar disappear after the browser window

When I run my browser all the buttons on the toolbar are in place.

http://C2N.me/3cwiz9M.jpg

When I resize my browser window to make it smaller, these buttons to collapse to a "arrow":

http://C2N.me/3cwiLnZ.jpg

But when I resize my browser window to make it larger or maximize the browser window, these buttons won't reappear soon whatever I do next.

http://C2N.me/3cwiWnn.jpg

The only thing that helps is to close the browser and run it again.

Possible causes are extensions that required, information or other content of text in the Navigation toolbar.
You can try to move some of the buttons that are provided by an extension temporarily to a different toolbar to test this.

Why of opaque boxes appear in place of the entered text (Firefox ver. 34/Ubuntu 12.04) in the browser window?

There was a similar question posted earlier, but this isn't exactly the same thing. When all 'text' has been reached and appears in the URL address box - it is characterized by rectangular, green, black, or gray boxes (instead of letters, numbers, etc.). I can always navigate normally using the browser window, the text always appears in this format "hidden". In safe mode does not change the appearance. I updated the software, Firefox, using Linux (Terminal).
This problem is specific to Firefox only... no other browsers show this way.
It has been a consideration for a while, now. In fact, I got to use another browser, although I have Firefox in favour (including Linux) and wish to use it.
Thank you.

Sorry to hear that you have been waiting so long! Could you check this thread started by another user of Linux and see if workaround it helps you on your system:

How can I stop firefox ffrom blocking URLS

(Workaround was to switch the preference gfx.xrender.enabled to false).

After the upgrade to Firefox 34.0.5, app opens but there is no indication in the browser window, i.e. no URL opens, and there is no message error, but Safari OSX 10.9.5 misfortune

After the upgrade to Firefox 34.0.5, app opens but there is no indication in the browser window, i.e. no URL opens, and there is no error message.

Safari (OSX 10.9.5) works.

I tried the firewall solution, but it does not work.

Previous version of Firefox work very well. I tried the version installation 34 twice and the computer restart.

Yoono is a free software that allows you to connect and share with all your social networks and instant messaging in one place services
www.Yoono.com

It was very good work. Play well.
Please mark your last post as solved so other will know.

I've just updated to 30.0 and now the browser window is reduced by half.

I've just updated to 30.0 on my laptop. I've never had problems before and now when I open Firefox the browser window is reduced by half. I closed and reopened the browser and have even restarted my computer and I can't find something in the settings. I can't do what I usually do with the window this small.

Start Firefox in Safe Mode to check if one of the extensions (Firefox/tools > Modules > Extensions) or if hardware acceleration is the cause of the problem.
- Put yourself in the DEFAULT theme: Firefox/tools > Modules > appearance
- Do NOT click on the reset button on the startup window Mode safe
- https://support.Mozilla.org/KB/safe+mode
- https://support.Mozilla.org/KB/troubleshooting+extensions+and+themes

Given that I've upgraded to 20.0, many keyboard shourtcuts do not work in the browser window: Ctrl + C, CTRL-V, etc.

Many shortcut keys do not work in apps/sites in the browser window:

CTRL-C, RIGHT/LEFT/TOP/DOWN-arrow, BACKSPACE (back), CTRL-D, CTRL-T, TAB to move from one field, etc.

Using the menu commands such as COPY and PASTE work fine, while CTRL + C and Ctrl + V do not work.

Real pain... (since the upgrade to V20 a few days ago)

Following another suggestion here, I went in: config and disabled the "allowclipboardhelper.tabs.disabled" parameter set to "false". No change.

I'm on Mac OSX 10.7.5 (Lion).

Hello

Thank you very much. And thanks for the quick response!

I did as suggested and restarted several times enable or disable addons to isolate the one that generated the problem.

The guilty were:

Website and SEO analysis 1.1
SEOpen 1.2

Everything seems fine now.

Take care.

Why the browser window changes color when I bookmark on a page, or click on the download button?

Using Firefox 20 on MacOS - when I click the button downloads or Cmd + D to bookmark a page, the browser window changes which looks like this:
https://DL.dropboxusercontent.com/u/35912963/01-Firefox-before.PNG
who looks like this:
https://DL.dropboxusercontent.com/u/35912963/02-Firefox-after.PNG
Any thoughts would be welcome.

Dan

Hello

Wow, that seems strange. I have no idea why this would happen, but I wonder if it is related to one of the Add-ons you have installed? I see a red icon in the status bar that I'm not familiar with, which leads me to believe that you might have other add-ons installed. One thing to try is to start Firefox Firefox with disabled modules (you can do this in the Help menu). If you do not see this problem in this mode, the problem is caused by one of the Add-ons. On the Tools menu, you can access the Add-ons and disable one by one. Remember to restart each time, and then test.

If none of this takes care of this, my other suggestion would be Reset Firefox: Firefox Refresh - reset the parameters and modules

Hope all this helps.

See you soon,.
David

Attachment of an element in the browser window - why margins collapsed here?

Similar Questions

Maybe you are looking for