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.
Related
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>');
I'm trying to make a 2 column(sidebar) responsive theme for SMF forum software. I wanted to stick a column on the right that would expand 100% the height of it's parent.
FYI, I just started converting the default theme, into a responsive theme.
Usually, I don't have problems with these issues, or responsive design. However, I cannot figure out why the height of the sidebar, keeps matching the height of the header.
The sidebar HTML is outside the header HTML, and before it. Yet, when you give the sidebar say a fixed width of 400px via inspect element, it also expands the height of the header. I am baffled by this, as code-side it doesn't seem to make sense.
I figured if I had another set of eyes, someone can help me figure this out.
http://xarcms.com/index.php?theme=3
Thanks.
The main thing that I see is that you're styling the wrong element. You have your sidebar wrapped in an <aside>, which is not floated, nor does it have a size declared. The sidebar content that you have styled is, therefore, expanding to 100% the <aside> which itself is shrink-wrapping down to the size of the content. You need to shift your styles to the <aside> to get it to behave more correctly.
Aside from that, I don't have much else for you at the moment, but the above should get you started. From there, I'd double-check your CSS to make sure you're not getting too broad a scope on one of your styles. You might want to also look at your HTML structure and make sure that you only nest things down as far as absolutely necessary. If you're still having trouble, see if you can get a trimmed-down version that still shows the problem, so that we can more easily help you.
To fix this problem, I placed the and areas outside the div container. I was able to remove 4 un-needed divs(mostly wrappers) because of this. So In a rough nutshell...
Switched To This:
<div width wrapper>
<header></header>
<aside floated></aside>
<section></section>
<footer></footer>
</div>
Rather Than:
<div width wrapper>
<section>
<header></header>
<aside floated></aside>
<div></div>
<footer></footer>
</section>
</div>
Which seemed to be cleaner and make more sense.
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>
I have an element nested inside another element (i.e. parent element). The thing is, I want to make the child element wider than the parent element — as I am unable to find the PHP code that I need to move it outside its current parent element.
This is how the page looks (click image to enlarge):
THE PLOT: You are seeing two content blocks in the page — <div id="Content">...</div> is one block floating left and <div id="Panel">...</div> is another that's floating right.
See the blue color block of text? It's the title of a discussion thread in my forum and is represented by <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> in the code. As shown by the arrows, I would like to extend it to full width of the page using css width:980px;.
The thing is, <div class="Tabs HeadingTabs DiscussionTabs FirstPage">...</div> is a child element whose parent element is <div id="Content">...</div>. The width of the parent element is 700px, but I need the width of the child element to be 980px.
So what I am doing is this:
set the child element's width to 980px. (width:980px;)
Now the child element overflows the parent element and on top of the the right-floating block as well. (i.e., <div id="Panel">...</div>)
So, I gave the right-floating block some margin-top so that it comes out from hiding below the extended element.
The following image represents just that (click image to enlarge):
So my question is — is what I am doing okay or is it a bad thing to do? Is this cross-browser compatible? (i.e., does it appear the same across all browsers?)
Hope someone can clarify on this. Thanks.
Just move the heading outside of <div class="Content">.
<div class="Tabs HeadingTabs DiscussionTabs FirstPage">
</div>
<div class="Content">
...
</div>
Don't use JavaScript just for this, that would be a mistake.
I also feel compelled to mention that I don't think that heading should be full width anyway, it doesn't represent a heading for the sidepanel, it's for the thread (which is only in the left column).
I wouldn't. As a general rule of thumb, I keep the parents bigger than the children. See this and this. I'm sure you would see differences from browser to browser if you implement this using HTML and CSS.
Have you thought about using JavaScript to accomplish what you want to do?
The default layout page I get in a MVC razor has a problem with the section tag being smaller than its contents. The issue is I have a large table inside of it, and it is running out of the section, rather than the section simply becoming wide enough to fit it. I have recreated the issue in jsFiddle. You can see that the blue box is much thinner than the red box. The blue section being the initial size of the window, but if you scroll right, then you see the table is wider than the section.
How do I get the section to widen to match the size of its contents?
<div class="page">
<section id="main" style="background:blue;height:50px">
<table style="width:1000px; overflow:auto;background:red">
<tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>
</table>
</section>
<footer>
</footer>
</div>
http://jsfiddle.net/sDG8n/1/
Float the section to the left
<section id="main" style="float:left;background:blue;height:50px">
Try putting the overflow:auto on the section instead of on the table.
The Spec says you're doing it wrong:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead
In other words: Use a DIV.