I'm on Chrome (38.0.2125.101) and have something that looks like this:
The css is:
.if-container{
border: 1px solid black;
border-radius: 12px;
width: 400px;
}
.social-row{
background-color: yellow;
padding: 5px 20px 10px 10px;
}
How would I make the css of the embedded element be clipped to the container (or fix it)?
The .social-row <div> is overflowing outside of its parent container. Simply add this to your stylesheet:
.if-container {
overflow: hidden;
}
Related
Here's my CSS:
div {
border: 1px solid
font-size: 30px
color: red
width: fit-content
height: fit-content
}
Here's my HTML:
<div>⮝</div>
Here's how it shows up in the browser:
Here it is on JS Fiddle:
https://jsfiddle.net/f9wkb4qp/
I'd like to remove the gap between the div border and the font. eg. I'd like to make the result look more like this:
Any ideas as to how I might achieve this effect? Or is this even possible? Like if the white space is actually part of the character then I guess it might not be possible?
Try to use line-height.
div {
border: 1px solid;
font-size: 30px;
color: red;
width: fit-content;
line-height: 0.9;
}
<div>⮝</div>
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
Here is the jsfiddle for reference: http://jsfiddle.net/4devvjyv/1/
I'm trying to get the "Section" box to go above the gray line so that it looks like the "Section" box is centered around the line. But negative margins are not pushing the box above the line.
.divider {
margin-top: 6px;
border-top: 2px solid gray;
font-size: 10px;
position: relative;
}
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin-top: -200px;
}
The divider is the line, and the divider-text is the "Section" box. I put a margin-top of 6px for the divider just so I wouldn't mess up the spacing between the two content because I would like the "Section" box to be 6px above the line and 8px below the line.
Does anyone know why it's not working? I tried playing around with a negative left margin and the "Section" box behaved as it should.
Updated your jsfiddle
Use top: -20px instead of margin-top:-200px. I've use -20px because -200px will float way high and cannot be seen.
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
top: -20px;
}
another solution would be
.divider-text {
position: absolute;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin: -20px; // making it center.
}
releasing the element from it's parent element (position: absolute) will make the element float, does following the negative margin.
The element is still under its parent element so any floating styles will not go beyond its parent element unless you free it by, float, position:absolute, or display:block. But display block does not actually release the element from its parent but moves it to the next. -- need anyone's input on this though.
I have 4 float: left div containers like so...
I want to display a border when a div is hovered over. However, when I hover over the first or second div, it pushes the bottom div to the left...
I tried adding margin and padding to the div's, but nothing seemed to work.
.div
{
width: 33%;
}
.div:hover
{
boder: solid 1px #EEE;
}
Use a backround coloured or transparent border on the initial state and the size of the box won't change.
.div {
width: 32%; // (33% + 1px border) * 3 = likely more than the width of the container
border: solid 1px transparent;
}
.div:hover {
boder: solid 1px #EEE;
}
One solution is to have a border all of the time, but make it the same color as the background when not hovered.
For example:
.div
{
width: 33%;
border: solid 1px #FFF;
}
.div:hover
{
border: solid 1px #EEE;
}
EDIT: Alternatively if an invisible border won't work (gradient background, etc.) you can add 1px padding when not hovered and make it 0px padding when hovered.
For example:
.div
{
width: 33%;
padding: 1px;
}
.div:hover
{
border: solid 1px #EEE;
padding: 0;
}