I have a sidebar block using bootstrap with two image blocks, one on top of the other, and my client wants a glowing red border around the blocks. I have a black background and the border for the glow. Here is the problem, when I resize the browser to a tablet size, the black background and border are wider than the image and the image is not centered. I want the border and glow to be 10px around the image and centered in the screen, not to the left. If I use a transparent background the image is to the left and the red border spans the whole screen and once again looks bad. Here are two screenshots:
I want the images to resize and be next to each other like other responsive templates with the glow and nothing I try is working. This is all probably pretty simple but I am lost. I am learning but this is driving me crazy. I have applied some additional css through c5 to give a glow to the images in the block. This is the code that comes up when I use Chrome dev tools:
element.style { }
#blockStyle167Sidebar40 {
background-repeat: no-repeat;
background-color: #000000;
-webkit-box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
box-shadow: 0 0 6px 4px rgba(255,0,0,.7);
padding: 10px;
}
.pic {
border: 1px solid #000000;
height: 245px;
width: 370px;
overflow: hidden;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
user agent stylesheetdiv {
display: block;
}
Inherited from div#sidebar-wrap.span4.sidebar-wrap.sidebar.color-content.pad
#main-content .color-content {
color: #FFFFFF;
}
Inherited from div.row-fluid.has-sidebar
#page .row-fluid {
color: #ffffff;
I am sorry this is so long but my site is in maintenance mode and I don't know how to link the page. I could give someone acces so the can look at it.
Thanks for any help.
Essentially what you need to do is create a transparent border of 10px with a red box shadow.
img {
border: 10px solid transparent;
box-shadow: 0px 0px 15px 0px rgba(255,0,0,1);
}
Then set each of the images to the width % you want.
See this jsfiddle http://jsfiddle.net/TZh2Y/
Related
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.
Below is the the CSS class am using.It's working fine in IE with border-radius and padding .But same is not working in Mozilla and other browsers.Stuck from two days can any one help me out?
.node-tl-img-with-circle {
/* become base of .circle::after */
/* position: relative;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* width and height are depend on the icon size */
width: 40px;
height: 40px;
/* color of circle */
/*background-color: #F4B272;*/
/* make div circle */
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
padding:8px;
/*margin: 5px;*/
/* The outermost stroke is as same as background color */
/*border: 4px solid #FFF;*
/*box-shadow:0 0 0 2px #F4B272;
-moz-box-shadow: 0 0 0 2px #F4B272;
-webkit-box-shadow:0 0 0 2px #F4B272; */
}
First you could provide a good sample case next time in codepen fiddle or something.
Anyway border-radious should work for all browsers from:
+IE 9
+Firefox 4
+Chrome 5
+Safari 7
+Opera 11.5
see in caniuse.com
HTML
<div class="sample"></div>
CSS
.sample {
box-sizing : border-box;
width : 40px;
height : 40px;
padding : 8px;
border : 4px solid red;
border-radius : 50%;
}
This is working, so we cannot help you more if you don't provide us a better sample, maybe other chunk of code is crashing this part.
I have a problem with padding in HTML5. I'm using this code:
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;}
I use inputs in div, which has padding 10px.
And when I'm testing code the width of input is not right, look at this pic:
How to solve this problem? I want to have padding 10px in any window size.
Add this CSS :
input {
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
This property will include padding and border to the width/height of inputs so they won't overflow anymore.
Use:
box-sizing:border-box;
-moz-box-sizing:border-box;
in your css file.
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
http://fiddle.jshell.net/yTM9U/2/
You need to set the CSS style margin-right for the input.
input {
margin-right: 10px;
}
Padding is a cushioning/space inside the element. To push an element away from
surrounding elements internal cushioning/padding-space cannot help. Margin needs
to be set for those purposes...
But in your case, r/l to the form width, inputs are already very wide (100%). So, you need to decrease the width of the inputs. Try
input {
width: 90%;
max-width: 90%;
}
I'm trying to style a border so that it consist of a
1px green line below a 1px white line
hr{
height: 1px;
border: 0;
background-color: #89a889;
border-bottom: 1px solid #fafafa;
}
this works in webkit, but firefox seems to include the border in the total height of the line. This makes the bottom border cover the green line. Whan can I do about this?
hr {
height: 0;
border: 0;
border-top: 1px solid #89a889;
border-bottom: 1px solid #fafafa;
}
Use two borders.
Demo
Alternatively, if you really want it to work with a background color, use box-sizing: content-box to get Firefox to display an hr with the normal CSS box model.
You may want to include other vendor prefixes.
hr {
height: 1px;
border: 0;
background-color: red;
border-bottom: 1px solid blue;
-moz-box-sizing: content-box;
}
Demo
You can set -moz-box-sizing: content-box; box-sizing: content-box;. The UA stylesheet sets it to border-box sizing.
I am new to CSS and was wondering how to scale a background image for the header of an iPhone WebApp.
div#header {
background: rgb(2,100,161) url(../images/header-logo.jpg) repeat-x top;
border-top: 1px solid rgb(205,213,223);
border-bottom: 1px solid rgb(46,55,68);
padding: 10px;
margin: 0 0 0 -10px;
min-height: 85px;
-webkit-box-sizing: border-box;
}
Here's a good resource for you:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
CSS3 has the background-size property.
You can use that to scale your image to the size you desire. :-)