This is my first time using a framework and I'm working with zurbs Foundation 5 framework.
I have tried to extend/overwrite the default .button class and am using that as my main button. Below is the the css for my custom.css file that is overwriting default Foundation 5 styles:
The CSS styles
.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}
.button:hover{
background: #46A18C;
}
The corresponding HTML elements:
<p>This is a description of the thing in the thing</p>
<a class="button" href="#">View Project</a>
The problem I seem to be having is only evident in webkit browsers (safari/chrome) where everything works perfectly on load. The issue only comes up after you click a link, which all are set to href="#" for now. Once a link is clicked, the text inside each button disappears, only to reappear on hover. Not sure if it's relevant but the Foundation styling for this link also includes a transition property that is set to background-color 300ms ease-out 0s
You can see an example here: http://www.kashmachine.ca/build
I'm not sure what's causing, I've gone through it through firebug, disabling styles 1 by 1 but nothing seems to fix it. Any/all suggestions would be fantastic. I'm a little new to web development, but this has really stumped me. Thanks again for any help.
Your
a, a:visited {
color:#EE4D0D;
text-decoration:none;
}
have the same color as the background of your buttons..
Address your buttons like this:
a.button
So:
a.button {
font-family: 'Alegreya Sans','Helvetica Neue',Helvetica sans-serif;
background: rgb(238, 77, 13);
color: rgb(241, 227, 186);
border-radius: 30px;
padding: 10px 15px;
font-size: 80%;
margin-top: 10px;
}
a.button:hover{
background: #46A18C;
}
That should overwrite it..
Related
The following is my CSS code for a form's submit button:
.submit {
-webkit-appearance: none !important;
text-align: center !important;
border-radius: 0rem;
color: rgb(63, 42, 86);
display: inline-block;
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
width: 3.6rem;
height: 2.2rem;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
}
After some initial formatting issues on iOS, I implemented -webkit-appearance: none which fixed most of the problems. But the "Submit" text for the Submit button is now right-aligned instead of centered on iOS, as shown in this image: http://ben-werner.com/screenshot/01.png
On the desktop version using chrome and safari however, the text displays centered as it should: http://ben-werner.com/screenshot/02.png
I don't think it is a specificity issue, as the !important declaration of text-align: center should prevent anything else in my CSS overriding it.
Does anyone have an idea what is happening on the iOS device that causes the Submit text to function differently? Any help is much appreciated, thanks!
CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Note: the html formats correctly on the CodePen site, but the same code running within safari or chrome on iOS breaks the button. I have hosted the code from CodePen at https://ben-werner.com , to demonstrate that on mobile it displays incorrectly)
Ok, I know what is happening now. You are giving your submit button a specific width and height that is affecting the text-align on iOS devices. Removed the width and height values and your text will align center on iOS devices. I would also use padding to give your button the desired width and height instead of those properties.
.submit#mc-embedded-subscribe {
border-radius: 0 !important;
-webkit-appearance: none !important;
color: rgb(63, 42, 86);
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
/* width: 3.6rem;
height: 2.2rem; */
text-align: center !important;
text-align: -moz-center !important;
text-align: -webkit-center !important;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
margin: 0 auto;
}
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
Currently I have been encountering a problem with my website where there is a mysterious blank space at the top of my website that is not attributed to any specific div or HTML item. This is happening on all my pages and my usual guides are as dumbstruck as I to this problem.
Alas, I cannot give code snippets of the issue because I don't know where the problem is being made however I do have a live version of the website available.
Live version of issue: sch242.comeze.com
If anyone can figure out the reason for this I would be very appreciative. I cannot find another topic similar to this on stackoverflow already.
Remove margin-bottom from <nav id="menu"> CSS
nav {
background: none repeat scroll 0% 0% rgb(255, 255, 255);
color: rgb(51, 51, 51);
margin-bottom: 6em; //Remove this property
}
In your main.css the following class giving this issue.
nav {
background: #FFFFFF;
color: #333333;
margin-bottom: 6em; /* Issue line*/
}
your nav style has a margin-bottom. If you remove it will stick to the top.
nav {
background: #FFFFFF;
color: #333333;
/*margin-bottom: 6em;*/
}
main.css file
nav {
background: #FFFFFF;
color: #333333;
margin-bottom: 2em; /* this will make it look better */
}
For a Windows 8 Application, I can create AppBar style buttons using 'Segoe UI Symbol' but they have drawn in a rectangle area therefore has a rectangle background. Since I want to set their background to a different color during hover, I need to get rid of this rectangle.
As pointed out in below question, the button and the style are defined like shown.
Please give a direction how this can be accomplish.
create image from character
HTML:
<button id="myAppBarIcon" class="normal-size-icon"></button>
CSS:
.normal-size-icon {
margin-top: 400px;
margin-left: 630px;
position: relative;
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(255, 255, 255);
background: none;
border: none;
}
Update:
Below code does the trick but font is not properly aligned. Probably because it is not made to align properly. Image below shows the layout.
.normal-size-icon {
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(555, 255, 255);
min-width: 0;
min-height: 0;
border-radius: 50%;
border-style: solid;
padding: 0;
text-align: center;
}
For this point you need to set border-radius:50%; so you your button will change shape to circle then add min-width:0; min-height:0; and text-align:center; here is the full css :
.normal-size-icon {
font-size: 24px;
font-family: 'Segoe UI Symbol';
color: rgb(555, 255, 255);
min-width: 0;
min-height: 0;
border-radius: 50%;
border-style: solid;
padding: 0;
text-align: center;
}
if you don't need border you can set border:none;. Sorry for my bad english
This behavior is driven by the CSS hover selector, and the default CSS there for a button will provide something that aligns with the light or dark theme, e.g.,
button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
background-color: rgba(255, 255, 255, 0.13);
border-color: rgb(255, 255, 255);
}
You could override this very specifically with something like:
.normal-size-icon:hover {
background-color: red;
}
but there are likely additional states and objects for which you'd want similar treatment.
Take a look at the ui-light.css and ![ui-dark.css][1] that's included in your References; all the answers are in there :)
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/