I have a very peculiar problem concerning formatted input buttons.
On my first page, I created a css rule named "button" for formatting buttons that stand alone in one row. it works perfectly, and the button appears as shown below
the css for this button is below
.button {
width: 100%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
In html, it looks like this:
<a href="dashboard.html">
<input class="button" type="button" value="SUBMIT" action="dashboard.html" />
</a>
The problem is, I've copied this rule and altered it slightly in a second page for buttons which are parallel, and it doesn't format the buttons. strangely enough, it appears right in dreamweaver
but in any browser, it loses it's formatting
Here is the css for the parallel buttons
.2buttons {
width: 40%;
height: 15mm;
background-color: #AAA;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px -2px #888;
border:none; !important
-moz-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
-webkit-box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
box-shadow: 0px 2px 0px 0px #888, 0px -2px 0px 0px #DDD;
}
and here is the html
<a href="report.html">
<input class="2buttons" type="button" value="OK"/>
</a>
strangely enough, even if you apply the first css rule, which works, to these buttons, they still remain unformatted.
There two thing in your code.
first
Never start class &ID name with numerical number.
Write like this .buttons2 instead of this .2buttons.
& Second
Write like this
border:none !important;
Instead of this:
border:none; !important
border:none; !important should be border:none !important;
And change the class name to .twoButtons (or something else) instead of .2buttons as class names can't start with numbers...
Do NOT start a class name with a number! This is only supported in Internet Explorer.
See
http://www.w3schools.com/css/css_id_class.asp
Your problem in that the name of the class starts with number. You should change that.
Related
I have a small challenge:
how to add shadow to each letter in the header?
I tried this but add shadow to the whole div not to separate letter...
shall i wrap each letter in a span or what is the solution ?
h2 {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
You need to use text-shadow instead of box-shadow
Edit:
text-shadow doesn't have a spread value
Using your example it would be:
h2 {
-webkit-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
-moz-text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
text-shadow: 10px 10px 5px rgba(0,0,0,0.75);
}
As an important note to the answer of Ricardo Ribeiro i'd add that in this way compatibility is "limited" in IE to the version 10+
For versions < 10 till 5.5 a proprietary filter can be used as fallback:
h2 {
filter:progid:DXImageTransform.Microsoft.Shadow(color=#xxxxxx,direction=[int],strength=[int])
}
more info here
we use the plugin ubermenu and i want to add shadows below the menu bar and the dropdown, exactly like: nelly.se - our website is: http://94.247.169.169/~welloteket
I've been trying to add code:
#megaMenu ul.megaMenu{
box-shadow:2px 2px 0px 0px #ccc;
}
but without any result :(
you can add this code to apply a shadow effect on your submenu(dropdown)
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
no your code is work may be you have to try different color
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-submenu-drop {
box-shadow: 0 0 20px rgba(0, 0, 0, 0.71);
}
may be this is better than the before
I've finally been able to get my site back up and finish building it, yet I am not satisfied with the front end.
My current goal is have the the mobile display with 2 items in 2 rows.
But my issue is when I use the Chrome mobile view and my personal phone, it still copies the attributes from "fbox".
HTML:
<div id="row"1><div class="fbox mfbox" id="breast">test </div>
<div class="fbox mfbox" id="facial">test </div></div>
<div id="row2"><div class="fbox mfbox" id="body"> test</div>
<div class="fbox mfbox" id="surgery">test </div></div>
CSS:
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
.row1{
clear:both;
}
.row2{
clear:both;
}
}
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
I've added it to JSfiddle, but it does not seem to produce the results my site does.
My site: Site Removed.
Write media query under the .fbox like below
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#row1, #row2 {
clear: none;
}
#media (max-width:767px){
.mfbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:100%;
height:200px;
display:block;
}
#row1{
clear:both;
}
#row2{
clear:both;
}
}
See fiddle
In your case first .mfbox is applied good but after .mfbox there is another css .fbox so the css is replaced from .mfbox to .fbox, in that case you should apply midea query at the bottom.
Remove clear when outside of the media query,
and use # instead of . when using id
i.e. #row1 instead of .row1
You said you want two items in a row. But your css
.mfbox{
...
width:100%;
height:200px;
display:block;
}
means only one item at a row with 100% width & height of 200px.
Also in your code you are getting issues because, you had two class, and in css you defined styling for both class in the order .mfbox & .fbox. So while applying css styling obviously it will take later defined style only.
However, if you want to apply different css for mobile view and different for desktop, its not necessary to use two classes. You can handle this with only one class & in css can handle with #media.
For example:
.fbox{
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
width:22%;
height:200px;
display:inline-block;
margin:10px;
}
#media (max-width:767px){
.fbox{
width:100%;
height:200px;
display:block
}
}
I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
I want to use CSS to create rounded-corners on facebook fan-page. I have created the fanpage but I can't get the styles to work for safari browser. I have used to Safari Development tools and when I do the in-line styles it actually works but when I go and put it in the fbml code, nothing updates in safari. I have also included the same style in a stylesheet which is hosted somewhere else and it doesn't work. any help would be appreciated.
My CSS for rounded-corners
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-khtml-border-radius: 0px 0px 8px 8px;
-webkit-box-shadow: #666 0px 2px 3px;
border-radius: 0px 0px 8px 8px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
padding-left: 5px;
padding-right: 5px;
background: #DAE1EB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#DAE1EB), to(#DAE1EB));
background: -moz-linear-gradient(#DAE1EB, #DAE1EB);
background: linear-gradient(#DAE1EB, #DAE1EB);
-pie-background: linear-gradient(#DAE1EB, #DAE1EB);
I don't see why it shouldn't work.
Try this:
In the src of your CSS after is says .css try putting .css?2 (any number).
I've had some problems with FB caching and it's CDN, this usually solves it.
Let me know if this helps.