Okay, I guess you could say this website looks "close" to how I want it which is okay for maybe someone else, but not me because I'm a perfectionist. I'm also new to all of this html and css so you can imagine the struggle that is my life. I have two divs called topred and top yellow. I then have a slider and then a navbar(navigation bar). I would like all of these element to "stack" on one another if that makes sense. If you were to lo load it with an image at the moment you could tell that the slider doesn't perfectly match up with the topyellow. also the navbar and the slider have a tiny gap between then. Its killing me cause although it looks okay and unoticable in chrome, I can see it in IE.
This is just due to my lack of experience. I can promise you I have already spent hours trying to trouble shoot this issue. It's now time to ask the experts. Seriously, I bet Im about to feel like a genius. Dont worry, I already deleted all of my "float:center"'s lol
BTW this is a volunteer project I am doing for veterans, a great way to give back
I just took some time to clean this up!
<head>
<link rel="shortcut icon" href="bavafavicon"/>
<title>Berlin Airlift Veterans Association: News</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body id="news">
<div id="topyellow"></div>
<div id="topred"></div>
<div id="left"></div>
<div id="leftblue"></div>
<div id="right"></div>
<div id="container">
<div id="slider">
<script type="text/javascript">
var i = 0; var path = new Array();
path[0] = "1.jpg";
path[1] = "2.jpg";
path[2] = "3.jpg";
path[3] = "4.jpg";
path[4] = "5.jpg";
path[5] = "6.jpg";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",5500);
}
</script>
<img name="slide"/>
</div>
<ul id="head_nav">
<li>NEWS</li>
<li>ABOUT BAVA</li>
<li>HISTORY</li>
<li>BIOGRAPHIES</li>
<li>CALENDAR</li>
<li>CONTACT</li>
<li>LINKS</li>
<li>DONATE</li>
</ul>
<div id="headlogo">
<img src="BAVA.png" alt="BAVA logo" width="150" height="150"/>
</div>
<div id="subscribe">Sign up for BAVA updates!<br>
<img src="emailBomb.png" alt="emailBomb" id="emailBomb" width="150" height="300"/>
<form action="demo_form.asp">
E-mail: <input type="email" name="userid">
<input type="submit" value="Submit"><br>
</form>
<script type="text/javascript">
function GetClock(){
tzOffset = +2;
d = new Date();
dx = d.toGMTString();
dx = dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx))
d.setHours(d.getHours() + tzOffset);
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
if(nyear<1000) nyear=nyear+1900;
if(nmin <= 9){nmin="0"+nmin}
document.getElementById('berlinClock').innerHTML=""+(nmonth+1)+"/"+ndate+"/"+nyear+" "+nhour+":"+nmin+"";
setTimeout("GetClock()", 1000);
}
</script>
<script type="text/javascript" language="javascript">
window.onload = function() { swapImage(); GetClock(); };
</script>
<div id="berlinClock"></div>
</div>
</div>
<footer>
<div id="footer">
<p><i>15 N. College Ave, Newton, NC 28658 | (828) 466-3410</i></p>
</div>
</footer>
</body>
And Here is my CSS, please don't laugh...
body {margin:0px; padding:0;min-width: 1100px;}
#container {position:absolute; display:block; width:100%; height:100%}
#center {margin:0px}
#topred {z-index:1; top: 0; left: 0; right:0; height: .6%; width: 100%; background: rgb(211,5,24); position:absolute; display:block}
#topyellow {z-index:1 ;top: .6%; left: 0; right:0; height: .9%; width: 100%; background: rgb(253,248,12); position:absolute; display:block }
#left, #right {top: 0; bottom: 0; width: 19.5%; background-color: black; position: fixed}
#left {left: 0}
#right {right: 0}
#leftblue {left:19.5%;top: 0; bottom: 0; width: .35%; background-color: rgb(8,44,180); position: fixed}
#slider {position:relative;display:block; margin-top:.6%;width: 100%; max-width: 875px; height:350px;margin-bottom:0px;margin-left: auto;
margin-right:auto; padding-bottom:0px}
#headlogo {display: block; position: absolute; left: 14.5%; top:5%}
#subscribe {display: block; position: absolute; top:388px; right:0; width:19.5%; text-align:center; color: white}
#head_nav {z-index:1;position:relative;text-align: center;margin-left: auto;margin-right:auto;padding:0; margin-top:0px; margin-bottom:none; width:975px; border:0}
#head_nav li {display:inline;margin: 0.0px}
#emailBomb {padding-bottom: 10px}
#berlinTime {display: block; position: relative; top:388px; left:0; width:19.5%; text-align:center; color: red}
#footer {z-index:-1; padding-top:99%; font-size:10; color:black; position: relative; width:100%; text-align:center}
.currentButton {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:rgb(211,5,24);
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.currentButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.currentutton:active {
position:relative;
top:1px;}
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #d3051a;
-webkit-box-shadow:inset 0px 0px 0px 0px #d3051a;
box-shadow:inset 0px 0px 0px 0px #d3051a;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
display:inline-block;
color:#fdf902;
font-family:Arial;
font-size:14px;
font-weight:bold;
font-style:normal;
height:33pxpx;
line-height:33px;
width:105px;
text-decoration:none;
text-align:center;}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #000000 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000');
background-color:#000000;color:rgb(211,5,24);}
.button:active {
position:relative;
top:1px;}
I figured out what your issue was with the gap between the nav and the slider. You have a sub-pixel margin set on the nav. Remove the margin or set it to 0.
#head_nav li {
display:inline;
/*margin: 0.3px; remove this */
}
Related
I'm new with HTML and CSS and I'm trying to make a page, but I have a problem with the header since it doesn't span the whole width. Image of the website
Here's my HTML code:
<nav class="links">
Home
About
Products
Services
Locations
Contact us
</nav>
</head>
<body class="body">
<header>
<img class="gato" src="Imagenes/cat.jpg">
<h1>ArchiteXture</h1>
<p></p>
</header>
And here's my CSS code:
header{
background-color:#ACBBF0;
padding:20px;
width:96%;
border-style:solid;
border-left:0px;
border-right:0px;
border-color:#5666A0;
}
.body{
background-color:#CBDFE8;
width:96%;
border-right:3px;
border-bottom:3px;
border-top:0px;
border-style:solid;
border-color:#5666A0;
margin-left:2%;
}
.links{
background-color: #ACBBF0;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
font-weight:bold;
padding:20px;
text-align:center;
border-bottom:3px;
border-left:0px;
border-right:0px;
border-style:solid;
border-color:#5666A0;
}
I tried to remove paddings, and margin.
I also tried to use the F12 tool in Chrome to inspectionate the code, but I don't see why I get that space between the header and the body since body is the "father".
Thanks in advance
There's three main errors:
The padding and margin should be set to 0. Sol.: Remove all padding
and margins at once ( with *{margin:0; padding;0;},
There're some wrong ubicated closing tabs (line 9). Sol.: correct order of opening and closing tabs (1st head, 2nd body),
and you don't give an addaptative size to the photo. Sol.: give the size in percentage (the width or the height, as you prefer).
*{
padding: 0;
margin: 0;
}
header{
background-color:#ACBBF0;
padding:20px;
width: inherit;
border-style:solid;
border-color:#5666A0;
}
.body{
background-color:#CBDFE8;
width: inherit;
border-right:3px;
border-bottom:3px;
border-style:solid;
border-color:#5666A0;
}
.links{
background-color: #ACBBF0;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
font-weight:bold;
padding:20px;
text-align:center;
border-bottom:3px;
border-style:solid;
border-color:#5666A0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Hi</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<nav class="links">
Home
About
Products
Services
Locations
Contact us
</nav>
<header>
<img class="gato" src="photo.jpg" style="width: 100%;">
<h1>ArchiteXture</h1>
<p></p>
</header>
</body>
</html>
I have an image that i want to use as a button on my page that links to other pages. I want to make it in a way that I can use small and large texts on it.
The image in question:
I have tried something but can go no where with it.
a {
background:url(http://i.imgur.com/8Isga60.png);
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
padding:30px 100px;
height:20px;
color:black;
font-size:16px;
}
JS Fiddle
I would recommend you drop the image idea... that concept is very 2005. With today's CSS you can easily recreate that image with pure CSS, which then is much more flexible.
If you Google "CSS button generator" you will find many online tools that help you with that... i.e. http://www.cssbuttongenerator.com/
Here is an example I did in 10 seconds and just copied the CSS they provided... granted it is a little convoluted, but it certainly works:
<style type="text/css">
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}.classname:active {
position:relative;
top:1px;
}</style>
You could almost do it in CSS3: JSFiddle Demo
.btn {
margin:10px;
color:white;
font-size:16px;
border:4px solid #c5c7c9;
border-radius: 50px 50px;
display:inline-block;
/* Drop shadow */
-webkit-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
-moz-box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
box-shadow: 1px 1px 2px 0px rgba(50, 50, 50, 0.68);
/* Gradient Background */
background: rgb(78,186,234); /* Old browsers */
background: -moz-linear-gradient(left, rgba(78,186,234,1) 0%, rgba(0,121,183,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(78,186,234,1)), color-stop(100%,rgba(0,121,183,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(78,186,234,1) 0%,rgba(0,121,183,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ebaea', endColorstr='#0079b7',GradientType=1 ); /* IE6-9 */
}
/* Button Sizes. */
.btn.large { padding:30px 60px; }
.btn.small { padding:10px 30px; }
HTML
my text here
my text here
my text here long text goes here
I think you will have to split the image, as If you try to repeat it using it as a complete image, it will also repeat the rounded parts. So take the left and right, and a pixel from the center. See this answer for reference Button using three (3) background images css
The old school version is something like using three classes for left and right and one for center with the repeating background.Create button using 3 images
Now, as mentioned in the comments, unless you are completely decided on the background images part, a pure CSS solution will probably work better.
Try this:
a{
background:url(http://i.imgur.com/8Isga60.png) no-repeat center;
...
}
However it moves the button too. jsfiddle
You should really look into CSS buttons instead of using images. Try CSS Button Generator
The problem is the left & right padding, Why not separate the link and the text so it's easy to center the content?
(edit: jsfiddle )
<p><a class="sol" href="http://imgur.com/8Isga60"><span>Does not work with larger text</span></a></p>
a.sol {
background:url(http://i.imgur.com/8Isga60.png);
display:inline-block;
padding:30px 0px;
width: 243px;
height:20px;
color:white;
font-size:16px;
text-align: center;
}
Edit: Solved, see comments!
I've read a few posts about styling submit buttons in forms, but it only seems to partially work with me. I'm able to change the border, but not the background color or font settings. Can someone please tell me what's wrong with my code? I'm new to forms, so I could have just n00bed. I've tried background, background-color, hexadecimal values... I just am stumped.
#submitButton {
color: black;
background: #cac9c9;
border: 4px solid blue;
}
<form action="#" method="post">
<input type="text" value="user#domain.com" />
<div class="clear"></div>
<hr />
<div id="checkboxContainer">
<span>Select the newsletters you'd like to receive</span>
<input type="checkbox" name="travel" value="Getaways" />
<label>Destinations & Getaways</label>
<br />
<input type="checkbox" name="travel" value="Tips" />
<label>Weekly Travel Tips</label>
</div>
<input id="submitButton" type="submit" value="SIGN UP" />
</form>
Click for demo
Css
.classname {
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
background-color:#63b8ee;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:0;
border:1px solid #3866a3;
display:inline-block;
color:#14396a;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:86px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #7cacde;
}
.classname:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
background-color:#468ccf;
}.classname:active {
position:relative;
top:1px;
}
I forked your jsfiddle example and solution is here it works
I have HTML code with background image,which is man's head.I have html button on man's eye,and I want when browser windows resizes,button be always on eye,this is my code.
Please help me,thanks a lot to help me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post</title>
</head>
<body>
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<p align="center"><input type="submit" class="butt" onclick="dosomething();"/></p>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}
#content{position:absolute;left:0; top:0; z-index:70; height:100%; width:100%;}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}.butt:active {
position:relative;
top:1px;
}
.butt{
margin-top:260px;
margin-right:190px;
}
.butt{
}
</style>
</body>
</html>
button.classname{
position:fixed;
top:value; /*set a value so that it comes on eye horizontally*/
left:value; /*set a value so that it comes on eye vertically*/
}
Fixed position and absolute position work in different way. If you use fixed position ,body will be the parent of the item but absolute positioned item can have user defined parent( just give parent element a position property.)
So, if you want to keep the man and the eye button together you have to use same parent. use same position for both man and eye (fixed or absolute) having same parent.
second thing is, you are resizing the man's head by using width: 100% and height: 100%; so, if you want the eye button also change the position use percentage in position (eg. top: 50%). have a look at http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/ . It might help you.
I tried to not make that many adjustments to your code as possible to make this solution as easy to implement as possible, but I have done what you're asking in the following way.
Put this in the "head" section of your HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
HTML:
<img id="bgimage" src=""/>
<div id="content">
<input type="submit" class="butt" onclick="dosomething();"/>
</div>
CSS:
body,html{ margin:0;padding:0;height:100%;width:100%}
#bgimage{
position:fixed;
left:0;
top:0;
z-index:1;
height:100%;
width:100%;
}
#content{
position:absolute;
left:0;
top:0;
z-index:70;
height:100%;
width:100%;
}
.butt {
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #3c4fd9;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.butt:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.butt:active {
position:relative;
top:1px;
}
jQuery:
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
to put the jQuery in your HTML file just copy and paste this:
<script type="text/javascript">
$(document).ready(function(){
$('.butt').css({
"position" : "absolute",
"left" : "39%",
"top" : "41%"
});
)};
</script>
This isn't perfect on all resolutions, you might have to tweak the percentages in the jQuery, the only alternative is to create a CSS using multiple #media queries to adjust with every screen size.
I mean that there are two contents on the body, content left and content right, i would like to do content right as a menu panel and put a separator gif (feathered vertical line) between of them. Please tell me how can i do it ? What is the css code? Thanks.
see you can get your desired result through easy code :-
HTML
<div class="wrapper">
<div class="left">left-panel</div>
<div class="right">right-panel</div>
</div>
CSS
.wrapper {
border:1px solid red;
overflow:hidden;
width:220px
}
.left {
float:left;
width:100px;
height:280px;
background:grey;
position:relative;
}
.left:after {
position:absolute;
content:" ";
width:1px;
height:280px;
background-color: #FAFAFA;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FAFAFA));
background: -moz-linear-gradient(top, #000000 0%, #FAFAFA 100%);
right:-10px;
top:0;
}
.right {
float:right;
width:100px;
height:280px;
background:lightgrey;
}
DEMO
#vertical {
border-left:thick solid #ffff00;
}
This should work