I am working on this website: http://box5155.temp.domains/~grownows/
In the top menu bar, I want "Get In Touch" to have the following CSS working on it so it stands out more:
font-size: 120%;
text-transform: none;
I also want a green border box around it but I haven't even figured that out yet lol.
So I've tried just doing these in CSS but those didn't work (the only thing that strangely worked is changing the font to Escafina.) I did use !important on the font-size and text-transform but that didn't work.
.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-
50.menu-item-link {
font-size: 120%;
font-family: 'Escafina';
text-transform: none;
color: blue;
}
#menu-item-50 {
text-transform: none;
font-size: 120%;
}
So then I gave the "get in touch" the title attribute "getintouch" and tried this:
.a[target="getintouch"] {
text-transform: none;
font-size: 120%;
}
Now I am stuck. I tried without a "." selector before the a too. Any suggestions?
This worked when I tested it:
li#menu-item-50.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-50.menu-item-link a {
font-size: 120%;
text-transform: none;
border: 1px solid #b4d447;
padding: 0 17px !important;
max-height: 34px;
}
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
How do I exclude pseudo-elements like :before and :after from being changed by selectors like for example: :hover?
Maybe there's some sort of 'main pseudo element' that I'm not aware of?
I've tried using CSS3 :not() statement but this didn't work.
Using: .facebook:hover:before {color: black;} works fine, but I'm sure that there's a better solution.
Example:
I want the Facebook logo to remain black and change the texts color.
body {
background: #F7F7F7;
margin: 0px;
}
.share-button {
background: #FFFFFF;
border: 1px solid #D8D8D8;
display: inline-block;
font-family: 'Open Sans';
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0px;
padding: 12px 24px 12px 12px;
transition: color 1s;
}
.facebook:before {
display: inline-block;
height: auto;
font-family: 'FontAwesome';
font-size: 12px;
padding-right: 12px;
width: auto;
content: '\f09a';
}
.share-button:hover {
color: #374D8D;
}
<button class="share-button facebook">
Share on facebook
</button>
The problem here is not that the pseudo-element is being "matched" by the :hover selector per se, but that it is inheriting the color property from the corresponding CSS rule on the element.
That is the reason why you need to set it explicitly on the :before pseudo-element — you cannot block inheritance using a selector, or using a style on the parent or originating element.
I've been racking my brains out to fix this but I am not an HTML/CSS expert so I'm out of my wits.
The placeholder text is shown too high from the center of the input box element.
See the following image:
How can I fix this? You can see them live at http://siliconalley.com. When you type inside the input, it actually looks alright. It's just the placeholder that is looking weird.
Your current line-height is 1, change it so it is equal to the height of your element and it becomes centered.
line-height: 30px;
Your line-height:1; declaration is causing the problem. Remove this for .navbar-search .search-query and it should be fine.
You can force the line-height style the value of auto, with that u will fix the problem in Chrome and won't mess up in IE. I've tested on FF, Chrome and IE
.search-query {
line-height: auto !important;
}
your CSS is looking Like this
Actually it is line-height problem
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Change to Like this
.navbar-search .search-query {
margin-bottom: 0;
padding: 4px 14px;
font-family: Open Sans,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 21px; /**change the Line-height to like this**/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
I have applied two different styles for two different text buttons.
.BC {
background-color : DC143C;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
.DE {
background-color : black;
color: white;
font-size: 12px;
display: block;
height: 21px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-align: center;
text-decoration: none;
font-weight: bolder;
}
The look and feel of the buttons are great in Mozilla,chrome,Opera and Safari browser with the expected colour changes(ie the button appers with default length and the text is wrapped inside it).But in IE8 and IE9 the color is applied only upto the text what I have mentioned and adjusts itself with the buttton structure.
Can you please help me with this?
Hey used to # before in color
as like this
background-color : #DC143C;
and replace this one
.BC{background-color : #DC143C;}
Help a CSS newbie out here. What I'm trying to do is very simple.
As I said in the image, I want the text to be in the same line. I tried everything i could think of.
Here is the index.php:
http://pastebin.com/9LVVFgUZ
Here is the style.css:
http://pastebin.com/v8Eius2A
Thanks.
Original code:
.box_con a {
color: #111111;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Remove the float, make the a element block-level and add a left margin like so:
.box_con a {
color: #111111;
display: block;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
margin-left: 150px;
padding-left: 14px;
text-decoration: none;
width: 470px;
}
Result:
Adding to .box_con a these rules: float: left and width: 470px seems to get what you asked for in your image.