I'm in the process of setting up a proxy site and I'm trying to add a small header to the top of each page (about 40px, just enough for a text box to allow the user to change the website they are browsing through the proxy). Unfortunately everything I've tried so far places the header on top of the existing page covering the top part of the page. I'm trying to figure out a way to place the header above the page, moving all the contents of the page down 40px. Any help is highly appreciated.
Thanks.
P.S. I figured out that the content that seems to be causing the most issues is content that is absolutely positioned to the top of the page.
<br clear="all" />
Place that underneath the new div and above all the content you want the site topbar to sit above
This should show a header of 40 px in your page:
<div style="height:40px;width:100%;display:block">My small header</div>
without seeing the HTML, we're flying blind, but based on your description, I think you've got a site where direct children of the body element are absolutely positioned at the top. The solutions I would pursue involves a wrapping those direct children in a relatively positioned div (or section) and then just insert your new content above that div.
Your structure should go from
<body>
<div>this is absolutely positioned</div>
</body>
to
<body>
<div>this is your new header</div>
<div class="relatively position wrapped">
<div>this is absolutely positioned</div>
</div>
</body>
This will allow your new content to affect the positioning of the stuff that comes after.
The problem you're looking at is based on the fact that absolutely positioned elements have no place in the document flow, so for best control, you place them in a relatively positioned element that does effect the document flow, and is effected by surrounding elements.
If all of the offending elements are positioned at the top, you could just give each of the a style attribute like style="top: 40px" (better yet, do that in the css).
If you want to wrap the offending elements but don't want to mess with the html, you could use jquery:
jQuery(body).innerWrap('<div style="position: relative;"></div>');
jQuery(body).prepend('<div>your new content</div>');
Related
I'm creating a bootstrap template and I'm having a problem.
The section id="content-one" shows up on the top of the page. It doesn't seem I can find a solution for this to place it under the full-screen header.
Needs to be positioned here:
pic
Here is the code: http://codeply.com/go/8iYGenpntB
The problem is that elements within <section id="hero"> are absolute positioned, which take them out of the normal document flow and other elements will ignore their positioning on the page (i.e. pretend they're not there). That is why <section id="content-one"> is above the "main header", i.e. <section id="hero"> content. The elements that have absolute positioning are .hero-wrapper and .hero-container.
I'm not sure what the final layout should be or the requirements upon it so it's hard to recommend much beyond pointing out the source of the issue. You could possibly use padding and margin only to get <section id="hero"> the height/size you'd like.
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
There is a large absolute positioned Div with lots of absolute positioned content in it.
Source Looks like this:
<div id="masterdiv"
style="display:block;position:absolute;
left:0;top:0;width:595pt;background:white;">
<IMG WIDTH=793 HEIGHT=1121
style="border:2px solid lightgrey;background:white;left:0pt;top:0pt;
width:595pt;height:841pt;" SRC="../../xyz" id="masterbild">
<p style="left:574.75pt;top:67.05pt;font-family:Arial;font-size:11pt;">
<b>W1</b>
</p>
<p style="left:160pt;top:71.15pt;font-family:Arial;font-size:12pt;">
<b>Rohrbearbeitungs-<SPAN style="word-spacing:0.05pt;"> </SPAN>
und<SPAN style="word-spacing:0.05pt;"> </SPAN>Handwerkzeuge</b>
</p>
....
</div>
The problem (IE9!):
I cant scroll to the end of the div content. The scrollbar of the browser and the div itself stops at a certain point (bottom) of the page. But this is NOT the end of the content. If I put the "top" style value of "masterdiv" to -400px I can see theres actually more content.
Pictures
Bottom of the Page:
http://imageshack.us/photo/my-images/337/seitenende.jpg/
Changed Top to -400px:
http://imageshack.us/photo/my-images/269/gendertertop.jpg/
Things I tried:
Setting "Masterdiv" to 100% height or "1500px" or whatever doenst work.
Setting Body to "1500px" affects the scrollbar, but the content of the div is still ending at some certain point.
I combined these two things without succes.
EDIT: Solution:
Body Tag had "position:fixed" on it. I dropped it and it worked.
What can I do?
Im forced to use position:absolute.
Have a look at the whitespace style tag, or try fiddling around with the overflow options, it should expand automatically at that point, but not too sure about how IE9 behaves.
EDIT
It might be the default settings for the iframe. Try seeing if setting the scrolling parameter to "yes" within the iframe
I have a div element that is defined on the top of the page and I have this another div element that is defined at the bottom of the page.... is there any way that I can define the first div element (at the top) as a child of the div element that is at the bottom.
The problem is I need a div in header in the header file (header.php) this div acts as a container for an JS, but once the data is loaded I want it to be displayed inside another div.
Would postponing the loading of JS till the middle section of page is advisable...
Yes: make the top div a child of the bottom div by placing the child within the markup of the parent, and use absolute positioning to move the child to the top.
No, because it's not a child of that DIV. If you want it to be a child, make it a child, and then alter it's position with CSS to be on the top of the page.
No, though you can move it with JavaScript after the second element loads.
By "child" do you mean simply appears inside, yet the HTML is defined at the top? If so, you could also possibly simply change the positioning via CSS.
Are you constrained to output the HTML for the first div at the top of the page for any reason? The real solution here is to simply output elements where you actually want them.
No idea why you would want to do that but this markup should suffice:
<div id="wrap">
<div id="main">
<!-- Insert content, push off the top with "margin-top:150px", etc. -->
</div>
<div id="foot">
<div id="head">
<!-- Insert header stuff, position with "positon:absolute", etc. -->
</div>
</div>
</div>
Tweak width, height, margin and padding of elements to taste.
Basically, I have a form, outside of that form in this random space on my page I want to position a div (containing two buttons). I've looked at using absolute positioning. However, it is positioning it outside of the page wrapper.
How can I get the positioning to be specified from the corner point of the actual page and not the window?
How can I get the positioning to be
specified from the corner point of the
actual page and not the window?
You need to add position: relative to the element you would like the top and left values to be offset from.
That might be your form, or it might be your #container/#wrapper element.
See here for details and a visual: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Looks like you have your answer by now. But ill post this anyways.
A simple and short example which shows how relative positioning to parent is done.
http://jsfiddle.net/EadXw/
If you want it positioned top:0;left:0 on the page, place it immediately after the <body> tag.
If it is wrapped in anything the containers may change it's position. Make sure it is independant and not influenced by any containers.
Sounds like you should read up a bit on the flow of the DOM.
Positioning with CSS and HTML
Make sure your <form> element wraps your whole "page" and that the <div> with the buttons is the first child of <form>.
When you do this you can add the rule position:relative to the form and position:absolute to the <div> and move it around with top and left.
Another option is to have no position rule on the form and have position:relative on the <div>. This is more compatible with iPad and iPhone devices, which don't like absolute positioning. When you go for this approach be sure to have a fixed height for the <div> and a negative margin-bottom of the same size.