I am trying to setup something that looks like this with the arrow that is centered vertically:
CSS:
#arrowdiv {
width:282px;
height:61px;
background-image:url('http://i.imgur.com/RV80I.png');
margin: 0 auto;
}
#optin {
height:110px;
width:960px;
background-color:#FFFFBF;
border:1px solid black;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
margin: 0 auto;
}
#leftdiv {
width:340px;
height:108px;
}
HTML:
<div id="optin">
<div id="leftdiv">
<div id="arrowdiv"></div>
</div>
</div>
http://jsfiddle.net/NzMLd/1/
Right now, it is only centered horizontally, as you can see in my jsFiddle.
Use the background- settings:
#arrowdiv {
width:282px;
height:61px;
background-image:url(http://i.imgur.com/RV80I.png);
background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;
margin: 0 auto;
}
http://jsfiddle.net/userdude/NzMLd/3/
Since you have fixed height of different DIVs, you can add this to your arrow:
margin-top:23px;
where 23=(108-61)/2
And yes, an alternative method is to use this
background-position: 0 50%;
background-repeat: no-repeat;
height: 100%;
Tons of ways to do this... Your fiddle isn't working for me for some reason, but try this as your leftdiv CSS:
#leftdiv {
width:340px;
height:108px;
display: table-cell;
vertical-align: middle;
}
Related
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
I have an box which is an image and I have text inside the image which will be geenrated dynamically.
Please look at the attached screenshot for more information.
How do I make sure that the image stretches when there is more text ?
.my-community-box{
background: url('/assets/my-community-box.png') no-repeat !important;
background-size: 100%;
width: 287px;
min-height: 474px;
float: right;
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
ul{
width: 250px;
margin: 0 0 9px 0;
li{
}
}
a{
color: #darker-green;
}
a:hover{
text-decoration: none;
color: #light-green;
}
}
Why not use a border?
.my-community-box{
background: #F3F3F2;
width: 287px;
min-height: 474px;
float: right;
border: 3px solid #C5C3C3;
}
.my-community-box-wrap{
border-left: 2px solid #C2E2A0;
border-right: 2px solid #C2E2A0;
float: right;
}
Demo: http://jsfiddle.net/AWXHr/
you will need to background-repeat: repeat-y; the image, but will have to change it. as far as it seems, it is one single image - you will have to crop it to have the top border and the "body" of the image will be the part that you want to vertical repeat.
alternatively, due to the simple design, you could just use css borders
EDIT
also, as a few comments suggested, you should show us some code and not just an image, that would help a lot!
Use css border instead of image
div{
border:#333 solid 6px; border-radius:0 0 6px 6px;
box-shadow: 0px 0px 0px 2pt green;
height:auto;
width:200px;
background:#c1c1c1
}
Demo http://jsfiddle.net/wYUFD/12/
Demo
Hi now used to background-size:cover; or max-width
as like this
p{
max-width:200px;
border:solid 10px red;
background:url('http://www.gravatar.com/avatar/eb71f65106648cf6618b10423e8b0451?s=32&d=identicon&r=PG') no-repeat;
background-size:cover;
color:#fff;
}
Demo
I hope this may be helpful to you
.my-community-details{
background-color: #mild-gray;
margin: 20px 10px 10px 10px;
padding: 5px;
max-width: //set what depends up on your image width
max-height: //set what depends up on your image height
overflow-y: auto;
I have an image inside a div.. the div has a background picture..and I am trying to move the image so that it is centered and have 3px margin from each side.
My css:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
}
#user_avatar_background image{
position:relative;
margin:3px 3px 3px 3px;
}
My html:
<div id="user_avatar_background">
<image src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
The picture wont move.. no matter how much margin, I give it..
You are using an image tag which is not a valid html tag. Try using img.
CSS:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
}
#user_avatar_background img{
position:relative;
margin:3px 3px 3px 3px;
}
HTML:
<div id="user_avatar_background">
<img src="Images/user_pics/cypher.jpg" width="150px" height="150px" />
</div>
Similarly, you can remove the margin from the image and apply the padding to the div:
#user_avatar_background
{
float:left;
margin:5px 15px 5px 0px;
margin-right: 10px;
width:200px;
height:200px;
background-image: url('image_files/avatar-background.gif');
background-repeat: no-repeat;
overflow: hidden;
padding: 3px;
}
#user_avatar_background image{
position:relative;
}
I am trying to create a CSS theme switcher button like below. The top image shows what I have so far and the bottom image shows what I am trying to create.
I am not the best at this stuff I am more of a back-end coder. I could really use some help.
I have a live demo of the code here http://dabblet.com/gist/2230656
Just looking at what I have and the goal image, some differences.
I need to add a gradient
The border is not right on mine
Radius is a little off
Possibly some other stuff?
Also here is the code...it can be changed anyway to improve this, the naming and stuff could be improved I am sure but I can use any help I can get.
HTML
<div class="switch-wrapper">
<div class="switcher left selected">
<span id="left">....</span>
</div>
<div class="switcher right">
<span id="right">....</span>
</div>
</div>
CSS
/* begin button styles */
.switch-wrapper{
width:400px;
margin:220px;
}
.switcher {
background:#507190;
display: inline-block;
max-width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
position:relative;
}
#left, #right{
width:17px;
height:11px;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
margin-top:-5px;
margin-left:-8px;
font: 0/0 a;
}
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px 0px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
.left, .right{
width: 30px; height: 25px;
border: 1px solid #3C5D7E;
}
.left{
border-radius: 6px 0px 0px 6px;
}
.right{
border-radius: 0 6px 6px 0;
margin: 0 0 0 -6px
}
.switcher:hover,
.selected {
background: #27394b;
box-shadow: -1px 1px 0px rgba(255,255,255,.4),
inset 0 4px 5px rgba(0,0,0,.6),
inset 0 1px 2px rgba(0,0,0,.6);
}
This button can be implemented in pure CSS, without any external images:
http://jsfiddle.net/canassa/weABj/4/
Beware that using a pure CSS has a few drawbacks:
IE10
Everything should render perfectly.
IE9
Gradients stops working.
IE8
Border-radius stops working.
IE7
Hell breaks loose
You could do a combination of border-radius rules for each browser. However, I find this to be way too tedious for small images like that. Do a .png or .jpg sprite, then set the background-position on :hover and :active
For example:
#right { background: url() top right; }
#right:hover { background-position: center right; }
#right:active { background-position: bottom right; }
#left { background: url() top left; }
#left:hover { background-position: center left; }
#left:active { background-position: bottom left; }
Okay, here is some modification done with css.
dabblet.com/gist/2231617
Replace...
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
with...
#left{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: -0px -19px;
}
#right{
background-image: url(http://www.codedevelopr.com/assets/images/switcher.png);
background-position: 0px 0px;
}
See DEMO
I need to create a solid color inset border. This is the bit of CSS I'm using:
border: 10px inset rgba(51,153,0,0.65);
Unfortunately that creates a 3D ridged border (ignore the squares and dark description box)
You could use box-shadow, possibly:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 10px #0f0;
}
<div id="something"></div>
This has the advantage that it will overlay the background-image of the div, but it is, of course, blurred (as you'd expect from the box-shadow property). To build up the density of the shadow you can add additional shadows of course:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 20px #0f0, inset 0 0 20px #0f0, inset 0 0 20px #0f0;
}
<div id="something"></div>
Edited because I realised that I'm an idiot, and forgot to offer the simplest solution first, which is using an otherwise-empty child element to apply the borders over the background:
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
padding: 0;
position: relative;
}
#something div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(0, 255, 0, 0.6);
}
<div id="something">
<div></div>
</div>
Edited after #CoryDanielson's comment, below:
jsfiddle.net/dPcDu/2 you can add a 4th px parameter for the box-shadow that does the spread and will more easily reflect his images.
#something {
background: transparent url(https://i.stack.imgur.com/RL5UH.png) 50% 50% no-repeat;
min-width: 300px;
min-height: 300px;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
<div id="something"></div>
I would recomnend using box-sizing.
*{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}
#bar{
border: 10px solid green;
}
To produce a border inset within an element the only solution I've found (and I've tried all the suggestions in this thread to no avail) is to use a pseudo-element such as :before
E.g.
.has-inset-border:before {
content: " "; /* to ensure it displays */
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border: 4px dashed red;
pointer-events: none; /* user can't click on it */
}
The box-sizing property won't work, as the border always ends up outside everything.
The box-shadow options has the dual disadvantages of not really working and not being supported as widely (and costing more CPU cycles to render, if you care).
It's an old trick, but I still find the easiest way to do this is to use outline-offset with a negative value (example below uses -6px). Here's a fiddle of it—I've made the outer border red and the outline white to differentiate the two:
.outline-offset {
width:300px;
height:200px;
background:#333c4b;
border:2px solid red;
outline:2px #fff solid;
outline-offset:-6px;
}
<div class="outline-offset"></div>
If you want to make sure the border is on the inside of your element, you can use
box-sizing:border-box;
this will place the following border on the inside of the element:
border: 10px solid black;
(similar result you'd get using the additonal parameter inset on box-shadow, but instead this one is for the real border and you can still use your shadow for something else.)
Note to another answer above: as soon as you use any inset on box-shadow of a certain element, you are limited to a maximum of 2 box-shadows on that element and would require a wrapper div for further shadowing.
Both solutions should as well get you rid of the undesired 3D effects.
Also note both solutions are stackable (see the example I've added in 2018)
.example-border {
width:100px;
height:100px;
border:40px solid blue;
box-sizing:border-box;
float:left;
}
.example-shadow {
width:100px;
height:100px;
float:left;
margin-left:20px;
box-shadow:0 0 0 40px green inset;
}
.example-combined {
width:100px;
height:100px;
float:left;
margin-left:20px;
border:20px solid orange;
box-sizing:border-box;
box-shadow:0 0 0 20px red inset;
}
<div class="example-border"></div>
<div class="example-shadow"></div>
<div class="example-combined"></div>
I don't know what you are comparing to.
But a super simple way to have a border look inset when compared to other non-bordered items is to add a border: ?px solid transparent; to whatever items do not have a border.
It will make the bordered item look inset.
http://jsfiddle.net/cmunns/cgrtd/
Simple SCSS solution with pseudo-elements
Live demo: https://codepen.io/vlasterx/pen/xaMgag
// Change border size here
$border-width: 5px;
.element-with-border {
display: flex;
height: 100px;
width: 100%;
position: relative;
background-color: #f2f2f2;
box-sizing: border-box;
// Use pseudo-element to create inset border
&:before {
position: absolute;
content: ' ';
display: flex;
border: $border-width solid black;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: $border-width solid black;
// Important: We must deduct border size from width and height
width: calc(100% - $border-width);
height: calc(100% - $border-width);
}
}
<div class="element-with-border">
Lorem ipsum dolor sit amet
</div>
You can do this:
.thing {
border: 2px solid transparent;
}
.thing:hover {
border: 2px solid green;
}
If box-sizing is not an option, another way to do this is just to make it a child of the sized element.
Demo
CSS
.box {
width: 100px;
height: 100px;
display: inline-block;
margin-right: 5px;
}
.border {
border: 1px solid;
display: block;
}
.medium { border-width: 10px; }
.large { border-width: 25px; }
HTML
<div class="box">
<div class="border small">A</div>
</div>
<div class="box">
<div class="border medium">B</div>
</div>
<div class="box">
<div class="border large">C</div>
</div>
I know this is three years old, but thought it might be helpful to someone.
The concept is to use the :after (or :before) selector to position a border within the parent element.
.container{
position:relative; /*Position must be set to something*/
}
.container:after{
position:relative;
top: 0;
content:"";
left:0;
height: 100%; /*Set pixel height and width if not defined in parent element*/
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:1px solid #000; /*set your border style*/
}
You may use background-clip: border-box;
Example:
.example {
padding: 2em;
border: 10px solid rgba(51,153,0,0.65);
background-clip: border-box;
background-color: yellow;
}
<div class="example">Example with background-clip: border-box;</div>
So I was trying to have a border appear on hover but it moved the entire bottom bar of the main menu which didn't look all that good I fixed it with the following:
#top-menu .menu-item a:hover {
border-bottom:4px solid #ec1c24;
padding-bottom:14px !important;
}
#top-menu .menu-item a {
padding-bottom:18px !important;
}
I hope this will help someone out there.
Simpler + better | img tag | z-index | link image | "alt" attribute
I figured out a method where you do not need to use the image as a background image but use the img HTML tag inside the div, and using z-index of the div as a negative value.
Advantages:
The image can now become a link to a lightbox or to another page
The img:hover style can now change image itself, for example:
black/white to color, low to high opacity, and much more.
Animations of image are possible The image is more accessible because
of the alt tag you can use.
For SEO the alt tag is important for keywords
#borders {
margin: 10px auto;
width: 300px;
height: 300px;
position:relative;
box-shadow: inset 0 0 0 10px rgba(0, 255, 0, 0.5);
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right: 0;
z-index: -1;
}
<div id="borders">
<img src="https://i.stack.imgur.com/RL5UH.png">
</div>