I am making a site in Bootstrap and am unable to achieve making a simple menu.
I want to make something like this:
So far I have achieved this:
I tried but cant make my CSS to work properly.
Here is my CSS Code:
.navbar-nav li a {
height: 90px;
line-height: 60px;
margin: 0 10px;
background-color: #f1f1f1;
font-size: 1.1em;
border-radius: 10px;
}
Any help would be appreciated.
Check this fiddle https://jsfiddle.net/gward90/h8cnbL5w/1/
To adjust the look of your buttons play with the padding of .nav>li>a Thats a BS default css class. The default padding value is set to padding: 10px 15px
You also need to remove the height from your .navbar-nav li a class that is whats making your buttons so large you also don't need the line-height.
Related
I am pretty new to Dash/Plotly and I am trying to style the timescale buttons with CSS but it seems that none of the classes is reacting to the styles I apply. I have something similar to this:
Plotly Time Series Chart
https://plotly.com/python/time-series/
and my goal is to make the buttons bigger and a bit darker with rounded corners. Normally I would do something like that:
button {
margin-left: 15px;
margin-right: 15px;
height: 45px;
width: 70px;
border-radius: 10%;
color: white;
font-weight: bold;
background-color: #80848d;
}
but in this case it seems that buttons have a tag and a selector-rect class that are pre-styled.
Has anyone managed to solve the problem so far?
You can override your styles by using the same class that pre-styled and add !important for your styles like that:
.class-pre-styled
{
margin-left: 15px!important;
margin-right: 15px!important;
}
I hope that helps you!
I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(
Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also a fiddle
I'm working on a project and now have some problem!!
I build a site basically generate content though javascript.
Here is my project site: http://www.makinoworks.com/makinogames/kancolle/
I use [jQuery]+[MixItUp]+[papaparse] to generate content sort in some rules
And also use [BootStrap] to show up Modal/ListGroup etc..
But when website finished, it doesn't display content.
It's strange that HTML current written but nothing display.
Thanks for helping.
If need any more information please tell me!
Add a font-size to the class .list-group-item or .list-group-item span
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
font-size: 10pt;
}
Long time!! :)
I would appreciate if someone can help me with this, it's a jquery menu that I've been using for my website, I would like to know if it's possible to:
Menu Bar at Jsfiddle
Put some vertical line separator on each option of the menu to separate them
without being affected by the hover effect like the text option.
add to the menu on the corner end on the right a small ''social media'' icons (img)
each one directing to a specific link
just like the text menu. The menu fits the website content (940px width)
and has extra space but in the fiddle example it doesn't show.
also important> is there a way to add a bigger text on the menu
and make each menu word option bigger by stretching it? Looks pretty small.Horizontally I mean, vertically it stays the same.
It's important that the underline hover and the rest appears the same just like it's shown in jsfiddle without being affected by these possible changes.
I would deeply appreciate it!!! :)
There are a few CSS and markup changes you can make to achieve what you'd like
#example-one { margin: 0 auto; list-style: none; position: relative; width: 940px; font-family:Arial; }
#example-one li a { color: #bbb; font-size: 14px; letter-spacing:2px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; border-right: 1px solid white; }
#example-one li:first-child a { border-left:1px solid white; }
On the first line, you can add your font-family to change the font used in your menu.
On the second line, I added a border-right, and set letter-spacing:2px.
I added the third line to give a border-left to only the first item (so that you get the full appearance of separators).
Also I added this item to your list that you could easily insert a social media icon into:
<li style="float:right;"><a style="border:none;" href="#">Social Icon</a></li>
You can push it to the right side of the menu using float:right.
Here is an updated fiddle.
I'm trying to figure out how to decrease the size of the buttons on the kendoSlider (for that matter, the slider is also too large).
Their documentation doesn't really make any mention of it.
Why do I want to do this? I've recently added it to my footer and the buttons are so big that it's bumped up the size of my footer entirely. I'd rather decrease the button size instead of completely changing the size of my footer.
I would assume it's something with the CSS for the slider, but I haven't had any luck with that so far.
Here's an image to demonstrate what I mean:
if the Buttons to big, why just hide them?
With
showButtons: false
in the configuration.
The size of the Buttons you can change via css. For example:
.k-slider .k-button, .k-grid .k-slider .k-button {
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
border-radius: 13px;
/* new */
border: 1px solid red;
width: 20px;
height: 20px;
}
.k-slider .k-button .k-icon {
margin-top: 1px;
vertical-align: top;
}
Inspect the HTML element with chrome devtools or firefox.
I think the "size" of the slider you can adjust with this class:
.k-slider-wrap {
width: 100%;
height: 100%;
}
For the sprite-size eventually this helps out.
Or just creatte your own one.