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).
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.
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
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 have a content div with a ragged border (using a border-image) and I place another div each below the content div left and right to hold an image. This image is supposed to have a link. While the image shows nicely through the border the link area gets hidden by it. Given that my ragged border is rather wide (almost 100px), this feels quite confusing. Therefore I would like to "float" the image below the border and the actual link area above so that the link is clickable as well were the image is under the border or visible through the border.
Despite not having the background-image uploaded the effect becomes visible since the border is wide black. The structure includes a minimal header, which is not vital to the problem but is part of the root structure.
Another problem is that the link area expands to more than the wrapped image in height, however this is a minor issue.
http://jsfiddle.net/hc3jrkku/
Basestructure:
<header>
<nav>
<a href='?p=faq#faq' id='faq'>
FAQ
</a>
</nav>
</header>
<div class='leftSide'>
<a href="#anchor" class="bgImage"><img src="img/some.png" style="
position: relative;
z-index: -1;
opacity: .99;
border: 1px solid red;
width: 150px;
height: 200px;
background-color: red,
"></a>
</div>
<div class='rightSide'>{$right}</div>
<main>
<div class='container'>
{$content}
</div>
</main>
</body>
CSS:
* {
box-sizing: border-box
}
body {
margin: 0;
}
.leftSide{
position: fixed;
z-index: 0;
top: 20px;
right: 50%;
transform: translateX(-50%);
width: 808px;
height: 100%;
display: flex;
justify-content: flex-end;
margin-right:-93px;
padding: 15px 93px 90px 0;
}
.rightSide{
position: fixed;
z-index: 0;
top: 20px;
left: 50%;
transform: translateX(50%);
width: 808px;
height: 100%;
margin-left:-93px;
padding: 15px 0 90px 93px;
}
a.bgImage {
z-index:900;
opacity:.99;
border:2px dashed blue
}
.rightSide .bgImage {
margin-left: -93px;
}
.leftSide .bgImage {
margin-right: -93px;
}
main {
width: 808px;
min-height: 400px;
margin: 20px auto 0;
position: relative;
z-index: 50;
border-style: solid;
border-width: 0px 93px 127px 93px;
border-image: url(img/paperedge.png) 0 93 127 93 fill round;
padding-top:10px;
}
header {
height: 20px;
background: #ffffff url(img/header_bg.png) repeat-x bottom;
border-bottom: 1px solid #000000;
position: fixed;
width: 100%;
top: 0;
z-index: 100
}
nav {
display: flex;
justify-content: center;
}
Having read http://philipwalton.com/articles/what-no-one-told-you-about-z-index/, I tried creating new context(s) as well, and stripping the divs containing left/right background image of the z-index, However my current code depends on the transform/position thus creating a new context for the parent element either way. Is the sandwich stacking (some children above other parts of the page/others below) possible anyways?
If you want the image to be behind the border (or your content div), you can add this to the CSS of your div in the front:
main {
pointer-events: none;
}
This will kill the events on your div and make the behind events visible in the front: DEMO
You can also search more and find these similar topics:
HTML "overlay" which allows clicks to fall through to elements behind it
HTML/CSS: Make a div "invisible" to clicks?
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.