I need assistance from you CSS gurus on styling this select. I am using Jquery easydropdown and have specific look in mind. I am very close. Please check out my code here
Here is the start of my code
/*My Dropdown css */
.dropdown {
margin: 0 auto;
width: 210px !important;
margin-bottom: 10px;
}
.dropdown li{
color: #f08800 !important;
background: #f3f3f3;
font-size: 13px;
}
.dropdown li.active{
color: white !important;
background-color: #f08800;
}
The rest can be found in the codepen project I put together.
Attached is the image of what I am looking for
Thanks!
Related
I cant for the life of me figure out how to edit the style.css file to edit the width of the top navigation bar. our website as you can see, the top nav bar is too large, all the items should fit on one line. Here is the code:
.top-nav {
background: #151515 none repeat scroll 0 0;
}
.nav-top li {
display: inline-block;
}
.top-nav a,.nav-video a {
color: #fff;
display: block;
font-family: josefin_sansbold,sans-serif;
font-weight: 200;
padding: 25px 15px;
text-transform: uppercase;
position:relative;
font-size:30px;
}
.top-nav{
text-align: center;
}
div#Video_Categories {
padding: 10px 5px;
background: #fafafa;
}
#nav a {
color:#004282 !important;
font-size:18px !important;
}
There is also a chance that I may be looking at the relavent code for the top menu bar. I could attach the full css file here if possible. Bare with me this is my first post!
If you have the ability to override your current styles or edit them, then you can change the width of the class .container_24.
.container_24 {
max-width: 1200px;
}
Changing that gives me this:
I'm making a blog and I am using a free template to manage my fron-end part, but now I want to add one class called code_block. Every time I write an article and I want to add a
<p class="code_block"> some code</p>
and the code piece to be displayed in a similiar to how this last code is displayed here in stackoverflow.
I went to the END CSS file entered:
.code_block{
color: #933 !important;
border: 5px solid red;
}
didn't work, tried adding the css directly in the html, didn't work, tried adding manualy the css while in chromium web tool, didn't work what is happening ?!
source: https://github.com/martin-varbanov96/summer-2016/tree/master/Pitonia/Django/mysql_blog/blog
EDIT:
made it more specific:
.ar
ticle ul li p .code_block{
color: #933 !important;
border: 5px solid red;
}
Still not working I think priority is not the problem here.
ID has got more priority. Remove the color from here. Or you can override.
#body.home .body div p {
color: #ffffff;
display: block;
font-family: Arial;
font-size: 18px;
font-weight: normal;
line-height: 24px;
margin: 0 auto;
padding: 0;
text-align: center;
width: 780px;
}
You can override it like this...
#body.home .body div p.code_block{
color: #933;
border: 5px solid red;
}
I am trying to make this menu
now so far i can get to this point where i have the > appearing before each <li> with a margin of 10px before the text but the problem is that i can't get the circle
i tried adding <divs> thinking i could just give it a background-color and border-radius but the problem is that the html comes up as text so i wouldn't be able to apply any css to it.
the easiest solution would be to add a <div> in each <li> however the list is generated by a php function which returns the HTML as a single string. i could use str_replace() to locate every opening <li> and add in a <div> or do the same thing in javascript but i want to know if i can do this though CSS
Try using li:before with a content of > to make these bullet points, like so:
li:before {
align-items: center;
background-color: #fcbe35;
border-radius: 50%;
color: white;
content: '>';
display: inline-flex;
font-weight: bold;
height: 24px;
justify-content: center;
margin-right: 10px;
width: 24px;
}
Here's a JsFiddle.
CSS
ul{
list-style-type:none;
}
li::before {
content: ">";
background: gold;
font-family: serif;
font-style:bold;
display:inline-block;
font-weight: 800;
padding: 1px 3px;
line-height: .8em;
text-align:center;
vertical-align: center;
margin:0px 10px 0px 0px;
border-radius: 50%;
color: #fff;
}
EDIT: updated to make it look better.
How about making those circles in a Photo Editing Software and using them as the marker of your list like this :-
li{
list-style-image : url("circles.gif");
}
Or if you just don't want to use an Image :-
li::before{
content : ">";
background : yellow;
border-radius : 50%;
/* and some other styles as per your wish */
}
use an image: list-style-image: url(...);
Use pseudo elements as 'li::before' to adjust the pointers dynamically using only CSS.
I'm working on this page:
http://broadcasted.tv/
My headings have the following (I know it should be a class, I was just doing some testing)
#title-container {
background-color: #333;
color: #fff;
margin-top: 15px;
}
It works fine everywhere except there
http://broadcasted.tv/user/2/albertmarch/
And I can't figure out why the heading is the whole page... Missing div ??
Any help appreciated
Thanks!
The background goes away if you add clear:
#title-container {
background-color: #333;
color: #fff;
clear: both;
margin-top: 15px;
}
I have built a navigation list for a client and they opted to use the [Oswald]() font-face.
Now when the user scrolls over the link a navigation arrow will pop up to the side indicating which link is currently click, it is NOT supposed to turn orange upon hovering. I have removed any javascript and the fontface entirely and still can not remove the problem.
Here is a screenshot of the issue http://cl.ly/043a0q0o0Q392q2m1k20
My CSS (SASS) is as follows:
#leftnav {
width: 205px;
float: left;
ul {
li {
border: 1px solid #fff;
border-top: 0px;
background: #cc5816;
padding: 3px 10px;
#include gradient($top_color: #d86c07, $bottom_color: #bb5e06);
a {
position: relative;
font-family: $main_bold_font;
font-size: 16pt;
color: #fff;
text-decoration: none;
text-shadow: $text_shadow;
}
a:hover { #extend a; }
a:visited { #extend a; }
}
}
}
Any Ideas?
I dont know for sure if this solves the problem. But, as stated here, I would recommend to change the order of :hover and :visited to be :visited and :hover. Maybe it helps to analyse the compiled css.