http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
Related
I'd like to reduce the space between the bottom border of the input text field and the text so that they're closer together.
#a {
padding: 1px 3px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 0.8px solid #D3D3D3;
width: 300px;
}
<div style="text-align: center;"><input type="text" id="a" style="font-family: open-sans, sans-serif; font-style: normal; font-weight: 300; color: black; font-size: 16px; text-align: left;"></div>
Give #a a height of 10px (less than size of the font)
(Edit - 13 px would be best, consider visibility of characters like small case q,p,y.. etc)
Fiddle - https://jsfiddle.net/xpvt214o/735385/
#a
{
padding: 1px 3px;
background: transparent;
border: 0;
outline: 0;
border-bottom: 2px solid #D3D3D3;
width: 300px;
height: 10px;
}
If you change your padding to:
padding: 1px 3px 0px;
It'll save you a pixel of space at least. The first value is the top and bottom border by default, and the 2nd is right and left. A third value when specified refers to the bottom specifically, and a 4th refers to left specifically.
Alternatively, you could use a 1-pixel image with a repeat as a background instead of a border and position it 1px from the bottom so save another pixel or two, but I think sticking with a simple border is probably cleaner.
If you want to go the image route, here's how to do it:
create a 1px x 1px image in the color you want, and do something like this:
border-bottom: 0px;
background-image: url('insert-imageURL');
background-repeat: repeat-x;
background-position-y: -2px;
The repeat will turn it into a line, and the position will bump it up from the bottom edge of your field by however many pixels you like. Put in your image link inside the URL field.
You'll have full control over exactly where the line goes in relation to the field.
So, my website has a header and a div containing Revolution Slider immediately after it. I'm trying to add a box-shadow below the header - and above the slider. But it doesn't work, unless I also add margin-bottom to the header - but that renders the whole exercise moot.
This is the code:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px 10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
Could someone help me figure out what's causing this?
See the following questions:
Does css border-shadow add to an element's size
Is css box-shadow part of element's box model?
According to the box-shadow spec:
An outer box-shadow casts a shadow as if the border-box of the element were opaque. The shadow is drawn outside the border edge only
So if you don't want overlap, you'll have to add the margin youself
#header {
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
margin-bottom: 10px;
}
#slider {
position: relative;
}
<div id="header">Header</div>
<div id="slider">Slider</div>
Actually, the issue turned out to be related to z-index properties of the different divs. With some tweaking I managed to get it all sorted out without using any margin.
Anyway, thank you all for your time and help!
If you need as you say the box-shadow below the header only and above the slider you can use minus in the last number in box shadow as the following:
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
This will make the box-shadow appear only at the bottom.
Working example:
#header {
display:block;
min-height: 99px;
background: #FFFFFF;
border-top: 3px solid #8dddcd;
border-bottom: 1px solid #ecf0f1;
line-height: 99px;
box-shadow: 0 10px 10px -10px rgba(0,0,0,0.3);
}
#rev {
position: relative;
}
<div id="header"></div>
<div id="rev">the slider</div>
When you use the default rendering mode for box-shadow(outer shadow), you need to add a margin in that direction(10px on y-axis in your example) so the overflowed box content will be visible.
If you want to display your box shadow inside the header, just add the keyword inset to your declaration.
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
As shown above, can I give a radius to the top parts only and not to bottom or sometimes to bottom not to top?
And is there any idea to give border radius to one corner only?
Like border-radius:top-left top-right bottom-right bottom-left,
div{
width: 100px;
height: 30px;
background: black;
border-radius: 8px 8px 0 0
}
DEMO
Either use border-radius, such as:
border-radius: 5px 5px 5px 5px;
Or, for the top left border, you can be more specific with:
border-top-left-radius: 5px;
Here's the CSS for the rounded corners only on a div with a class of box:
.box {
border-radius: 5px 5px 0px 0px;
}
You may also find this helpful: http://css3generator.com/
Edit: Apparently you don't need the webkit prefix anymore!
UPDATE: Fixed with margin-bottom: 0px;
But somehow it still affect the text box size. Larger.
Then if I use outline instead of border, the border-radius will not work.
I have a problem with the these elements when one of them is clicked/focused,
it's affect the other element's position. It's because the border is larger than the normal size. So how to fix it?
For example: Click on the text area, it'll make the text input move away.
Note: I don't want to use box-shadow. No need to use position property actually.
HTML
<h3>Text Area</h3>
<textarea></textarea>
<br />
<h3>Input: Text</h3>
<input type="text" />
CSS
input{
background: #fff;
border: 1px solid #B7B7B7;
font-size: 15px;
margin: 2px 0;
padding: 5px 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
input:focus, textarea:focus {
border: 3px solid #507ad5;
margin-bottom: 0px;
}
textarea {
width: 300px;
height: 100px;
}
UPDATE: See and test it directly: http://jsfiddle.net/hedaru/dSgxr/6/
Here it is how it supposed to be: goo.gl/jAojK
Your CSS specifies the focused elements to be larger than the non-focused versions of the same elements.
Adding a border physically grows an element. Either add the same number of pixels of border to your element's base (with white colour) or use outline.
Here's my fix: http://jsfiddle.net/g105b/dSgxr/2/
It happens because of this:
input:focus, textarea:focus {
border: 2px solid #507ad5;
}
If you add another pixel to the border, the element is going to move.
You should keep the border at 1px and change its color.
input:focus, textarea:focus {
border: 1px solid #507ad5;
}
Update:
Use margins instead of position, it will fix it in the same place and the borders will "grow" around it. Here's an example.
CSS:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-top: 0px;
margin-left: -1px;
}
Another option (besides merely changing the border colour) is to add a margin that shrinks by the same amount that the border grows. Note that the margin must be large enough to overcome the margin collapse with adjacent elements.
Perhaps you can change the difference in margin. It seems like the margin-bottom of the elements right now is 2px, so when you change it to 0px on focus, you compensate for the growth of the element. Like so:
input:focus, textarea:focus {
border: 2px solid #507ad5;
margin-bottom: 0px;
}
Or just add "margin: 0px" on the focused one. Just make sure margin+border makes the same number on focused and unfocused.