The problem is though that header's top margin is ignored as long as topBar has position:fixed (So when the page loads, header is pretty much hidden below topBar).
How do I fix margin-top being ignored?
Thanks in advace..
As far as I understand from your question you are trying to give position:fixed only to topBar. Please find my pseudo code to answer your problem.Try adding position fixed to the outer header container so that both the top bar and header stays fixed.
<header style="position:fixed;">
<nav class="top-bar">
</nav>
</header>
use this if problem is still remain then share code
#header
{
position:fixed;
top:0px;
width:100%;
height:30px;
}
Set the header's top margin to the desired value plus the height of topBar.
Related
I try to solve this problem for hours ...
I tried a few tricks, some small hack, I also tried to add positions "relative, absolute...Etc", some "top", top add a invisible not fixed div behind the fixed and others, but I want the cleanest solution possible and to know WHY have I got this problem.
: I have a menu "fixed" to the top, and a header.
The header is behind the menu (normal), but the problem is that when I add a margin to the header, it adds a margin to the body, while I want to add margin to the header INSIDE the body, just place the header under the menu without position:relative+top:Xpx.
And use "box-sizing: border-box" doesn't change anything
http://jsfiddle.net/WdNz4/
<div id="menu">
</div>
<div id="header">
test1(Success)<br>test2<br>test3(Lose)<br>test4<br>test5
</div>
(can't post my css, little bug, go to jsfiddle)
Thanx in advance for your help !
Add top:0; property to your #menu:
#menu {
height: 40px;
width: 100%;
position: fixed;
background-color: red;
top:0;
}
JSFiddle: http://jsfiddle.net/WdNz4/4/
Just use float:left; this will set your block outside the body structure, so that way you can position it anyway you want.
The page in question is this: http://amytdatta.com/ironic-bironic (password: tyma) - it's a pre-release page for a new album I worked on, sorry!
I'd like to have the video and the text nav below scale and center to the browser window without the need for a scrollbar. I've tried all kinds of approaches using min height / max height but just can't seem to get the intended result. I'm guessing that I don't know which elements to target and how to target them.
Any advice for a good solid approach would be really appreciated. Also, since i'm using Virb I can only do overrides to the CSS, so I can't delete lines.
Thanks very much.
Without actually seeing your website since it's password protected I would suggest something along the lines of the folllowing:
You set a wrapper around your elements, in your case the nav and the video. And then set the CSS for the video and nav to have an auto margin. Which should center it both horizontally and verically. You might want to add a wrapper for the 2 components to keep them nicely stacked together and then put an auto margin on that wrapper, but the below should already work.
Html:
<div id="container">
<div id="nav"><!-- nav here --></div>
<div id="video"><!--video here--></div>
</div>
CSS:
#container {
width:100%;
height:100%;
}
#video{
margin:auto;
}
#nav {
margin:auto;
}
There are my codes. (jsfiddle)
Why this part of my codes isn't running?
header{background-color: #2bd5ec;}
I want to add background color to header tag. What i need to do?
The issue here is that since the elements inside your header are floated, they're considered in a different flow than your header, and thus it doesn't resize to fit them.
One way to fix this is to append <div style = "clear: both;"></div> to your header; little demo: little link.
You can also just add overflow: hidden; to your header: another little link, or float it as well: yet another little link.
you can set Height for Header.
for example :
header{background-color: red; height:100px;}
and you can use "clear" like this :
<header>
<div id="info">
<h1>Oyunn.in</h1>
</div>
<div id="categories">
<p>Barbie - Benten - Senten</p>
</div>
<br clear="all"/>
</header>
and css:
header{background-color: #2bd5ec;}
#info{float: left;}
#info h1{font-size: 100%;margin: 0;}
#categories{float: right;}
#categories p{margin:0;}
use overflow:hidden
header{background-color: #2bd5ec; overflow:hidden;}
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless.
SEE DEMO
Add
header{background-color: #2bd5ec;width:100%; height:30px;}
Background attribute usually needs div's dimensions
actually you didn't clear your child floats so whenever we are using float so we should clear the floats and we can give overflow: hidden; in our parent div to clearing the child floated div's.
header {
background-color: #2BD5EC;
overflow: hidden;
}
see the demo:- http://jsfiddle.net/vE8rd/17/
I have a drop down menu on: http://whitehornguard.com/ but in at least IE7 the drop down part is appearing underneath the large header image, I have tried changing the z-index & using !important but it doesn't seem to be making any difference..
What am i doing wrong? Thanks.
This is a known issue with IE. There is a trick to workaround it.
Try wrapping the menu with additional container with the following styling:
<div id="wrapper" style="position:relative; z-index: 1000;">
<div id="menu" style="position:absolute; z-index: 999;"></div>
</div>
Please notice that the menu's z-index is less then the container.
For more details please check: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
The problem is, that IE just requires some use of position. So the z.index will just be used, if position is present. For an element, you don't want to give any positioning-rules, just try to set position:relative
You wrap your nav in a div with inline styles. Add z-index:1000; to it. It fixes the issue.
I have a container background defined in CSS like this;
.container {
background:#fff;
margin-left:auto;
margin-right:auto;
position: relative;
width:970px;
border:1px solid #000;
padding:5px 10px;
}
The problem is I have a jqGrid put in the bottom of the container (near the bottom edge) and when its initially drawn it does fit inside the container panel and looks correct. Something like this (please pardon my non-l33t graphic skillz):
alt text http://img67.yfrog.com/img67/7162/screenshot002f.jpg
But then when I populate the grid with rows it outgrows the container and it looks really tacky, something like this (I circled the original container background edges):
alt text http://img80.yfrog.com/img80/5419/screenshot003fr.jpg
I am sure its something I am doing wrong with the CSS. Any advice would be appreciated.
EDIT: The problem isn't the width its the height of the container being overlapped by the new height of the now populated grid
I've seen this happen many times when you have floats inside. Add a clearing div just before closing container. You should always clean up after floats.
<div class="container">
<div id="nav" style="float:left;">
...
</div>
<div id="grid" style="float:left;">
...
</div>
<div style="clear:both;"></div> <!-- this does the trick -->
</div>
I disagree with adding float to container. Although this will work, having unnecessary floats will give you more problems down the road. Only use floats where necessary and clear it when done floating.
Also in my experience, overflow doesn't mean anything here unless you define height. I don't think setting overflow on container fixes the issue here. Correct me in the comments if I'm wrong.
.container { overflow:hidden; }
assuming you are dealing with floats, this is one way to make the container actually contain them.
Your container is fixed width and won't grow. What you're probably looking for is min-width. In other words, change:
width:970px;
to:
min-width:970px;
As a note, IE 6 and 7 treat width as min-width, but other browsers do not.
I think you need this in your CSS:
overflow: auto;
Depending on your float situation for the container and the inside grid, you can do a number of different things. You might be able to get away with just adding a clear,
clear:both;
You also can float the parent. This is called, setting a float to fix a float. So if your grid has a
float:left;
Then you can just add
float:left;
to your container css. I really like the Complex Spiral article on containing floats.