I tried to change the layerswitcher color. But its not changed. Here is my code.
I tried in javascript also osMap.addControl(new OpenLayers.Control.LayerSwitcher({ 'activeColor': "white", 'fontColor': "black" })); but there is no effect.
.olControlLayerSwitcher
{
position: absolute;
top: 25px;
right: 0;
width: 20em;
font-family: sans-serif;
font-weight: bold;
margin-top: 3px;
margin-left: 3px;
margin-bottom: 3px;
font-size: smaller;
color: white;
background-color: transparent;
z-index: 10000;
}
.olControlLayerSwitcher .layersDiv
{
padding-top: 5px;
padding-left: 10px;
padding-bottom: 5px;
padding-right: 10px;
background-color: #CCCCCC;
}
The OL CSS is set within a style attribute and is stronger than your override.
You must use !important to override it:
background-color: #CCCCCC !important;
See CSS specificity.
Related
I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
I am using XML menu with ASP.Net to display the menu, and styling them with the custom CSS, The issue is with the menus on Mobile devices.
Consider the below screenshot,
CSS Code,
.menuxml{
display:none;
background-color: #006969;
color: #ffffff;
font-size: 95%;
font-weight: 500;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
}
.main_menu,
.main_menu:visited,
.main_menu:hover {
text-align: center;
color: #ffffff;
text-align: center;
height: 30px;
line-height: 30px;
margin-right: 8px;
padding-left: 5px;
padding-right: 5px;
}
.main_menu:hover {
background-color: #004949;
color: #ffffff;
}
.level_menu,
.level_menu:visited,
.level_menu:hover {
min-width: 100px;
border-bottom:1px solid #ccc!important;
background-color: #f1f1f1;
color: #000000;
text-align: left;
height: 30px;
line-height: 30px;
padding-left: 7px;
padding-right: 5px;
}
.level_menu:hover {
background-color: #004949;
color: #ffffff;
}
I have tried word-wrap, word-break and display:inline
Live test can be done with https://www.includehelp.com/
Since you used 'white-space: no-wrap' for dropdown options, Add new class to specific dropdown and add css(left: -120px).refer image
I created an autosuggest usting react-autosuggest, now I'm trying do design the layout. I took a css from an example which seems to work fine.
when I copied this css to my project the suggestion list completely detached from the input of the autosuggest as shown in the image below:
I also tried to move the div in the example but the list follows the input (as it should)
here is the css from codepen which I tried to use:
.react-autosuggest__container {
position: relative;
}
.react-autosuggest__input {
width: 240px;
height: 30px;
padding: 10px 20px;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 4px;
}
.react-autosuggest__input:focus {
outline: none;
}
.react-autosuggest__container--open .react-autosuggest__input {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
width: 280px;
margin: 0;
padding: 0;
list-style-type: none;
border: 1px solid #aaa;
background-color: #fff;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
.react-autosuggest__suggestion {
cursor: pointer;
padding: 10px 20px;
}
.react-autosuggest__suggestion--focused {
background-color: #ddd;
}
I think this css only works for the sandbox as used in the example. Especially
.react-autosuggest__suggestions-container {
position: absolute;
top: 51px;
This means that the suggestions container is always shown 51px from the top of your page. Due to other things on your page the input is probably in the way and pushed aside, since it doesn't has the position: absolute attribute.
I don't know if you're using something like a grid system or another way to manage positions of elements on your website? You might consider using that instead of defining position with pxs.
try to add this
.react-autosuggest__suggestions-container--open {
display: block;
position: absolute;
top: 51px;
width: 100%;
border: 1px solid #aaa;
font-family: Helvetica, sans-serif;
font-weight: 300;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
max-height: 300px;
overflow-y: auto;
}
I have a set of DIVs like so:
<div class = 'tag'><a href='#'>gifts for him</a></div>
And the CSS looks like this:
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
Basically I want them to look like the following (gifts for him as an example hover):
However mine look like this:
There is no gap and the hover ignores the padding (I'd like the hover to colour right up to the edges if possible).
If I add margin: 2px I get this, which is even worse:
What have I done wrong?
Thanks!!
i have make for you a fiddle.
DEMO
your css is wrong:
it should look like this:
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
margin-right:5px;
}
.tag a{
color: #666;
text-decoration: none;
}
.tag:hover {
background-color: #a5c5da;
cursor:pointer;
}
.tag:hover a{
color:#FFF;
text-decoration: none;
}
In your CSS, you need to give the .tag alone a margin, not .tag a. Try adding this line:
.tag { margin: 2px; }
Also, give your .tag a a height and width of 100% - this will fill in the entire container:
.tag a { height: 100%; width: 100%; }
In your current CSS, you're giving both the div containing the anchor tag as well as the anchor tag styling, but you only need to be giving it to the .tag div in order to space out the containers.
try this
.tag a,
.tag {
float: left;
padding-left: 6px;
padding-right: 6px;
height: 37px;
line-height: 37px;
font-size: 12px;
color: #666;
margin:2px;
background-color: #dcedf8;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
.tag a:hover {
height: 100%;
width: 100%;
text-decoration: none;
background-color: #a5c5da;
color: #fff;
height: 37px;
line-height: 37px;
padding-left: 6px;
padding-right: 6px;
}
<div class = 'tag'><a href='#'>gifts for him</a></div>
Try with this used only single
gifts for him
Demo:http://jsfiddle.net/stanze/hkkLz0re/
This submit button should be rounded on the left side, and pointed on the right side. It's working in non-ie browsers, but in IE9, it is not working.
If I look at the styles in the developer tools, the .flat-button:after rule has everything crossed out, as if it is superseded by something. What?
<button type="submit" class="flat-button">Submit</button>
<style>
.flat-button {
float: left;
position: relative;
border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border: none;
padding: 0 12px;
margin: 0 3px 3px 0;
outline: none;
cursor: pointer;
color: white;
font-family:'Trebuchet MS', Arial, helvetica, Sans-Serif;
font-size: 14px;
font-weight: bold;
font-style: italic;
text-decoration: none;
border-collapse: separate;
height: 26px;
line-height: 26px;
background: #5191cd;
}
.flat-button:hover {
background: #1c3f95;
}
.flat-button:after {
position: absolute;
content: ' ';
height: 0;
width: 0;
left: 100%;
border: 13px solid transparent;
border-left-color: #5191cd;
}
.flat-button:hover:after {
border-left-color: #1c3f95;
}
</style>
After playing around for a while, I found a simple fix for IE9.
http://jsfiddle.net/thirtydot/BWC9q/10/
All you have to is add overflow: visible to .flat-button.