Im trying to get the links in my footer white #fff however I want to keep the rest of the links on my page the color they already are. How would I do this?
#footer {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
Perhaps you should add a class to each anchor element within your footer instead of applying the colour to the footer itself:
/*Select only footer tagged elements*/
.footerLink
{
color:#fff;
}
In addition to your original CSS, the following will make your footer links white:
#footer a {
color: #FFF;
}
#footer a {
background: #3b5998;
color: #fff;
font: 11px/14px Lucida Grande, Lucida, Verdana, sans-serif;
padding: 5px 20px;
}
This will style only the a elements in the div (presumably) with the id of footer.
Related
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;
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>
CSS
.title{
margin-top: 200px; // does not work!
margin-left: 20px;
font-weight: bold;
color: $green;
font-size: 2.5em;
}
.title:hover{
background-color: transparent;
}
.title:visited{
color: $green;
}
rails / html.erb
<body>
.....
<%if current_page?(login_path) or request.path == "/signup"%>
<%= link_to "TITLE", "#", class: "title"%>
<%= yield %>
<% else %>
.....
</body>
My title CSS use to work but now it does not. Right my title is always stick to the top of the screen no matter what.I've tried margin-top and padding-top, but it refuses to move down. Margin-left, however, does work, so I am not quite sure why one aspect of margin works but the other does not.
What am I doing wrong here? And if you think the problem is not listed in the code above but rather elsewhere in my CSS, please let me know so I can maybe look into other parts of my css where the problem might be !
Just in case below is the portion where it defines the fundamental layout
/* BASIC CONFIGURATION */
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
table{
border-collapse: separate;
border-spacing: 10px 5px;
}
td{
margin-right: 10px;
}
#main-content{
font-family: 'Lato', sans-serif;
}
ul li {
list-style: none;
}
a, a:hover, a:focus {
text-decoration: none;
outline: none;
}
a:hover{
background-color: inherit;
}
::selection {
background: #68dff0;
color: #fff;
}
::-moz-selection {
background: #68dff0;
color: #fff;
}
#container {
width: 100%;
height: 100%;
}
Your problem is right here:
body {
color: #797979;
background: $background;
font-family: 'Lato', sans-serif;
padding: 0px !important;
margin: 0px !important;
font-size:13px;
}
You have marked that you want all margins and padding to be 0 and made them !important. If you want to override that you have to make your .title element to be important for margins.
I would recommend avoiding !important as much as possible. Typically you don't need it unless you are overriding a provided CSS that defines some fields with !important.
You use percentage for padding-top. Use pixel value and it will work. Percentage in this case will only work if you have fixed height
I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.
I have the following css set up for my page. When the page loads the background color doesn't always take effect. I have to refresh my page once or twice before the color works. Anyone know why? The background-image isn't as tall as the entire page and it's a gradient. So I'm taking the bottom pixel color of the gradient and using that as the page bg color.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #001833;
background-image: url(images/page_bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}
Try:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #000;
margin: 0;
padding: 0;
background: #001833 url(images/page_bg.jpg) repeat-x top;
}
(You don't need to specify 'left' if its repeating.)
Also, if you're using CSS reset (or not), make sure your body uses 100% height:
html, body {height: 100%;}