I have buttons and I added a hover effect to them to change their borders. It is affecting the layout of the menu.
element{
border-width:0px;
}
element:hover{
border:1px solid gray;
}
How can I do it without affecting the layout?
box-sizing: border-box will put the borders inside the box, should fix any sizing issues.
The border width changes the dimension of the element, so you probably need to take the additional pixel into account. Perhaps something like this will do the trick.
element{
border:1px solid transparent;
}
element:hover{
border:1px solid gray;
}
Related
Please check this example: http://jsfiddle.net/fFSZN/2/
You see how part of the img gets out of the div because of the border. The current width of the div (300px) is just set for the example, for real it would be 100% (so I can't hardcode values). My question is how to fit the image and its border into the div with CSS only?
You need to use box-sizing: border-box to make this work. Also, note how I set the image to max out at 100% of the containing element's width, while putting the height on auto to maintain proper aspect ratio.
http://jsfiddle.net/fFSZN/6/
More info on border-box from Paul Irish: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
First, for it to be a fluid image, give it max-width: 100%.
Then, instead of a 5px border on the image, give the containing div 5px padding and a black background.
div {
width:300px;
border:1px solid red;
padding:5px;
background: #000;
}
img {
max-width:100%;
display:block;
}
Demo
Remove the black border around the image. The border on the left side added extra space so it went out of the div's boundaries.
img { width:100%; display:block; }
Here's the updated jsfiddle: http://jsfiddle.net/fFSZN/4/
I have a div tag in which i have other controls. I have given a border to the div through css. I want the div tag to wrap itself around the controls and auto adjust its own size.
.divwrap
{
width: 60%;
height: 60%;
border: 1px solid #66CCFF;
vertical-align:middle;
margin-left:150px;
margin-right:300px;
}
Now in the above code I have fixed margins. So if I were to use the same style for a div tag on another page, it would be problem because the controls (inside the div) on another page may be more or less in no. I want the div tag to be like a rubber band that can auto adjust the size when wrapped around something (in this case, an html table with controls).
is this achievable? if yes, how??
if you want to make a wrapper keep these things in mind
try not to give it a static dimension.
don't give any width and height, as it is going to be a little larger than the content over which it is applied
give percentage value margin and padding:
try this:
.divwrap
{
padding:3%;
display:inline-block;
margin:3%;
border: 1px solid #66CCFF;
vertical-align:middle;
width:auto;
position:relative;
box-shadow: 10px 10px 5px #888888;
}
see this fiddle.
so now, no matter what the width and height of the child div is, this div will always wrap around it.
I'm trying to display an image centered on a page with a border that should have different paddings and margins on it's side. The images will be of different widhts and heights. So I need it to stretch accordingly.
I put this in the body to remove all margins:
body {
margin:0px 0px;
padding: 0px;
}
Then I used this to put the border around the image.
#imgcontainer {
position:relative;
text-align: center;
border-color: red;
border-width: 1px;
border-style: solid;
padding: 5px;
}
But then the border stretches all across the with of the page. Is there any way to prevent his? If I put:
position:relative;
The border snaps into place but then the image is not centered anymore.
If I put a container box around #imgcontainer it also snaps to the edge of the page.
I think it can be solved simply with some combo of position:relative/absolute?
This is what I'm talking about: http://kareldc.com/dislexicon/1-motion.html
Thx!
Hi now define according to #Fabrizo Calderan
css as like this
#imgcontainer {
display:inline-block;
vertical-align:top;
}
than your result is
If I well understood the problem you could assign display: inline-block to #imgcontainer, otherwise post a fiddle showing the issue
you can just apply the border effect to the img tag alone.
for example, just put
#imgcontainer img {
border-color: red;
border-width: 1px;
border-style: solid;
}
Here is an answer for you: fiddle example
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.
I am styling a asp:DropDownList element with custom CSS. I have set the height and am trying to get the text to appear in the middle of the element, rather than at the bottom. Vertical-align:middle does not seem to work, and if I add padding-bottom to push it up from the bottom, in IE there is an ugly gap between the arrow on the right of the drop-down and the border. This is my CSS currently:
.dropdowndiv
{
font-size:10pt;
margin-bottom:2px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
Try this:
.dropdowndiv
{
font-size:10pt;
padding-bottom:4px;
height:26px;
width:220px;
border:1px solid #d5d5d5;
text-transform:uppercase;
vertical-align:middle;
}
I changed the margin-bottom setting of 2px to a padding-bottom of 4px.
UPDATE:
Looked fine on mine, but you can add padding to any side to get it the way you wish.
Failing that you may want to look at Tag mapping - Lee Dumond suggested this on his blog in response to a similar problem I was experiencing at the time:
http://leedumond.com/blog/fixing-asp-net-server-control-rendering-issues-with-tag-mapping/
Adding a line height of 26px should align your text to the middle.