I'm absolutely positioning elements inside floating divs. The last absolutely positioned elements sticks to the top of the div in chrome until we resize the window (see here)
Things I tried so far:
Putting a container inside the floating element
Overflow: hidden/auto to the floats, elements and container
This only happens in chrome. Any idea why/what is happening?
Only small thing you have to do and everything else is great. Use this
.schedule-course-slot-wrapper {
position: absolute; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}
instead
.schedule-course-slot-wrapper {
position: relative; /*Important*/
border: thin solid;
border-radius: 3px;
margin: 0 2px;
padding: 0 3px;
height: 100%;
}
You have to use
pop.style.left = l+"px";
pop.style.top = t+"px";
instead of
pop.style.posLeft = l;
pop.style.posTop = t;
or both.
Related
On a website that I have been working on (www.koa-de.nl) I used the following code to center the navigation bar:
left: 50%;
transform: translateX(-50%);
I used this because margin-left: auto + margin-right: auto put the element slightly off-center.
Now I've noticed this doesn't work in older browsers and pushes the menu partly out of screen (due to left: 50%)
How can I work around this? Can I add some code to make sure the navigation is centered on all browsers?
Thanks for your help!
Doesn't even look like you need the translate and left property.
Try this:
.navibar {
background-color: #ffffff;
width: 65%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-style: none solid solid solid;
border-width: 0 2px 2px 2px;
border-color: #CF1B19;
margin: 0 auto;
}
The reason why this works is because you already have position: fixed on the .navbar-fixed-top class, along with a left: 0 and right: 0.
All you need to do next is set a margin: 0 auto to center the nav.
Using this the nav looked perfectly centered to me.
I am implementing SVG-edit into my website. It is designed to be full screen, but I have shrunk it to fit on my page, and changed some CSS to make this work, most importantly, putting it inside of this div.
#master_editor_container {
position: relative;
height: 600px;
border: 1px solid #ccc;
background: #ABCDEF;
}
I have a button, that when clicked, should cause flyout buttons to have it's display: none removed and appear on the screen next to the button that was clicked to activate them. The elements are on the HTML document. I have used inspect element after activating them to be sure there is no display: none applied. I have applied the highest z-element to the flyout buttons and their container. I have applied all the position relative, absolute, and fixed in several combinations to the button and it's containers. I have even used opacity: 0.9 to try to push the flyout buttons up.When I remove "position: relative", the flyout buttons are visible, but of course, svg-edit overflows the box I'm trying to contain it in.
Here is all the directly relevant CSS, however there are several moving parts. For the full HTML, see this pastebin. For the full CSS, see this pastebin. To see an example of what it should look like, see the original at the latest stable version
This is the div containing the button to activate the flyout
#tools_left {
position: absolute;
border-right: none;
width: 32px;
top: 40px;
left: 1px;
margin-top: -2px;
padding-left: 2px;
background: #D0D0D0; /* Needed so flyout icons don't appear on the left */
z-index: 4;
}
This is CSS applied directly to the flyout button container
.tools_flyout {
position: absolute;
display: none;
cursor: pointer;
width: 400px;
z-index: 1;
}
This is CSS applied directly to the flyout buttons themselves
.tools_flyout .tool_button {
float: left;
background-color: #E8E8E8;
border-left: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
height: 28px;
width: 28px;
}
According to comments, this is necessary to keep the flyouts sized properly
.tools_flyout .tool_button,
.tools_flyout .tool_flyout {
padding: 2px;
width: 24px;
height: 24px;
margin: 0;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
z-index: 9999;
}
Given what I'm trying to achieve and what I've tried, what might be causing these buttons not to display?
Another acceptable answer would be to suggest a way to keep svg-edit project inside of a div without using a container with "position:relative".
I'm creating a 2 tier drop down, menu and sub-menu, and I'm having an issue with either positioning, relative or absolute, and or floats. I've played around with absolute and the space/gap goes away, but my sub-menu's don't fly-out next to the hovered item, only the first. I tried relative and float both produce the undesired gap, but the sub-menu fly's out next to the hovered item as I want. Here's the code where I believe is where the issue is. Note, I created a JSFIDDLE so you can see the working code example:
Here's the JSFIDDLE that has the HTML and CSS. I put the code that has the gaps, but has the correct fly-out positioning. If I need to clarify things more clearly, let me know and I'll try.
Troubled code - I think
.sub-navigation-content {
position: relative;
margin: 0 0 0 150px;
top: -10px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
Below are screen shots of what I want it to look like:
Correct looking fly-out, but incorrect fly-out position:
Incorrect looking fly-out, but correct fly-out position:
Thanks in advance for having a look :)
So So ... You can use absolute position, but you need remove top: -10px;.
final class for sub-navigation-content:
.sub-navigation-content {
position: absolute;
margin: 0 0 0 150px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
I think its work good. And you can move fly-out list to top by change margin as you need, i e:
.sub-navigation-content {
position: absolute;
margin: -35px 0 0 150px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
Just give your .sub-navigation-content class an absolute positioning instead of relative.
.sub-navigation-content {
position: absolute;
}
You would surely also adjust the top to has at least a value of 0.
I'm developing a Search Application where the requirement is to have a magnifier image instead of button on the search textbox.
On a maximized page the anchor seems to be on correct place.
But on browser resize (clicking restore down button next to close button) the search textbox looks like this:
Following is my CSS code (I'm not a CSS guy btw :))
.search_div A
{
background: url("search-white.png") no-repeat scroll 4px 4px #FFFFFF;
border: 1px solid #CCCCCC;
height: 11px;
left: 85.8%;
margin-right: 175px;
padding: 6px 5px 4px 20px;
position: fixed;
top: 32px;
width: 0;
}
Please suggest.
You don't show the full markup for you search button/input so it's difficult to know exactly how how you exactly position the search button.
Here how I would do it. Let's say you have the followin markup:
<div class="search_div">
Search
<input type="text" />
</div>
For the wrapping DIV, the key is to explicitly position it relative:
.search_div {
position: relative;
border: 1px solid LightGrey;
width: 300px;
}
For the search button, make it absolute with a left value equal zero so it sticks to the left side.
.search_div A {
background: url(icon.gif) no-repeat scroll center center #FFFFFF;
border: 1px solid #CCCCCC;
width: 16px;
height: 16px;
left: 0;
position: absolute;
text-indent: -99999px;
}
As the anchor is absolute positioned, the input will be underneath. The trick is to pad the left side of the input to a value a bit higher than the anchor width, so the beginning of the text is not hidden underneath the anchor:
.search_div input {
box-sizing: border-box;
border: 0;
outline: 0;
line-height: 16px;
width: 100%;
padding-left: 20px;
padding-right: 3px;
}
DEMO
You can go further with this technique then by having the possibility through css to show the search icon to the left or to the right by applying an additionnal class to the .search_div container.
Stick left or right the search icon:
.search_div.iconleft a {
left: 0;
right: auto;
}
.search_div.iconright a {
left: auto;
right: 0;
}
Adjust the padding of the input also left or right:
.search_div.iconleft input {
padding-left: 20px;
padding-right: 3px;
}
.search_div.iconright input {
padding-right: 20px;
padding-left: 3px;
}
DEMO
The line position:fixed; is most likely the trouble spot because it makes the element fixed with respect to the browser window, which is why you are seeing the element shift when the browser resizes.
What you'll want to do is apply position: relative; to both the a anchor element and its parent element .search_div that you want the anchor to be relative to. Once the anchor is positioned relative to its containing element, you can use the css attributes "left, right, top, and bottom" to position it as needed.
I have a web page like this (codes). AS you can see, there is a content div . And a little div which fixed to page, and scrolling with it. I want to align it to content div's left. I t will be like this page. There is a small fixed box which containing social sharing buttons. It's aligned to contents left. I want to do like this.
Try this update of your fiddle. I think it does what you want, but there are much nicer solutions when the order of the two div's can be rearranged.
you need to modify your css for your sosyal-paylasim div to this (notice the last 2 elements):
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -490px;
}
Further explanation can be found here.
----------- EDIT TO MAKE DIV OUTSIDE CONTAINER ---------------
Per your comment, if you want it outside of the container, use this:
#sosyal-paylasim {
background-color: #F3F6FE;
border-color: #A5B2D0 #DBE4F3 #DBE4F3;
border-style: solid;
border-width: 2px 1px 1px;
box-shadow: 0 2px 3px #E2E2E2;
min-height: 150px;
overflow: hidden;
position: fixed;
top: 200px;
width: 64px;
z-index: 100;
left: 50%;
margin-left: -557px;
}
The trick is that you are centering the div with the left: 50%, and then pushing it back to the left by half the width of the main container (plus the width of the div(64px) plus both borders for the div(2px) plus the left border for the container (1px) to make it outside).