I want the footer of my site to hold 2 links: one to the cookies policy and one to the privacy policy (to the bottom right of the footer).
I also want it to include the address of the business (the bottom left of the footer), the links have already been formatted using this CSS (and show as I want them to):
a:link { color: #ff8132; text-decoration: none }
a:active { color: #79888c; font-weight: bold }
a:visited { color:#ff8132; text-decoration: none }
a:hover { color: #404f55; text-decoration: underline}
but when I try to format the address using the this CSS:
#footer {
margin:auto;
height: 100px;
width:60%;
background-color: #101f3e;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-color: #EF0E12;
}
It doesn't work?
The HTML I have for it:
<div id= "footer">
The Dry Otter</br>
Headingley Lane</br>
Leeds</br>
LS6 1BL
Cookie Policy
Privacy Policy
</div>
any ideas? Please bare in mind I'm quite new to coding!
thank you!
Related
new to coding but wanting to impress with my website.
Currently have an "On this Page" HTML embedded element that I would like to disappear when the user is scrolling down the page.
I have got the element on the left side and know how to set it to fixed. However, this then makes the other content disappear behind the element. So have left the CSS positioning at static, and don't mind that.
Just curious what the code would look like if I wanted to have it scroll with the content but disappear after a certain amount of time or when a user scrolls down in general.
<style>
.sidebar-content
{
position:static;
background-color:#F9F9F9;
padding:15px;
text-decoration: none;
font-weight: 300;
font-size:20px;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
h2 {font-weight:400px;
color: #460E72;
font-size: x-large;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
a:link {text-decoration:none;
color:#B6B6BA;
}
a:visited {text-decoration:none;
color:#404041;
}
a:hover {color:#404041;
background-color:#eeeeee;
cursor: pointer;
}
a:active {text-decoration:none;
color:#FF6712;}
<style>
.sidebar-content
{
top: 0;
position:fixed;
width: 256px;
max-widtH:296px;
left: - 275px;
transition:top 0.3s;
}
</style>
<div class="sidebar-content">
<h2>On this Page </h2>
<hr>
Blackboard Login Steps
<br />
Troubleshooting Login Issues
<br />
</div>
This is not able to fix only with the css or HTML. You have to use js.
This code will make your object dissapear after the user scrolls down a 100px.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 100) {
$('#divID').hide();
}
else {
$('#divID').show();
}
});
I have the following css that is used to make one link coloured but it applies to all of the links I have. Is there any way to stop this.
This is my css that is getting applied to the links:
a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color: #F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #CCC;
text-decoration: none;
background-color: #C00;
display: block;
border-radius: 5px;
z-index:10;
}
This is the link that it is suppose to get applied to:
<td>Food</td>
This is the link that I don’t want it to get applied to:
<td class="footer"><b>Top Attractions</b>
You could select your a tag by the href like this:
JSFiddle - DEMO
a[href="Food.html"] {
color: red;
}
Updated: DEMO (with your codes)
Working JSfiddle: demo
I gave the link you wanted to style a class and gave the class a style.
a.food :visited
instead of a:visited
Try this
HTML
<td><a href="Food.html" class="colored>Food</a></td>
CSS
.colored{
color:red;
}
One thing you could do, would be to give the tag an id/class and then refer to that in your css.
You could add a class to the link you want different and style it separately.
HTML:
<td class="footer"><b>Top Attractions</b>
CSS:
a.rides {...}
Apply a class to the links you want to effect:
<a href='food.html' class='apply_to_this'>Food</a>
Then in your CSS:
a:link.apply_to_this{
// your styles
}
You can add a class to the links you wan't to apply this rule, or you can use this rule :
a:not(.footer):link {...}
Rather than stopping it being applied to one link, you need to add a class to that link with additional CSS that overrides the styles you want to change, or (though this is bad practice...) use inline styles on that one link.
Proper solution:
In your CSS
.exception {put css here that will override the general link css, using !important to override it ifnecessary}
In your html
Content here
Quick and dirty solution
Content
Though this way will work, it is rightly frowned upon for accessibility issues.
You can just create a class and apply it to that link like mentioned above or you can just follow through your selectors to tell CSS to apply that link code to only a:links within those selectors like I've posted below:
#mainContainer #footer #etc #etc a:link {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
color: #FFF;
text-decoration: none;
background-color:#F00;
display: block;
border-radius: 5px;
z-index:10;
}
PS - Inline styles are very bad practice. It adds tons of extra code that will reduce your rankings for Google, Yahoo, MSN, etc. Not to mention it makes code harder to read and more clunky.
I've got this HTML:
<article class="smallCaps">
Cap Anson <span><em>my</em></span> outboard<br />
Anyway...the reign in Spain falls mainly on the common folk<br/>
Note: This is a big secret. Don't tell <em>them</em>
</article>
<p> </p>
<hr />
...but the HR displays to the right of "Don't tell them" instead of on a separate line.
Here's the CSS:
<style type="text/css">
.smallCaps {
font-variant: small-caps;
font-family: "Segoe UI", sans-serif;
}
.comicSansLarge {
font-size: 32px;
font-family: "Comic Sans", Consolas, serif;
color: hsl(30, 100%, 50%);
}
</style>
Add this to your css:
hr {
clear:both;
display: block;
}
One possible cause would be that the article is floated. like this:
http://codepen.io/seraphzz/pen/jyngu
Something in your CSS is causing it but it's impossible to say what it is without seeing your css.
I have a list in my sidemenu, the settings don't seem to read past the css of the .body class in stylesheet -
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
}
li.develop
{
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
color:#fff;
}
My body class is -
body {
font-family: 'Arial', sans-serif;
font-size: 12px;
font-weight: normal;
}
The list then is defaulting to body class 12px, if I change body to 11px, the list is fine but I want to keep 12px for actual body of main content of copy on site.
I tried using !important but unsure that is correct?
Thanks
I think you may have .develop on ul not li, try putting your font rules on the ul.develop rule as they will apply to the li's underneath.
ul.develop
{
list-style-type:square;
color: #FFF;
margin:0;
padding:0;
margin-top:0.6cm;
font-family: 'Arial', sans-serif;
font-size: 11px;
font-weight: normal;
}
Put your 'body' related CSS above/ before the other styles. It reads it top down. Hope that works!
I have in my CSS:
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
color: #666666;
}
a:link
{
color: rgb(124,71,111);
text-decoration: underline;
}
a:visited
{
color: rgb(41, 12, 36);
}
a:hover
{
color: rgb(91,25,79);
text-decoration: none;
}
a:active
{
color: #AB6D9C;
}
the question is to the latter tag ".remove-linkcolor"
.remove-linkcolor
{
}
I would like the links to 'a' that is associated with the class '.remove-linkcolor' the following attributes are changed:
The color is the same color of normal text
How to avoid duplication of code and put the same color of another tag?
Remove effects of active, hover normally would, but to continue as a link, so if you click the User, the same is executed.
Not sure I understand your question 2. However, I think this is the answer you need:
The only way to remove duplication of code in CSS is through combined selectors, something like:
body {
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
}
body, .remove-linkcolor {
color: #666666;
}
But then you end up repeating the selector, often. The only other way is not to do CSS: use SASS or similar CSS compiler.