I have some page navigation buttons + a dropdown box that I'm trying to display side-by-side but they are not cooperating with each other.
Both items are to float right. Fiddle: http://jsfiddle.net/u9dBm/1/
What's wrong:
the red cross is what is happening now
the red cross and green tick is what should be like but you'll notice that the dropdown is one pixel short on the top when by iteself away from the pages they are the same height...
green tick is what it should be like
Why are the two object playing silly buggers with their height?
Unrelated to the problem, but something I'm curious about... Why when I put the SPAN containing the dropdown AFTER the pages one, it displays to the left? Logically (or mine at least), since it is in code AFTER it and not before, it should display afterwards?
I wouldn't use float at all for this. I made some changes to your code, let me know what you think: http://jsfiddle.net/Wexcode/g2Z5k/
I messed around with some relative positioning, and I got this:
http://jsfiddle.net/u9dBm/6/
I added
position: relative;
top: -6px;
to the end of .dropdown > li to make it appear 6 pixels higher than it's supposed to. I can't tell you why it was rendering down there in the first place, but I can give you a crappy fix.
BTW, I really liked the demo.
Related
My Problem
I am trying to add 3 big buttons ( Summary, Builder, History ) in the middle of my nav bar. Below is pictured my ideal results. I would like an active one to have no bottom border.
I have tried everything I can think of to get this to work. When I add a button in the spot you would think it should go, here is what I get:
Notice the yellow oval, that is where my button is ending up!! I can't figure out what I am doing wrong.
Here is a link to the page, as to post the code here would be too long:
http://johntesting.azurewebsites.net/workflow-blue/blank-backup.html
Can anyone help me out with these buttons? I have been going crazy trying to figure this out.
Thanks for looking.
John
Set display:flex; on your '.page_title' div to immediately see the button much closer to where you expect it. The first child element of that div is an h3 which is a block element that fills the entire div, leaving no room for your buttons, resulting in them being pushed to the next line.
Another approach is to set the display property of that h3 to inline-block.
I have an image on my site that I want to be set as it's own entity that I can freeform and adjust without it conflicting with other elements, I have it's CSS as
#backgroundImage{
position:absolute;
float:right;
top:0;
left:50%;
}
Using fixed and absolute positions cause the image to stack level to the Nav bar, but any other position will cause the Nav bar to jump right under the image I'm using (it's a picture of the moon) It is cutting off the image, text, but it's behind the Nav bar.
Things I have tried: Putting it inside of a I have no idea how that would work out, and I tried floating it contained inside of a div.
I have also read some comments about putting it on the z or y axis, but I have no idea what that means, I'm still reading about it or trying to find something to help me understand it.
This is for a school project, I am still very basic in this field.
Use a z-index of -1:
#backgroundImage {
z-index: -1;
}
Also, it's not recommended that you name elements with camel-case - use dashes instead.
If you want the element completely on it's own try using the element from html. However, then it won't necessarily stay in the background. Hopefully this is what you were looking for
The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/
If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.
I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).
Is this possible only in CSS or do I have to put some js in it?
this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().
I have modified your fiddle (the borders are just there for better visual distinction.)
I just added the following rule:
ul>li:nth-last-of-type(-n+2)>div {
top:auto;
bottom: 50px;
}
Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.