Hej, can anybody help me with the problem with menu. When I'm clicking on the link, it's not opening you can see the problem here http://hostryy.5gbfree.com/INDEX.html
You added this styles.
.mail a:link, a:visited, a:active {
position: relative;
top: 40px !important; <= You need to remove this line
color: black;
text-decoration: none !important;
font-family: "raleway", sans-serif;
font-weight: 300;
}
Go to style.css on 207 line remove this or make it 0
Related
My code was all working correctly until I did a CSS3 validation which told me I needed to move the #import font code line to the first line in the css style file. When, I did that of course I realized the web fonts I had chosen had not been displaying, so I fixed all the sizes, etc. to best display the pages with the chosen fonts.
I can't seem to figure out this last quirk, though. The p a:link, a:visited color blue is not being picked up in the p tags, except for one place in the footnote area (footnote #6)! The other a links within p tags are picking the white color up from the insert-container p a styles. I understand that the last style overrides previous ones, but the selectors are different, so I'm not understanding why this is happening.
I've cleared the cache, tried different browsers, tried changing the colors on each of the a link styles, but if I change it to fix the paragraph text, then it ends up also changing the insert-container link styles.
You can see the issue on my CodePen at https://codepen.io/Ovimel/pen/XQjgeg and the CSS is shown below. Thanks!
CSS3
/*styling for paragraph text links */
p a {
font-weight: 900;
}
p a:link,
a:visited {
color: #194a76;
text-decoration: underline;
}
p a:hover,
a:active {
color: #194a76;
text-decoration: underline;
}
/* styling for colored page inserts from xopixel dot com */
#fullwidth-insert {
padding: 30px 0;
background: #7d654b;
text-align: center;
color: #fff;
font-family: "Carme", sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
.insert-container {
max-width: 85%;
width: 960px;
margin: 0 auto;
}
.insert-heading {
margin: 0;
font-size: 2rem;
font-weight: 300;
padding-bottom: 1rem;
letter-spacing: 0.08rem;
}
/* styling for full-width insert heading links */
.insert-heading a {
color: #fff;
font-family: "Days One", sans-serif;
font-weight: 300;
text-decoration: underline;
}
.insert-heading a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/* styling for full-width insert paragraph links */
.insert-container p a:link,
a:visited {
color: white;
font-weight: 700;
text-decoration: underline;
}
.insert-container p a:hover,
a:active {
text-decoration: underline;
color: #194a76;
}
/*styling for footnotes*/
p.footnote {
font-size: 0.8em;
/*10 pt 13px */
}
Higher specificity will beat out order in the stylesheet. This selector:
.insert-container p a:link
has higher specificity than this one:
p a:link
You can see the selector is more specific as it targets links inside a p inside the .insert-container div. For more on the how it is calculated by the browser: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
On this page: https://www.nycofficesuites.com/new/offices/, I want to change the font size on red bar across the top (where it says "Office Space"). I've entered this code but it's not working.
.page-title h1 {
font-size: 35px !important;
}
Thanks!
If you can't update the existing rule, your new rule will need to appear after the existing rule as they are both marked as "!important".
The existing rule is showing in "custom.css":
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
In custom.css you have,
.page-title h1 {
font-size: 46px !important;
font-weight: normal;
}
Either edit that file or add/load your overriding css after custom.css (order of load matters, the last one is considered).
Side note: Try to avoid using !important as much as you can.
If this is something you are just messing with you can declare it inline.
<h1 style="font-size: 35px !important;">Office Space</h1>
Or
.header {
font-size:35px;
font-weight:bold;
font-family: 'Pontano Sans', Arial, sans-serif;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
<span class="header">Office Space</span>
Just figured this out, thanks for your help everyone. The person who wrote the theme put this in a file called custom.css.php. So this was overriding the place where I was entering CSS. (This is a Wordpress site.)
I am attempting to make my site responsive, I give my heading text 15px of padding however if the text stretches onto a new line the next line doesn't get the correct padding on the left side. Is it possible to make the text align?
Here is a screenshot of the text.
Here is the CSS i'm using.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
}
and my html element is
<span class="article_title">Building Refurbishment and Modernisation</span>
span is an inline element, which means the left padding is not applied to it.
Just add the display: block; to the CSS code and it should work fine.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 10px;
color: #666;
font-weight: bold;
padding: 15px;
display:block
}
The display:block should do the trick. Notice I have also changed the line-height to 15.
you can just add display:table; and remove line-height for responsive layout.
.article_title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color: #666;
font-weight: bold;
padding: 15px;
display: table;
}
http://jsfiddle.net/oapu11q4/28/
Just change the span to div. Using a span while forcing it to be a block element is counter-intuitive.
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 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!