When iam about to change the color of the following the code doesn't work and the menu color appears in #fff i.e white . can anyone help me out
#mainnav ul li::before{
font-family: Fontawesome;
color: #d65050;
float: left;
margin: 5px 5px 0 0;
font-size: 14px;
line-height: 1;
font-weight: 400;
}
My html code for this is in www.tradestar.com
This css is for ul but not background . Thanks in advance
I think you mean background-color.
Just change your
color: #d65050;
to
background-color: #d65050;
Related
A link(Menu) is highlighted by orange color after the user tap on it on android browser. I would like to remove this highlight.
I tried to search but and found some answers but when i tried it didn't work in my case. Is there anyone who can guide me?
ul {
-webkit-tap-highlight-color: transparent;
float: right;
li {
-webkit-tap-highlight-color: transparent;
float: left;
padding-left: 40px;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.04rem;
text-transform: uppercase;
}
}
I want to create the h1 header as an example below. I saw this type of header at some website which I could not remember it's address right now. If I'd remember, I'd copy it from their website. Unfortunally I forgot. Here's the the PSD screen-shot:
(source: hizliresim.com)
Anyway, no matter what I've tried I still could not get the result. What I got is:
(source: hizliresim.com)
Here's my code:
div.big-header div.header-left h1 {
float: left;
color: #fff;
background: #c00000;
font: bold 35px "Open Sans";
padding: 1px 5px;
margin-bottom: 35px;
}
and here's JSFiddle
Question: How can I create the header as example above (first picture)
Try like this: Demo
Updated Demo
Update: Just added display:inline, line-height with box-decoration-break along with your code..
CSS:
h1 {
color: #fff;
background: #c00000;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
/* newly added code */
display:inline;
line-height:44px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
Use a span inside your h1:
h1 {
float: left;
color: #fff;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
}
h1 > span {
background: #c00000;
}
And:
<h1><span>How to create a page with PHP?</span></h1>
This menu is on an ASP.NET navigation. On Chrome and Safari, it looks like this:
But on Internet Explorer, it looks fine:
Here's my CSS:
div.hideSkiplink {
background-color: #000;
width: 100%;
display: block;
height: 42px;
font-size: large;
font-weight: bold;
background: transparent url('../images/redslate_background.gif') repeat-x left top;
font-family: 'Times New Roman' , Times, serif;
text-transform: uppercase;
color: #000000;
}
div.menu ul {
position: absolute;
margin: 0px;
padding: 0;
list-style-type: none;
width: auto;
}
div.menu ul li {
display: block;
float: left;
margin: 0 1px 0 0;
}
div.menu ul li a {
display: block;
float: left;
color: #000000;
text-decoration: none;
padding: 14px 22px 0 22px;
height: 42px;
}
div.menu ul li a:hover, div.menu ul li a.current {
color: #fff;
background: transparent url('../images/redslate_backgroundOVER.gif') no-repeat center top;
}
Somehow, on Chrome and Safari, the menu seems to be below the background. How can I fix it?
Sadly, this is a regular problem in Internet Explorer. Web Developers hate it so bad because that always happens! Nevertheless there are certain rules that you should follow If you want your site to be open from all web browsers. Please take a look at this: Internet and CSS issues
There are hundreds of articles related to this topic so you should google things like
IE and CSS compatibility
IE and CSS issues
It is evident that you have been struggling with margin-top issue. Hence you can use margin-top:10px and top:10px CSS property interchangeably.
It seems that you have used, margin: 0 1px 0 0. Hence, now you should also add top:10px CSS property to adjust your menu. For more detailed help, also paste your HTML code, so that i can give you example...
I'm having some trouble with a rollover.. hoping you can help me!
I'm using li navigation, and I want to have separate boxes linking to different pages. This part is fine and works like it should. I want to be able to hover over the box and have the box AND the link change colour. I can get the box changing no problem, and the link changes when you hover over it, but is there a way for them to both change when you're just hovering over the box? Here's what I've got so far:
#nav-menu ul{float: right; text-align: center;}
#nav-menu li{margin-right: 5px; list-style:none; padding-left: 1px; text-align: center; font-size: 14px;float:left; padding:0px 15px; width: 57px; position:relative;z-index:200; background: #000; color: #FFFFFF; font-family: georgia;}
#nav-menu li a{display: block; float: left; color:#fdf2e7;font-size:14px;text-decoration:none; text-align: center; padding:5px 0px 5px 0px; font-family: georgia;}
#nav-menu a:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
#nav-menu:hover{display: block; color:#000000; text-align: center; background: #f3d5e1; text-decoration:none !important; font-family: georgia;}
--
Any help would be greatly appreciated. Thanks! :)
Use li:hover to target a list item when you hover over it, and use li:hover a to target an anchor whose parent list item is being hovered over.
I need to change the color of a button on hover.
Here is my solution, but it doesn't work.
a.button {
display: -moz-inline-stack;
display: inline-block;
width: 391px;
height: 62px;
background: url("img/btncolor.png") no-repeat;
line-height: 62px;
vertical-align: text-middle;
text-align: center;
color: #ebe6eb;
font-family: Zenhei;
font-size: 39px;
font-weight: normal;
font-style: normal;
text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
background: #383;
}
a.button a:hover means "a link that's being hovered over that is a child of a link with the class button".
Go instead for a.button:hover.
Seems your selector is wrong, try using:
a.button:hover{
background: #383;
}
Your code
a.button a:hover
Means it is going to search for an a element inside a with class button.
a.button:hover{
background: #383; }
works for me but in my case
#buttonClick:hover {
background-color:green; }