I am rather new and hope this isn't a dumb thing to ask but I am making a layout for chatango and I have edited my CSS etc. but when I put it on chatango the links turn blue instead of what the CSS says I have searched Google but can't seem to find the issue in this:
a {
text-decoration: none;
color:#0eac17;}
a:hover {
text-decoration: none;
color: #7ff900;
background-color:#222222;
text-transform:uppercase;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#1faf29;}
a.navigation:link {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.nav:visited {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.nav:active {
color : #b27c98;
letter-spacing: 5px;
display : block;
height:20px;
font-size:14px;
width: 150px;
text-align: center;
background-color: #333333;
font-family: Times new Roman;
padding: 0px 0px 0px 10px;
line-height:20px;
margin: 12px 0px 2px 1px;}
a.navigation:hover {
color : #7ff900;
background-color: #222222;
width: 150px;
text-transform:uppercase;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#1faf29;}
Here is the jsfiddle: http://jsfiddle.net/RgAAX/3/
And here is what chatango turns it into : http://prntscr.com/3ihxgc
This issue seems to be in both ff and chrome and perhaps others as well but I have not tried any others
Edit: The suggested !important; has fixed the link issue thanks alot c:
Use !important after the color declaration...
color:#0eac17!important;
This is a good introduction on the !important declaration...
!important CSS Declarations: How and When to Use Them
If you apply it to a you will also have to apply it to a:hover
Related
I add a blog sign up form to the sidebar of our blog page and styled it with CSS. It looks fine on desktop view, but when you open the page on a mobile phone then the button overlaps the bottom of the page;
https://screentimelabs.com/parenting-hacks/
enter image description here
Here's the code that I added to the style sheet;
.sidebar-widget #mc_embed_signup{
width: 278px;
height: 211px;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png);
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
.sidebar-widget #mc_embed_signup h2{
color: #ffffff;
font-family: "Sans Pro Regular", sans-serif;
font-size: 26px;
margin: 4px 0;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup input.button{
color: #FFFFFF;
border: 2px solid #FFFFFF;
background-color: #ffc23b;
text-transform: uppercase;
margin
}
Any help would be hugely appreciated, spent hours on this now.
You have to change this class like this,
.sidebar-widget #mc_embed_signup {
width: 278px;
height: auto;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png) no-repeat;
background-size: cover;
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
For some reason my google web font in the navigation menu keeps on changing its weight from page to page although I have set it to 700. The CSS for the menu is identical on each page. Could somebody please tell me whats going on as I have never found this before.
For future posterity reasons I shall delete the live link as soon as somebody answers. Thanks!
My CSS is
* {
font-family: 'Lato', sans-serif;
}
#menu {
font-weight:700;
display: table;
width: 100%;
list-style: none;
position: relative;
top: -20px;
text-align: center;
left: -10px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.75);
font-size: 18px;
height: 20px;
z-index: -101;
}
Firstly, you need to fix this:
body {
background-color: #FFF;
background-image: url(bg.png);
color: #D6D6D6;
font-family: font-family: 'Lato', sans-serif;
}
Your font-family declaration is duplicated.
Secondly, your 700 is being overridden by the #menu li a class here:
#menu li a {
display: block;
padding: 2px 10px;
text-decoration: none;
font-weight: lighter; /*should be changed to 700*/
white-space: nowrap;
color: #333;
}
I am trying following code for executing one alignment of boxes in right side with two adjacent box in row, please check below code why that main DIV class list_right css in not executing.
Fiddle link.
<style>
.list_right {
float:right;
padding:40px 5px 0px 0px;
width:37%;
position:relative;
}
.part_1 {
width:50%;
float:left;
line-height: 1.7;
}
.logos {
float: left;
width:160px;
margin-left:0px;
margin-bottom:8px;
padding-left: 45px;
padding-top: 1px;
padding-bottom: 3px;
text-decoration: none;
font-family:'Volkhov', arial;
font-size: 19px;
letter-spacing: 1.3px;
line-height: 2.14;
color: #6d6e71;
border: 1px solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border-color: #41c7ee;
behavior: url(/css/pie/PIE.htc);
}
.logos:hover {
border-color: #6d6e71;
background-color: #41c7ee !important;
color: #ffffff !important;
text-decoration: none !important;
}
.site_1 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
.site_2 {
background-image: url(http://i.imgur.com/ndWHvar.png) !important;
background-color: #f1f1f1 !important;
background-repeat:no-repeat !important;
background-position: 0px -5px !important;
height:36px;
}
</style>
<div class="list_right">
<div class="part_1">
Sites
</div>
<div class="part_1">
Sites
</div>
<div class="d_hidden">
</div>
<div class="clear_both">
</div>
Seems to me (from your code) that you are not closing the list_right tag. Close it and it should work properly... try to indent your code, make it look more clean, so that in the future you will be able to see the problems yourself.
You have <style> tags in your css in your original fiddle link which demonstrates the problem your were having.
Delete them, they shouldn't be there.
That's what's interfering with the list_right class.
FIDDLE
I am trying to get different 's to look differently, depending on the context. For example, in my html I have
<li> Home </li>
<li> Types of Insurance </li>
<li> Insurance Basics </li>
<li> Customer Center </li>
<li> About </li>
and in my css I have
.navlink : link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink : hover
{
background-color:#ADD8E6;
}
.navlink : visited
{
background-color:#ADD8E6;
}
But this is not working (the links appear unstylized). How would I fix this?
There must be no space before or after the :.
You need to get rid of the space before and after the colon (:).
You can also minimize your code by doing this:
.navlink {
// styling for unclicked link
}
.navlink:hover, .navlink:visited {
// styling for hover/visited state
}
I'm combining hover and visited because the only change you've made is the color, and it's the same for both.
Demo.
#nav{
float: left;
display: block;
font-size: 16px;
/*font-weight: bold;*/
font-family: 'Georgia', serif;
}
#nav>li{
display: block;
float: left;
line-height: 36px;
padding-right: 10px;
margin-left: 3px;
margin-right: 3px;
background: url(../img/nav-bullet.png) no-repeat center right;
}
#nav li>a:first-letter {
font-family: 'YataghanRegular', 'Georgia', serif;
font-size: 20px;
}
#nav li>a{ /* Parent Menu without hover*/
text-decoration: none;
color: #000000;
/*color: #CC3700; 606060*/
padding: 0px 10px 0px 10px;
display: block;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#nav li:last-child{
background: none;
}
#nav>li:hover>a,
#nav>li.current-menu-item>a{/* Parent menu color with hover */
/*color: #eee;
background: #363636;*/
color:#000000;
background: #cce4ff ;
/*font-size: 12px;*/
/*background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
background: -moz-linear-gradient(top, #000000, #353535);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0);*/
/*text-shadow: 0 -1px rgba(0, 0, 0, 0.7);*/
-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.5);
box-shadow: 0px 1px 2px rgba(0,0,0,.5);
}
Try This..
I have made a list based navigation bar for my newest project and I have added two information bars on each side of the navigation. It is coming out as desired in Firefox and IE but oddly enough Safari is acting up. It is making a large space between the navigation bar and the right side information bar.
CSS
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:15%;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:19.7em;
text-align:center;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
HTML:
<body>
<center> <img src="images/banner.jpg" width="1000" height="72" /></center>
<div id="menubar">
<div id="phonebar">
<p id="phone">888-325-1924</p>
</div>
<ul id="nav">
<li>HOME</li>
<li>WHAT WE BUY</li>
<li>ABOUT US</li>
<li>LOCATIONS</li>
<li>CONTACT US</li>
</ul>
<div id="asseenbar">
<p id="asseen">As seen on CNN and NBC</p>
</div>
</div>
<div id="content">Welcome to Georgia Buying Group</div>
</body>
I have been fighting with this for hours and being new to CSS I am hoping that someone out there can give me a hand! Any advice is appreciated! Thanks :)
Chris
EDIT:
My doctype is transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
sorry
EDIT -----------
I changed all the units to pixels, but the issue is still being presented. Now it looks fine on safari on my macbook but not on safari on my pc, or in firefox for that matter. it is just expanding so much that it is pushed down one line.
Here is my CSS:
body{
background-color:#4c7094;
background-image: url(images/bg.gif);
background-repeat:repeat-x;
font-size:.9em;
color:#FFF;
margin-top:0px;
font-family: Tahoma, Geneva, sans-serif;
}
#nav {
float:left;
padding: 0px 0px 0px 3px;
margin: 0px 0px 0px 0px;
list-style:none;
border:0px solid #000;
}
#nav li {
float:left;
margin: 3px 3px 0px 0px;
font-family:Tahoma, Geneva, sans-serif;
background-color:#e7ebf0;
border:3px double;
display: inline;
border-color:#99aabb;
}
#nav a {
float:left;
display: block;
color:#1d4c7b;
padding: 5px 15px 5px 15px;
font-size: .8em;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
#nav a:hover {
float:left;
display: block;
color:#FFF;
padding: 5px 15px 5px 15px;
font-size: .8em;
background-color:#5b7290;
vertical-align:middle;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
}
h2 {
font-size:1.5em;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
font-family:Georgia, "Times New Roman", Times, serif;
}
#phonebar{
padding: 0px 6px 9px 6px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:left;
border:0px solid #000;
width:120px;
text-align:center;
}
#asseenbar{
padding: 0px 9px 9px 6px;
margin-right: 0px;
background-image: url(images/phonebg.gif);
background-repeat: repeat-x;
background-color:#335b83;
color:#FFF;
float:right;
display:inline;
border:0px solid #000;
width:326px;
text-align:center;
}
#phone {
font-size:1em;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
font-family:"Times New Roman", Times, serif;
}
#asseen {
font-size:.8em;
margin: 0px 0px 0px 0px;
padding: 9px 0px 0px 5px;
text-align:left;
font-family:"Times New Roman", Times, serif;
}
#menubar{
clear:left;
margin-bottom:0px;
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#FFF;
height:40px;
}
#content{
margin-right:auto;
margin-left:auto;
background-color:#FFF;
width:975px;
height:890px;
padding: 20px 5px 5px 20px;
border:0px solid;
border-color:#4c7094;
color:#333;
}
It can be found here;
http://www.christopherbier.com/gbg
Any help is appreciated!!!
You seem to have made some adjustments already, based on the state of that site you linked to, but it's still not working properly across different browsers.
I think your best bet is to set that phonebg.gif image as a background on the entire #menubar div, instead of on the left and right parts of it, and then add a white background on the #nav.
That way you won't have to set a width on that right div at all (or at least not a width that needs to be so precise as to make sure the 3 parts exacty match up to the full width).
I haven't got Safari so I cannot test, (although I'm using Chrome), but the problem is probably coming from the
#phonebar {
padding: 0px 6px 9px 6px;
width:15%;
}
#asseenbar{
padding: 0px 9px 9px 6px;
width:19.7em;
}
#nav li {
margin: 3px 3px 0px 0px;
border:3px double;
}
#nav a {
padding: 5px 15px 5px 15px;
}
Try to use consistent units (ie try all pixels, and when you get it right you can mess around with % if you are feeling brave) and make sure that the sum of the widths of your columns - does not exceed the width of the container div #menubar.
In addition you should specify a DOCTYPE or yo uwill get problems between different browsers. If you do not declare a specific docType correctly a visitors browser must "guess" (usually by applying the loosest possible docType or a "quirks" mode docType of its own) resulting in slower rendering.
If you do not specify a DOCTYPE you may have alot of trouble.
Try adding a div around the list.