My nav bar correctly links to my 'work' section, but if I click ABOUT on the nav bar, it drops down to about 300px above the 'about' h2. I feel it may have to do with positions, displays? I can get the ABOUT anchored link to correctly go to the about section if I add
#about{
margin-top: 360px
}
Although this appears to be a poor patch on a larger problem with my construction. I've tried doing a lot of different things but I keep ending up with my work, about, and contact section starting to overlap into each other which I can't understand either. The divs dont seem to be stacking properly or something. ANY help is greatly appreciated.
http://wrobbins.me is the site. Thanks.
The link takes you exactly to where the about element is, it's just that the text in the element is pushed down by the job elements in the block above.
The problem is the jobwrap element. The floating elements inside it doesn't affect its size, so it has the height zero.
Add overflow:hidden to the #jobwrap style, and it will contain its children, and the about element will start below it.
When you use floats you should "clear" its parent or block you want to be below. Now your #jobwrap block have zero height and there is the problem with #about position. Use #about{cloar:both;} as hotfix and read more about floats and clearfix.
Related
This is a problem that for some odd reason I run into only sometimes. But how would I set a floated DIV's margin? I use negative pixels and seem to achieve the results, but when I view the page in the editor window of a CMS (ezPublisher) it looks totally disgusting and broken, but in the browser it is fine (being broken in the editor window will not fly here)
When I set an element to float:right, it kicks it way far to the left of the page, when I set the margin-left dimensions, it doesn't go anywhere.
So in short, I'm trying to ask: when I float an element to the right, what side to I set the dimensions on? margin-left? or margin-right?
Here is the page with
http://scope-stage.scholastic.com/issues/09_01_13/
.articleCover {
float:right;
width:210px;
margin-top:-190px;
margin-left:-20px;
}
Furthermore, I always though that you place floated elements before the element that they float next to in the markup. However, I see it either way sometimes. Thanks for the help, and I hope I was clear on my issue.
I'm attempting to get this menu working in IE7. I've squashed every bug but this one.
When you hover a list item, the UL's within the drawer that pops out won't float next to one another properly. If you look at the page in Chrome, that's how I was setting up the CSS before (display inline block, etc). That didn't work either so I tried floating them left.
Floating left fixed an issue I had with extra text-indent on the left of each li, but the ul's still will not float properly.
Does anyone have any ideas?
http://playground.willpracht.net/megaMenu.html
Redo your code to remove as many of the > selectors as you can. They are making everything much harder to deal with. It's like giving everything an id, and makes overriding things longer and longer and longer.
Honestly I would have sub-divs instead of just menus, because you're making the first li's look like headers but semantically making them no different from all the other links. Actual headers with links inside make more semantic sense. For example there's a link called tools and then the rest of the sibling links are... tools.
Anyway, when floating things, look at your widths. I see a lot of elements with no widths declared at all. In IE, with floats, this is important. I would set widths (they can be in em if you want) of the sub-divs, and then widths for the floating ul children inside. Their combined widths together should not equal 100%. For example, if a div is 140px wide, don't try two floated ul's inside each with widths of 70px, even though that should fit, and will in most browsers.
I have some example mega menus if you'd like to see, but there are many already out there and I don't believe I have one with floating ul's inside the submenu.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
I made a little example of my problem here:
http://peterbriers.be/test/float_html5.html
As you can see, I have a 'navigation list', and a floating header.
WHY is the header IN the navigation list? That is'nt normal behaviour is it?
The navigation list even inherits the height of the header. :s
This has nothing to do with HTML5. Did you want to clear:both on the nav? You floated the header, floated elements are taken out of flow so the nav acts like it isn't there.
If clearing doesn't do what you want, please include information as to what your desired layout needs to be.
EDIT for clarification and confusion:
The nav starts at the same vertical area as the heading because the heading is floated. It acts like it isn't there, but the clearfix on the ul adds the invisible element after the heading because source-order wise its after it. The clearfix then makes the element appear to contain it. Remove the clearfix and all that space will not be there.
Also, you still have not told us how you want it to look ( for reasons I do not know of ).
This is actually very normal behaviour. If you check the W3 information on CSS Float (http://w3schools.com/css/css_float.asp), you will notice this information:
How Elements Float
Elements are floated horizontally,
this means that an element can only be
floated left or right, not up or down.
A floated element will move as far to
the left or right as it can. Usually
this means all the way to the left or
right of the containing element.
The elements after the floating
element will flow around it.
The elements before the floating
element will not be affected.
If you take your code and just start button mashing after the word "Personal" in your header, and make the word Personal so long that it fills your entire screen width, you'll notice that the navigation bar actually drops below the header at that point. It's actually just doing what Float was intended to do. If you want your navigation bar below your header, maybe use a small table cell with border="0" and width="100%" so that you take up the entire screen width, causing float to drop below it.
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html