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.
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
I've actually got the tooltip showing where I want it to show, that part is working. The text it's displaying is contained in a <span> that's hidden until they hover over a div that has the tooltip class on it, similar to the example on w3schools.com.
I have a column of div's and only certain ones get the tooltip class. The problem I'm having is that the span is successfully hidden in the div's that don't have the tooltip class, but it's still reserving the space for it and I'm having trouble figuring out how to get it to not do that.
I'm hiding the <span> with CSS's visibilty:hidden which hides the text but the space for it is still reserved. If I change it to display:none instead of visibility:hidden it hides the text and does not reserve the space for it, which makes sense and that is almost what I want except I can't make it visible again without posting back.
So now I'm debating putting the whole thing inside of an ajax call so I don't have to refresh the whole page, but I'm not sure that would work either.
Is this even possible, or does anyone have any suggestions?
I appreciate any help anyone can offer.
Thanks
You can try span{position:absolute}
Use js instead of css.
If you use css then it'll also create problems on responsive.
You can use bootstrap tooltip or simple jQuery
https://jqueryui.com/tooltip/
what you can do is, give that div an id, and through css hover, set the tooltip's display to block,
or you can use, javascript for this, regidter those divs with a on hover, function , check the target of the hovered element, if it matches with that one, set tooltip's div display property to block,,simple
I always think I understand CSS positioning, but then get frustrated again. Ok when I have position:static, i.e., default, my page looks like this (shown with inspect element highlighting the parent row of the col-xs-* that contains the date picker content):
I would like to keep everything about that page the exact same EXCEPT that I want to fix the col-xs-* that contains the date picker content, so that when the page scrolls down (not in the Fiddle example), it would float on top. Nevermind the z-index, I just noticed, that the minute I apply position:fixed, something interesting happens. Here's a screenshot again where I inspect element and tried to highlight parent row of the col-xs-* that is fixed. Notice 2 things: 1) The parent row isn't highlighted in blue on the page; no idea where it went, 2) The content has shifted right for some reason. It's no longer centered above "Comparison's sake" text.
Can someone please explain this behavior to me? I think it's persistently messing up my code. My end goal is again to keep everything centered as in the first snapshot, but just fix the col-xs-*.
Code in this Fiddle: https://jsfiddle.net/2v3gpa7x/
The relevant col-xs-* has id date-row
For any type of scrolling to work you need to use {position:absolute;top:0;left:0;margin:0 auto;} The term 'auto' keeps the page content centered horizontally. "absolute" allows it all to move as a group. If I understood more of what you wanted I could add ul 'wrappers' to force the position of any object
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.
I have a html page with 12 thumbnails (spliced Photoshop) within a table (Table_01) within a div and when you hover over one of the thumbs a new image pops up.
At the moment when you hover over the "Ice white" thumb (this is the one I'm testing with at the moment) the new image pops up at the top of the page.
This is no good. It needs to pop up exactly to the right of the div which Table_01 is contained in (preferably top of pop up image flush with top of div and left side of pop up image touching right side of div if that makes sense). CSS is within head of source code near the end. It's not the best written webpage and is very messily coded but this bit should be easy to weed out and identify a solution hopefully. Any help greatly appreciated.
Late response obviously but I hope, it will help you out anyways.
As far as your comments above, those popping out new images needs to have absolute position with some right and top positions fixes. For example, considering that you are having a 3 divs in a row, each div is having an image, you should mention the parent div (containing the image) to have relative position; inside it the image (actually the popup image or thumb) should have position absolute and then it should have right and top adjustments in CSS as per your requirement.
I hope it will help you out...