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.
Related
In PyQt5, I have been working on stylesheets. For my tabwidget stylesheet, I would like to use the border-right attribute to set a border between the tabs, but I would like to have a gap at the bottom and top of the border, so the border does not meet the top or bottom of the tabbar, like so:
I was wandering if there is a way to set the border height in the stylesheet, or possibly set the border style to dashed and then set the length of the dashes and gaps? Any method that achieves the border with gaps is appreciated, preferably by using stylesheets. Thanks.
EDIT:
Here is the stylesheet I currently have for the QTabWidget:
QTabBar:Tab {height: 27px; width: 220px; border-top-right-radius: 14px; border-top-left-radius: 14px; padding: 2px;}
QTabBar:Tab:Selected {background-color: white;}
QTabBar:Tab:!Selected {background-color: rgb(0,155,255); border-right: 1px solid black}
QTabBar:Tab:Hover:!Selected {background-color: rgb(240,240,240,92);}
QTabBar:Tab:First:Selected {margin-left: 0; margin-right: 0px;}
QTabBar:Tab:Last:Selected {margin-right: 0; margin-left: 0px;}
QTabBar:Tab:Only-One {margin: 0;}
QTabWidget:Tab-Bar: {left: 5px;}
QTabWidget:Pane {background-color: white; border: 1px solid white;
Yes, you can by using border-image.
This answer is CSS only related, but Qt's implementation follows the CSS specifications very well: https://stackoverflow.com/a/26858151
In short, you create a small square png image with the intended borders (in your case, you'll need to create only the right dashed part, the size depends on the dash pattern you need.
Unfortunately, when using rounded corners Qt "cuts" away half of the border width, so you'll see a small gap outside the border between two adjacent tabs.
I've created a small example of the image which will have a pattern of 6 pixels black and 5 transparent (I forgot to erase the top 2 pixels, you won't need them):
This is how it appears when zoomed in an image editor:
After that, this is what you'll need as a basis for your stylesheet:
QTabBar:Tab {
border-top-right-radius: 14px;
border-top-left-radius: 14px;
border-image: url(border.png) 2 repeat;
padding: 2px;
}
QTabBar:Tab:!Selected {
border-right: 2px;
}
The "2" in the border-image declaration is the border width within the image, the "repeat" is required to tell Qt that the border pattern has to be repeated and not stretched.
Also, remember to set the width of the border too, otherwise the image won't be shown.
And this is the result:
As you can see, the border size is only 1px, with another pixel left outside the tab. Since the issue comes from the usage of rounded corners, I'm afraid that the only solution would be to create a full border image that includes the rounded corners. I tried to play around with negative margins and css positioning, I think that it wouldn't work as expected and might even create issues against different platforms and Qt versions.
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 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;
}
On my nav bar there are two nav links with rounded borders, which when they are hovered, the border size doubles. I can't get it to work without the nav link moving on hover and the hover border doesn't match the area of the original border. I'm sure it has to do with padding but I've tried everything I can think of. See example code - http://jsfiddle.net/mGjs6/3/
You need to change
#signup a:hover
to
#signup:hover
and remove the width
#signup:hover {
border: solid 2px #55971e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Example: http://jsfiddle.net/jasongennaro/mGjs6/6/
Same with #clientarea
The issue with the not matching up was the one element #signup had the border but then you were changing the border of a child element (a) on hover.
EDIT
As per the comment
However when you hover, the text still moves to adjust for the
increased border. The text needs to remain fixed with only the border
changing.
That happens because the border size is increasing. That is what is pushing the text down a pixel (that's the increase in border size)
You can't fix that perfectly. Better to change the color of the border or the background.
Example 2: http://jsfiddle.net/jasongennaro/mGjs6/9/
(Hover over both to see the suggestions)
EDIT 3
I figured it out: decrease the padding by a pixel on the hover and it all works
#signup:hover {
border: solid 2px #55971e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:3px 4px; //ADD THIS
}
Example 3: http://jsfiddle.net/jasongennaro/mGjs6/10/
I have a table, in the Table header (TH) I have a background with CSS:
.gridView th
{
padding-top: 1px;
background-image: url('/Images/Design/New/mitte-tb_02.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
color: #FFFFFF;
border: 1px solid Gray;
text-align: center;
}
Now I will right an left from the border 1px space between border and background.
I try all, but it seems useless.
any ideas?
You can achieve this by setting border-collapse on the table to separate and the background colour of the table to Gray. Then set the border of the cells to the colour that you want between the gray border and the background image. See this example: http://jsfiddle.net/NMx5M/
You can put inner div in th element and set background for it with with margin: 0 1px;. An example (I replaced image with color for simplicity).
If I understand you correctly:
By the nature of "background", the image will fill as much of the space as the image size permits (especially if it repeats).
You could force a border using cellspacing or a white border for a visual impression.
Alternatively you will want to make the background image exactly 1px too small around the edges, and position the background absolutely to give the ~impression~ of the gap.
edit
you can perhaps do something like this
.foo {
background: url(bg.jpg) repeat-x;
display:block;
width:99%;
height:99%;
}
<th style="padding:1px;" scope="col"><span class="foo">Foo Bar</span></th>
b