I've tried doing the below but the result is not satisfactory. I want to cover the whole tab as a link but only the part in red becomes link. I want to expand the red border to the entire tab but don't know how to do it. Changing padding size results in the expansion of the tab along with the red border.
CSS
.tabed .tabs li a {
display: block;
padding: 0px 15px;
text-align: center;
border: solid #F00 2px;
Here is the JSFiddle:
https://jsfiddle.net/XingPing/j8zgrnev/
Related
when i adding border width greater than 1px white space is creating around image
here
https://front-end-mentor-works.github.io/e-com-product-page/
these images (below the main product image )in the boxes are not completely filled to those boxes .
i want to acheive ( the original design ) 👇
https://github.com/front-end-mentor-works/e-com-product-page/blob/main/design/desktop-design.jpg
i checked in developer console there is no margin and padding.
and i tried solution like setting font size: 0 , and making background similar to border color
font-size:0
making background simlilar to border color
display:block
4.vertical align:top
i have hosted my code on github pages
https://front-end-mentor-works.github.io/e-com-product-page/
repo link
https://github.com/front-end-mentor-works/e-com-product-page
How to remove this white space around image?
i have tried the solutions of this question
similar question Space between image and border
and other similar questions none of them is not removing the white space?
my code is
`
.product-thumbnail-box {
display: flex;
width: 80%;
gap: 6%;
margin-top: 2rem;
}
.product-thumbnail {
width: 20.6%;
border: none;
border-radius: 0.8rem;
&-active {
display: block;
border-radius: 8px;
border: 2px solid $Orange;
background: $Orange;
filter: opacity(0.3);
}
}
[1]: https://front-end-mentor-works.github.io/e-com-product-page/
Have you tried anything with the background-size property?
https://www.w3schools.com/cssref/css3_pr_background-size.php
If you haven't, I'd start with that and see what you can come up with.
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
In the site I'm making I'm adding a feature that adds bulletins, little staff notices, at the top of the home page. My idea was that I have a profile section floated to the left, a little dateline at the top showing (of course) the date, and some tags.
The problem arises with the dateline section. The dateline is to the right of the profile at the top of the bulletin. There is a border-bottom for the dateline, and this border stretches all the way across the bulletin, being drawn over the floated div.
I made an example fiddle here, you can see the problem. For some background info, all bulletins will be inside the div.bulletin_frame, the "main div" if you will. Within that there will be div.bulletin s. I have it configured so that they all have a solid border at the top except for the first one, so that there's a border between them all. (see the stylesheet)
Thanks!
CSS:
div.bulletin_profile
{
padding: 5px;
margin-right: 5px;
text-align: center;
float: left;
border-bottom: 1px gray solid;
border-right: 1px gray solid;
border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
padding: 5px;
font-family: monospace;
border-bottom: 1px gray solid;
}
div.bulletin_body
{
padding: 5px;
}
The borders aren't drawn over the div, they're behind it. The divider simply has no background.
To change this, simply add a background to .bulletin_profile:
div.bulletin_profile {
background:rgb(240,240,240);
}
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.