I'm trying to change the font-size inside a menu. When I adjust the font-size it only changes the space between the letters for some reason. Any ideas?
#mainNav ul li {
color: #000000;
display: block;
float: left;
font-size: 100px;
font: "Tahoma";
letter-spacing: .02em;
margin: 0;
padding: 0;
text-transform: uppercase;
white-space: nowrap;
}
You can have some css overriding on the font-size, you can confirm the styles using the inspect of your browser.
To solve this you can also try to change the priority of the styles buy adding the !important.
font-size: 100px !important;
But if you still having the same issue you must use the inspect to correct the priority of the styles.
if is a menu, you must have an "a" in the "li" and the font-size for this with any value.
Related
The problem is whenever I change the padding of the buttons to fit the links height, I got a small white space in the hover effect for the links. You can see that in the fiddle below:
.navbar a {
float: left;
font-size: 16px;
color: #b58b23;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown .drpbtn {
font-size: 16px;
border: none;
outline: none;
color: #b58b23;
padding: 14px 16px;
background-color: inherit;
}
https://jsfiddle.net/m8yb8645/
These two padding's don't match, but they should in order to solve your problem:
.navbar a {
padding: 14px 16px;
}
.dropdown .drpbtn {
padding: 17px 16px; /* needs to match with the above, so 14px 16px */
}
Updated fiddle
The problem is inside your link CSS. Actually when you are giving padding your padding equally affect 14px from top and bottom but due to that, only the bottom is not covered so I suggest you to add the following CSS code to your navbar anchor tag.
padding-bottom: 19px;
into .navbar a {...}
This might solve your problem but it is not a good habit Instead you use the bootstrap that is more helpful.
I am trying to create the button by anchor tag without button tag and I am writing css for that but it's doesn't take margin-top.
My css code is:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
}
Above code define margin top can be work in below html code with button tags:
<button class="btn">+view more</button>
But margin top does not work in below html tags:-
+view more
I am really confused how and where this can be happened. I am googling from last 2 hr but I don't get the exact answer so I feel greatfull if anyone can solve this issue. Thank you!!!
Set your a element to be inline-block. This will add, among the capabilities of the block level elements, the top margin capability, yet keep it in line with the rest of your content:
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
margin-top:20px;
display: inline-block; /*this is it*/
}
<button class="btn">+view more</button>
+view more
a is not a block level element. Try to set display: block or display: inline-block to the a tag and it will work.
There are other HTML elements that are set to display: inline by default:
Inline_elements (MDN)
Use display: inherit and then give the margin-top, it'll work
.btn{
background: #881f00;
color: #FFF;
padding: 5px 12px;
text-transform: uppercase;
display: inherit;
margin-top:20px;
}
add display:block or overflow:hidden for the button class.
im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change
My HTML is this;
<div id="commentslink">
<div class="circle">
<p>10</p>
</div>
</div>
and my CSS is this
a:link, a:visited {
color: #0eb0d3;
text-decoration: none;
}
a:hover {
color: #0eb0d3;
opacity: 0.4;
text-decoration: none;
}
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
.circle {
float: right;
background-color: #f89b2d;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin-top: -10px;
margin-right: 20px;
}
First of all its only color and not font-color: #ffffff; and secondly you should use
#commentslink a { /* Specific selector */
color: #fff;
}
Demo
Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like
#commentslink .circle p a {
/* Selects all a element nested inside p tag further nested inside an element
having class .circle which is further nested inside an element having
#commentslink as an id
*/
color: #fff;
}
Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.
Last but not the least, this has nothing to do with CSS3
Just a good read here.. related to this answer...
Try this with !important
#commentslink {
float: right;
color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
and use color: rather than font-color
Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.
Here's a good article on specificity.
And as others have stated, the property is color not font-color.
#Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.
The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.
Change
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
To
#commentslink {
float: right;
font-color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
And it will override the other styling
Replace font-color with color.
#commentslink {
float: right;
color: #ffffff; // this is enough not font-color
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
Also
a:link, a:visited {
color: #0eb0d3; // Also this a css override
text-decoration: none;
}
Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers.
#commentslink a {
color: #ffffff;
}
Thanks #Mr. Alien for his fiddle and the SO link.
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
I have this problem:
http://liberainformazione.it/
Title css rule:
p.right_sidebar_title {
font-size: 16px!important;
font-weight: bold;
color: black;
margin: 7px 0!important;
line-height: 18px!important;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
width: 300px;
}
Blue rectangle css rule:
.post-category-rightSidebar {
background: #369;
display: inline;
float: left;
font-size: 10px;
height: 16px;
line-height: 17px;
margin-right: 5px;
padding: 0 5px;
text-transform: uppercase;
color: white;
}
In Chrome or Firefox the blue rectangle is near the title but with IE the title is on new line.....
I haven't understand why IE not recognize my css rules.
What I am doing wrong?
Thanks a lot.
Your page has <meta http-equiv="X-UA-Compatible" content="IE=7" />, so IE9 is operating as IE7.
In IE7, specifying width or (height) value triggers so called hasLayout which makes element's box somewhat isolated and prevents its contents from being floated by any external elements.
You should either set X-UA-Compatible meta element to IE=edge value (best option), or remove width: 300px; from p.right_sidebar_title rule, or specify this width for a container that contains both p.right_sidebar_title element and floating color square.
I noticed you don't have a float on p.right_sidebar_title, try adding float: left; to that.
If it helps, I'd put p.right_sidebar_title and .post-category-rightSidebar inside their own div:
<div>
<div class="post-category-rightSidebar"></div>
<p class="right_sidebar_title">Title</p>
</div>
Hope this helps!