I have an issue where you can clearly see the parent in the top right and top left corners of the child.
I have tried with using overflow: hidden; on parent as well as using border-radius on the child.
The issue is a bit hard to explain but you can clearly see the issue on the fiddle.
https://jsfiddle.net/2Lccaf0u/
edit: Here is an image showing the issue as well (using chrome)
An easy fix would be to make the outer element have a large radius than the inner for only the top portion
body {
background: #000;
}
.outer, .outer2 {
width: 200px;
height: 100px;
border-radius: 15px 15px 5px 5px;
background: #fff;
margin-bottom: 20px;
}
.inner, .inner2 {
background: #111;
width: 100%;
height: 50px;
border-radius: 5px;
}
Edit: It's happening because that is how the browser renders it. Not all browsers will produce the same result.
Related
I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.
I want a 2px border that's positioned in the center. So it shows 1px outside and 1px inside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadow of some kind but I'm horrendous at shadows in CSS.
There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.
Thanks.
There's a work around, since border represents outer stroke for you, you can make use of outline css property with outline-offset set to negative value to have the inner 1px stroke( 1 ) JS Fiddle
body {
padding-top: 10px;
}
#test {
width: 250px;
height: 200px;
background-color: orange;
margin: 0 auto;
border: 1px navy solid; /* outer stroke */
outline: 1px navy solid; /* inner stroke */
outline-offset: -2px; /* negative border width + outline width */
}
<div id="test"></div>
( 1 ) As the above fiddle might not demonstrate the explanation good enough, here's the same example with two colored strokes and 4px for each stroke instead of 1px Demo Fiddle
Resources:
http://caniuse.com/#search=outline
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
https://davidwalsh.name/outline-offset
Perhaps with a suitable sized absolutely positioned pseudo-element?
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em auto;
position: relative;
}
div:after {
content: '';
position: absolute;
top:-6px;
left: -6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border:12px solid rgba(255,0,0,0.5)
}
<div></div>
You could nudge the container so that it would look like it's an inner border. For example, if you have have a 2px left border and want it to appear as an inner border, you can just offset the whole container to the right, like this:
position: relative;
left: 2px;
You might have to do other corrections, such as reducing the width of the container by 2px.
I'm working on the unbounce landing page platform. Overall, it's really awesome and makes A/B testing pretty easy. It's more or less just drag and drop, but you're able to add css, html, javascript, etc.
Anyway, I'm working on creating a fixed signup area on the bottom of the screen (should boost conversions), but I'm having some troubles. The signup box is created within the wysiwyg dashboard, and from what I see it just builds the CSS for you, as you move sliders, change colors and such.
I'm able to make the entire signup area float right to the bottom, but I can't get the signup box to stay centered. I can use margins and positioning, but not the align: center function.
I've tried doing margin-left: auto; margin-right: auto as well as text-align: center; but it does absolutely nothing!
When changing the size of the screen, it just will not stay centered. But here's the kicker; the text has no problem centering with just width: 100%.. The signup box doesn't seem to respect any wrapper and I'm thinking this might be the problem.
This is all the CSS I'm using to create this fixed section:
#lp-pom-box-214 {
top: auto !important;
display:block;
position:fixed;
margin-left: auto;
margin-right: auto;
bottom:0px;
width: 100%;
align: center;
}
#lp-pom-form-51 {
top: auto !important;
display:block;
width: 100%;
position:fixed;
bottom: 25px;
margin-left: 26%;
}
#lp-pom-text-211 {
top: auto !important;
display:block;
position:fixed;
bottom:75px;
width: 100%;
}
Thanks a TON in advance!! This client is really good to me, so I want to do a good job for them. I'm not a great coder, but I'm very good at marketing so feel free to give me a shout if you need help in that arena :) That's the best way I know how to give back to whoever helps me out (or anyone else in the community for that matter).
Thanks again.
You can't adjust the position of a fixed positioned element in this way.
A fixed position element is positioned relative to the viewport, or the browser window. The viewport doesn't change when the window is scrolled, so a fixed positioned element will do exactly as the name implies and remain fixed in it's assigned position. To position a fixed element you use the properties top, right, bottom, and left
If you want to keep it as a fixed positioned element you can vertically and horizontally center it on the page by setting top and left to 50% so as the left-top corner of the container is centered within the page, you can then use margin-top and margin-left with negative values to compensate for half of the width and height of the element to achieve true center within the center of your container.
Something like this?
if yes check this code
css
.fixed-bottom {
position:fixed;
left:0;
bottom:0;
padding:10px 0;
background:#CCC;
width:100%;
}
.fixed-bottom h1 {
text-align:center;
}
#lp-pom-button-52 {
display: block;
z-index: 61;
width: 175px;
height: 54px;
line-height: 54px;
behavior: url(/PIE.htc);
border-radius: 8px;
background-color: #ff0000;
background: -webkit-linear-gradient(#ff0000,#e60000);
background: -moz-linear-gradient(#ff0000,#e60000);
background: -ms-linear-gradient(#ff0000,#e60000);
background: -o-linear-gradient(#ff0000,#e60000);
background: linear-gradient(#ff0000,#e60000);
box-shadow: inset 0px 1px 0px #ff4c4c,inset 0 -1px 2px #b30000;
text-shadow: 1px 1px #5c0000;
-pie-background: linear-gradient(#ff0000,#e60000);
color: #fff;
border-style: solid;
border-width: 3px;
border-color: #333333;
font-size: 24px;
font-weight: bold;
font-family: arial;
text-align: center;
background-repeat: no-repeat;
float:left;
margin:0 0 0 10px;
}
#lp-pom-form-51 .lp-pom-form-field input[type=text] {
border-style: solid;
border-width: 10px;
border-color: #002c77;
}
a {
color: #ff0000;
text-decoration: none;
}
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.