I want to position multiple link buttons around an background image. Here is the HTML:
<body>
<div id="background">
<div id="abt">About Us</div>
<div id="ofc">Office</div>
<div id="staf">Staff</div>
<div id="msg">Message</div>
</div>
</body>
I want to position them around the background so that they stay fixed.
Example: http://jsfiddle.net/kimonante/2cvz4/1/
body {
background:url(http://www.factoryoutletstores.info/img/usa-map.gif) no-repeat;
background-attachment:fixed;
/*fix the shit*/
background-position:center;
}
.button-link {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
padding: 10px 25px;
background: #0d0f12;
color: #FFF;
font-family:arial;
font-weight:600;
display:block;
}
.button-link:hover, .button-link:focus {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
a {
text-decoration:none;
color:white;
width:100px;
text-transform:uppercase;
padding-left:18px;
}
#abt {
margin-left:540px;
margin-top:200px;
}
#ofc {
margin-left:160px;
margin-top:105px;
}
#msg {
margin-left:930px;
margin-top:-240px;
}
#staf {
margin-left:360px;
margin-top:260px;
}
As your buttons are positioned by pixels, you need to set your div#background to a fixed size and set the background to the div#background instead of the body.
Also remove the background attachement. This version works: http://jsfiddle.net/BTVZz/
Related
I've made 2 progress bars with succes! But here's the hard part, I'm trying to give both of them a different color with CSS styling by using classes on the progress bars and styling them in CSS but it won't change color. I want the first bar to have the color #c30000 and the second bar to have the color #1eff00. But whenever I add the classes both of the bars go back to the default state of progress bars without styling.
.progress1 {
progress {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value {
background-color: #c30000;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-moz-progress-bar {
background-color: #c30000;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
}
.progress2 {
progress {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #eee;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-webkit-progress-value {
background-color: #1eff00;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress::-moz-progress-bar {
background-color: #1eff00;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
}
<div class="progress1"><progress value="50" max="100"></progress></div>
<br />
<div class="progress2"><progress value="25" max="100"></progress></div>
I'm trying to have two different color buttons. When I tried, it makes the hover color for ".hicodestled" the hover color of ".styled. Also, the ".hicodestled" button is just idle when hovering on it. When trying to add different classes, it still does not distinguish the two buttons.
.styled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 0, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: rgba(0, 255, 0, 1);
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.hicodestled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 220, 1);
background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: rgba(0, 220, 220, 1);
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6);
}
<a href="http://point90.42web.io" style="text-decoration: none;">
<font color="#ffffff">
<button class="styled" type="button">
<b>Back up</b>
</button>
<button class="hicodestled" type="button">
<b>View code</b>
</button>
</font>
</a>
Edit: I now realize this is a garbage question as I was not looking at the CSS.
this seems to be a problem with the overwriting of the hicodestled button class. In the code below i changed the hover color and replaced the second styled button declaration for hicodestled. The code works as it should now but the colors are currently set to red and a darker shade of green for testing purposes. I suggest you change those according to your needs.
<style>
.styled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 0, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.styled:hover {
background-color: red
}
.styled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
.hicodestled {
float: right;
border: 0;
line-height: 1.5;
padding: 0 20px;
font-size: 1rem;
text-align: center;
color: #fff;
text-shadow: 1px 1px 1px #000;
border-radius: 10px;
background-color: rgba(0, 220, 220, 1);
background-image: linear-gradient(to top left,
rgba(0, 0, 0, .2),
rgba(0, 0, 0, .2) 30%,
rgba(0, 0, 0, 0));
box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.hicodestled:hover {
background-color: green;
}
.hicodestled:active {
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
inset 2px 2px 3px rgba(0, 0, 0, .6);
}
</style>
<a href=http://point90.42web.io style=text-decoration:none><font color=#ffffff>
<button class="styled"
type="button">
<b>Back up</b>
</button>
<button class="hicodestled"
type="button">
<b>View code</b>
</button>
</font></a>
I am trying to figure out how to create a similar effect as the thumbnail effect in Bootstrap, using the img-polaroid class extension.
I know that in the Bootstrap.css file, there is the following code for the thumbnail extension:
.thumbnail {
display: block;
padding: 4px;
line-height: 20px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.thumbnail:hover,
a.thumbnail:focus {
border-color: #0088cc;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
And this code I assume is what makes someone able to hover over and highlight the border of any .thumbnail class element.
I am looking at the img-polaroid class code here:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
and it seems like I should be able to do the same thing as the .thumbnail code by adding the hover and focus onto another element, like this example I made here:
.img-polaroid {
padding: 4px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: .2s ease-in-out;
}
a.img-polaroid:hover,
a.img-polaroid:focus {
border: 1px solid;
border-color: #0088cc;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
but it doesn't highlight the border of the image with the img-polaroid class when hovering over the image, like you can do with the .thumbnail class in Bootstrap...
Can anyone help me figure out how to do this? I know it would be easier to do it just using the .thumbnail class, but I am trying to experiment and see if my way of thinking would work too.
I am using Bootstrap v2.3.1
I want to add drop shadow to input fields, I tried this code
.inp_text{
background: url(../images/inp_back.png) no-repeat;
border: none;
color: #393939;
height: 34px;
padding: 6px 6px 6px 6px;
width: 156px;
}
.inp_text:focus{
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
-moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1);
border: 1px solid rgba(0, 0, 255, 0.8);
}
This is working fine in firefox but, I am not getting the blue glow in other browsers(IE & chrome). Please help.
use outline:none; in .inp_text you will find the desire result.
.inp_text{
background: url(../images/inp_back.png) no-repeat;
border: none;
color: #393939;
height: 34px;
padding: 6px 6px 6px 6px;
width: 156px;
outline:none;
}
So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.
See for yourself here http://jsfiddle.net/976a3/2/
CSS:
body
{
margin: 0px 0px 0px 0px;
background:rgba(75, 75, 75, 1);
color:#c0c0c0;
}
#container
{
margin:0px auto;
padding:0px 0px 0px 0px;
width:300px;
height:350px;
}
#contact_info
{
margin:0px 0px 0px 75px;
padding:15px 15px 15px 15px;
width:270px;
height:150px;
border:1px solid black;
color:black;
background:rgba(200,200,200,1);
border-radius:20px;
box-shadow:7px 7px 12px rgba(0,0,0,1);
}
.title
{
font-size:1.3em;
margin:-10px 0px 0px -30px;
padding:4px 0px 0px 10px;
width: 235px;
height:30px;
color:white;
background:rgba(22,22,22,1);
border-top-right-radius:10px;
border-bottom-right-radius:10px;
text-shadow:0 0 3px rgba(192, 192, 192, 1);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
0 5px 10px rgba(0, 0, 0, 0.5) inset,
0 4px 6px rgba(255, 255, 255, 0.2) inset,
1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
0pt 1px 0px rgba(0, 0, 0, 0.2);
}
.title:after
{
top:40px;
left:-163px;
position:relative;
z-index:-2;
content: "";
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid rgba(22, 22, 22, 1);
}
Html:
<div id="container">
<div id="contact_info">
<p class="title">CONTACT INFO</p>
<br />
</div>
</div>
Any fixes or ideas?
Thanks
Instead of giving the .title:after position:relative, you can try giving it position:absolute; and give .title position:relative;
http://jsfiddle.net/976a3/3