I want to make my header fixed. But my header is overlapping my body content. I know there is a way to fix it, adding padding. But for some pages, I have to add padding-top: 20px; and for another page I have to add padding-top 50px;
Also, for responsive I have to keep change the padding-top. Anyone know how do it in dynamic way?
#top-header-wrapper {
background-color: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
If you are using a header element with the position value of fixed; as you've notice it will sit "on top" of the proceeding element.
Using the padding-top property is one way of making sure to ensure that your header doesn't 'block' content on the proceeding element (let's pretend it is a section element):
header ~ section {
padding-top: 50px;
}
Like you've said, one issue is that if the header does not have a static height (which it probably should) and when switching viewport sizes, you have to change the padding-top value.
Personally, I don't think that's so much of an issue, since media queries are easy to use.
With CSS, it is your only option, however. That are ways to use javascript to get an elements height and set the padding-top of another element to the first elements height, but since you are asking about css, your best bet is to use #media rules.
Related
I made this code that makes a responsive height, it adjusts according to the size of the viewport. (Run the snippet and resize the screen).
Whereas the html and body have a height: 100%, I set up a basic structure with 3 divs and I was handing this height: 100% between them (as you can see in the snippet). After that, I gave a position: absolute and top according to the size of each.
Well, as I assign attributes the top for each div in "hand", I got the feeling that this may be a quick fix/MacGyver on it, because as in the later, there are more divs, I have to do this calculation for top again. I think that have better ways to do this...
Thus, in what other ways I can do this? The code that I did can be considered a quick fix/MacGyver?
html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.div1{
position: absolute;
width: 100%;
height: 10%;
background: red;
}
.div2{
position: absolute;
top: 10%;
width: 100%;
height: 75%;
background: green;
}
.div3{
position: absolute;
top: 85%;
width: 100%;
height: 15%;
background: yellow;
}
<div class="principal">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
The answer to whether what you're doing is a good solution (which I will interpret as concise, not overly complicated, and as compatible as possibe) depends on what exactly you're trying to do. Because you don't provide much detail on that end, let me give you the rundown.
The generally best approach (by the definition above)
In most cases, you won't need any special properties and can simply set the height or min-height of your three containers to the appropriate value, since their parent (body) already has a height of 100%. Because everything is underneath each other, there is no need to use the position property in any way.
Because of the way html works by default, these containers will retain their size until their content will require more space; then they will expand to accomodate the content. This is a feature, not a bug.
If you want to prevent this, set the overflow to hidden or scroll, which will help retaining the original container size (though in case of scrolling, scrollbars might mess with your plans).
Alternative solutions
Sometimes layouters get weird ideas of what you need to put on a webpage, and weird ideas might require weird solutions. Let me try to come up with a list of options to choose from:
The approach you took works if you need to split the viewport into exact shares of fix values, disregarding the container's contents entirely. It's compatible with any relevant browser by a long shot, but it will (assuming you handle the overflow so it doesn't stretch the container) likely result in cut-off content on extreme screen sizes (if you have primarily text content) or aspect ratios (if you have primarily image content); to be honest, probably both - but if you're working on a game, for example, maintaining a relative container size can easily be more important than their contents
Flexboxes will "only" give you a benefit of stretching the content over the whole screen if you're desperately trying to avoid setting a height, but it shouldn't result in any unforeseen errors, aside from the compatibility issues. As an additional bonus, you can rearrange the containers with the order property, which none of the other methods will accomplish.
Using absolute-positioned elements, you can entirely disregard height attributes and just set both top:0 and bottom:0 (while having a relative-positioned parent) to stretch a container over the entire height, then position containers inside on the top and bottom the same way. Not many cases in which this is more useful than the above two come to mind, and you won't like fixing any problems you encounter on the way, but if you're developing for browsers thathave issues with overflow properties, you could look into it.
The vh unit, apart from suffering from compatibility issues about the same, can be used, but don't pose any actual benefit over using percentage values. They are used to size elements relative to the viewport dimensions, which your percentage solution does just the same for this specific use case.
You could use a table, though that's commonly considered bad practice for various reasons and will on top of that be the most complicated solution of all of these, so I won't go into it.
So, all in all, there are many ways to accomplish what you want (and I possibly even missed some), and without providing info about the exact nature of what you're trying to do, there can be no exact recommendations other than a quick summary of what I wrote above: If you plan on putting content in the top and bottom container and you can't use the topmost solution, flexbox will work the best for you; if you need the containers to take up precisely a certain percentage, go with your original solution; and only if both aren't suitable, expand your search to the other options.
Today flex can make this really easy:
examples to run in full page:
html, body {
height:100%;
/*
}
next can be declared only for body but won't hurt if both html/body
body {
*/
display:flex;
flex-flow:column;
}
main {flex:1;
}
/* makeup */
header, footer {
background:tomato;
padding:1em;
}
main {
background:turquoise;
margin:1em;/* it can even stand away */
}
<header> header no need to set an height </header>
<main> let's fill remaining space</main>
<footer> footer no need to set an height </footer>
or use many div
html,
body {
height: 100%;
}
body {
display: flex;
flex-flow: column;
}
div {
flex: 1;
}
/* makeup */
header,
footer {
background: tomato;
padding: 1em;
}
div {
background: turquoise;
margin: 1em;/* it can even stand away */
}
div.autoH {
flex: none;
margin: 0.25em 0em;
background: brown
}
<header>header no need to set an height</header>
<div>let's fill remaining space</div>
<div class="autoH">let's fill only my needed space</div>
<header>or use header's / footer's properties</header>
<div>let's fill remaining space</div>
<footer>footer no need to set an height</footer>
Im trying to accomplish this:
http://codepen.io/Mest/pen/oKBIu?editors=110
.child-div {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
but instead of a "child-div" i want to target an img-class, like this:
http://codepen.io/dantveita/pen/ZGdKmd
.parent-div img {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
When i do this, im getting a horizontal scrollbar, and im not sure why. Could anyone explain this to me. And if possible, provide a solution?
Thanks
Since you are using position: relative, moving the image to the left doesn't actually take it outside of the document flow, so, according to the browser, it still thinks the image is sticking out.
Because there are no containing elements, there's also no need to use viewport-width over a percentage. For some reason, using viewport-width instead of a percentage adds a little extra space on the right, underneath the scrollbar, even when the image is absolutely positioned.
However, this works:
.parent-div img {
position: absolute;
left: 0;
width: 100%;
}
You may also want to remove the width="1400px" from your image tag, as it isn't necessary and may cause inheritance issues later on.
Im going to go with
.parent-div img {
display:block;
width: 100vw;
position: relative;
left: calc(-50vw + 50%);}
on the img-class for now, while hiding overflow-x, until something comes up that makes hiding the scrollbar prevent users from viewing content.
The reason for using this method, and not closing the "previous" container (which would be the obvious choice) is that i want a quick solution for a wordpress blogtemplate, where all images given a specific img-class will stretch full width, when media is inserted from post-editor.
Heres an example of the effect im looking for (theverge.com is obviously closing containers):
http://www.theverge.com/2015/8/4/9090897/mlb-bam-live-streaming-internet-tv-nhl-hbo-now-espn
I have a dynamic created page with a panel which contains this:
<div class="x-panel-body x-panel-body-default x-panel-body-default" id="panel-1026-body" style="left: 0px; top: 0px; width: 1819px; height: 29px;">
I want to change the width of this panel, but the problem is that the width is not being overwritten.
What I have tried to do in my css is:
#panel-1026-body {
width: 400px;
}
This does not work, since the width still stays 1819px as auto-created by the panel. How ever, it seems that it is only the width: that it won't accept, if I fx. add a margin-left: 400px; or background-color: red; it works.
Does anyone know what might be the cause of the width not taking effect?
I have provided the info that I think is relevant, but please let me know if you need more info
Thank you
It is because when your set a value in your element like style="left: 0px; top: 0px; width: 1819px; height: 29px;", it will be prioritary on the CSS.
Rapid solution :
#panel-1026-body {
width: 400px !important;
}
But it's a very bad pratice to use !important
Cool solution
Try to remove all the style of your element and put it into a CSS class. After, put your CSS code, who will be prioritary on the code before.
inline-styles have greater specificity so with normally you can't override that. You need to use !important:
#panel-1026-body {
width: 400px !important;
}
And yes margin-left or background-color works as these are not defined in that inline-style.
Changing a complex component dimensions (panel, grid, tree, etc.) with CSS is generally not a good idea in Ext. The dimension you see in the DOM, in your case 1819px can also be set on some children of the panel depending on layout.
Thus, you would need to use css that addresses main container div plus all necessary children. Such solution is very vulnerable because the DOM structure can (and it does) change with Ext upgrades - sometimes even minor upgrades may introduce a change of DOM.
You should always set dimensions programmatically calling panel.setWidth(), panel.setHeight(), panel.setSize() or similar. Ext then takes care about itself and sets the width to all DOM elements it needs.
As all suggested in this topic, the solution was to add:
width: 400px !important;
This solved my problem. Gratitude to all that helped
I have a "ribbon" type header on the top of my website:
#top-wrapper {
border-bottom: 5px solid #A1C1BE;
width: 100%;
background-color: #59554E;
position: absolute;
top: 0;
left: 0;
margin-bottom: 100px;
padding: 10px 0 0 0;
color: #C0C0A8;
}
The absolute positioning is needed to make sure it occupies the complete width of the user's browser (as far as I know). However, the rest of my webpage (the main body which contains all my other divs) is hidden behind this ribbon:
#pagebody {
width: 60%;
margin-left: auto;
margin-right: auto;
}
The only solution I have been able to find is adding a bunch of <br> between the end of top-wrapper and the start of pagebody.
Is there a better way of doing this?
As per my comment in another answer:
You can just use width: 100%, but make sure you remove the default gap it leaves with:
html, body {
margin: 0;
padding: 0;
}
You should also check out necolas' normalize.css. It includes all of this basic CSS rules you're going to need in pretty much every site :)
Absolutely positioned elements (top-wrapper) are always on top of relative elements (pagebody), unless you do some hacky stuff with z-index (and even that is limited). What you probably want to do is move the pagebody element down just past the top-wrapper. I don't know how tall your top-wrapper is because it has no specified height. And you might not know it due to font-size differences. But overall, you simply need to add a top margin or padding to the pagebody tag, something like this:
margin-top:50px;
Absolute positioning takes an element out of the normal flow. You do not need absolute positioning to maximize width. You do that with width:100%.
There are many ways to do this. First, you can place your top wrapper outside the pagebody element and then just define its width as 100%.
If you have a graphic that is a ribbon and it is supposed to overlap the top of the pagebody element - as I think you are saying above - then you would use position absolute and z-index to place it above the pagebody element. Then add the proper padding-top to pagebody.
You didn't provide html so we don't really know what you're up to totally.
I have a header, mainbody and footer. Header and mainbody are properly styled. Now for footer I want to make it appear behind mainbody, so I used:
z-index: -1;
position: relative;
top: -60px;
This gives the desired result, but I get an extra space of 60px at the bottom.
How do I clear this extra space?
Paul is correct. margin-top: -60px; instead of top: -60px;. Another possible solution would be to set the "mainbody" to position: relative; then to use position: absolute; bottom: 60px; on the footer - although this woild mean the footer needs to be moved inside "mainbody". though as long as the parent of footer flows with "mainbody" you could use this same trick on that element instead.
The “extra” space at the bottom is the space that the footer would be taking up. Relatively positioned elements still take up the same space in the page’s layout flow, even though they’re appearing somewhere else.
You could try a negative bottom margin on your mainbody. You may find this means you don’t need top: -60px; on your footer.
You can still use:
position: relative;
top: -60px;
for the section you need but set
margin-top: -60px;
to section which appears next. In this case - footer.
another solution for this is:
z-index: -1;
position: relative;
top: -60px;
margin-bottom: -60px;
top creates extra margin and margin-bottom removes it
for some reason for h tag only this worked for me. negative margin-top doesnt work
One way to achieve that would be to put the div inside another, absolute'ly positioned div so that it's taken out of the document flow.
Not really a direct answer to your question, but depending on what you want to display behind the main content, you can perhaps just fake it.
If it´s an image, you can simply put it in html {} or body {} (or a div that encapsulates all content) and align it to the bottom.
The appropriate answer is to make the body have position relative then style what you want to style using position absolute and using top of your choice