This should be easy for you I hope :)
I am trying to make three buttons with repeating background images. I use two <button> and a link <a>. It works with the link but not with the buttons - the side images (the rounded corners) don't appear. Here is the html:
<!doctype html>
<html>
<head>
<title>Task 1</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="task1.css">
</head>
<body>
<button class="blue-btn"><span id="left"> </span>OK<span id="right"> </span></button><br/>
<button class="blue-btn"><span id="left"> </span>Cancel<span id="right"> </span></button><br/>
<span id="left"> </span>View More Information<span id="right"> </span>
</body>
</html>
Here is the CSS:
.blue-btn{
background: url('button-repeat.png') repeat-x;
border:0;
height:55px;
font: 14px/44px Myriad-Pro, sans-serif;
color:black;
cursor:pointer;
}
a{
display:inline-block;
text-decoration:none;
}
#left{
display:block;
background: url('button-left.png') no-repeat;
height:55px;
width:24px;
float:left;
margin-left:-24px;
}
#right{
display:block;
background: url('button-right.png') no-repeat;
height:55px;
width:24px;
float:right;
margin-right:-24px;
}
I'm pretty sure you can't do that. You might have to give up on using <button>s and style a regular element (probably <a>, <span> or <div>) to look like a button.
It's possible with some position magic. Make the blue_btn position:relative and the left and right part should be position:absolute. Also don't use id's for styling, add some meaningfull class names to the button parts.
.blue-btn{
position: relative;
}
.btn-right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 10px;
}
.btn-left {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 10px;
}
Jsfiddle
Try styling your button without the use of spans and instead use multiple background images and multiple positions.
.button {
background-image: url(), url();
background-position: left top, right top;
}
*Note that IE 8 and IE9 are not supported.
Related
Ok so i've made a simple webpage with an external CSS, now it appears fine on my computer but when i send it to my friend the bottom buttons are not together?
My Monitor
http://i.imgur.com/ektmF.png
Friends Monitor
http://i.imgur.com/RmB3t.png
HTML Code
<body>
<style type="text/css">
body {
overflow:hidden; <!-- Setting body overflow to hidden -->
}
<!-- Background image -->
</style>
<div id="backgroundWrapper">
<img src="background.png" />
</div>
<!-- Home button -->
<div id="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<!-- Shop Button -->
<div id="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</body>
CSS Code
#backgroundWrapper{width:100%;height:100%;z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#homebtn {width:100%;height:100%;z-index:1; position:absolute;top:90%; left:35.3%;}
#shopbtn {width:100%;height:100%;z-index:1;position:absolute; top:90%; left:50%;}
#text {
color:black;
font-size:15;
text-align:center;
position:relative;
top:20%;
font-family:verdana;
font-weight:bold;
}
#myform {
position:absolute;
left:10%;
top:30%;
}
#submitbuttons {
position:relative;
text-align:center;
top:80%;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
You are using position: absolute; so you need to wrap the child elements inside a position: relative; container so they don't flow out in the wild
For example
<div class="container">
<div class="firstbtn"></div>
<div class="secondbtn"></div>
</div>
<style>
.container {
position: relative;
height: 200px;
width: 500px;
}
.firstbtn {
position: absolute;
left: /* whatever */;
top: /* whatever */;
}
.secondbtn{
position: absolute;
left: /* whatever */;
top: /* whatever */;
}
</style>
So now both button won't flow out of the container element
change this css as
#backgroundWrapper{width:100%; z-index:-1;position:absolute;}
#backgroundWrapper img{width:100%;height:100%;z-index:-1; position:absolute;}
#button-wrapper{width:30%; margin:0 auto;top:90%;z-index:1;}
#homebtn {position:relative;top:90%;float:left;}
#shopbtn {float:right;}
#button-wrapper adjust the width accordingly
create button-wrapper and put both btns in html
I want to create a menu that has buttons in it but for some reason the buttons dont get aligned at the buttom of the div. I have done this before the same way using tables and then it worked but now im trying without the tables and for some reason this does not work.
my css:
body
{
background: #bbb url(../images/Mywallpap.jpg) no-repeat;
font-family: Sans-Serif;
padding:0;
margin: 0;
}
#Background
{
width: 750px;
margin: 0 auto;
background: #FEFEFE;
}
.Menu
{
height: 60px;
vertical-align: bottom;
}
.Menu div
{
height : 30px;
margin-left: 25px;
padding: 0;
}
My html:
<!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>
<title></title>
<link href="MyCss.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div id="Background">
<div class="Menu">
<div>
<button>Test</button>
</div>
</div>
</div>
</body>
</html>
what am i missing here?
Try Using this CSS for button
.ButtonClass
{
border: thin groove #000000;
vertical-align: bottom;
}
And if you are looking for alignment inside div.You can use position:absolute; to absolutely position an element within a parent div.
When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned relatively.
So add position:relative; to the content div, remove the float from the button and add the following css:
position: absolute;
right: 0;
bottom: 0;
Vertical align will work only for table cells1:
.Menu
{
display: table-cell;
}
1 Actually it will also work for inline blocks, but with different effect.
I have searched and searched and tried many of options to fix this "bug", and I cannot get it to work. I have a div that has a background image that is half-way hidden behind the wrapper. On hover, it animates towards the top. The link is inside an absolute positioned div, and has no text. On IE there is no "pointer", therefore making the link un-clickable. This works in Chrome/FF.
I've tried:
border-right 1px transparent (this i actually can get a "pointer"
on the far right, but it's so small
background:
url(/images/transparent.gif) 0 0 repeat; (yes i made a 1x1px trans
image)
put another div inside the anchor that has the background
image
z-index: 0 or 1 or 2
I would like the CSS/HTML fix for this, not javascript. Thanks so much!
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
#login-btn
{
position:absolute;
top:-15px;
right:20px;
z-index:-1;
}
#login-btn a
{
display:block;
width: inherit;
height: inherit;
background-image: url(/images/transparent.gif) 0 0 repeat;
}
HTML
<div id="wrapper" class="round">
<div id="login-btn" class="login-btn">
<a href="#">
</a>
</div>
.....
.....
Here is your code, i am attaching the image also please copy to youe image folder and test. i checked in ie8 and ie7 it is working fine.
<!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>Untitled Document</title>
<style>
#wrapper {
width: 950px;
height:450px;
margin: 0 auto;
background-color: #fff;
border:#F33 solid thin;
position:relative;
}
#login-btn {
height: 33px;
width: 145px;
display:block;
position:absolute;
right:0;
top:5px;
}
#login-btn a:link, #login-btn a:visited {
background:url(images/btn-sprite.png) top left no-repeat;
height: 33px;
width: 145px;
display:block;
}
#login-btn a:hover {
background:url(images/btn-sprite.png) bottom left no-repeat;
height: 33px;
width: 145px;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="login-btn">
</div>
</body>
</html>
i figured it out. in IE, you cannot have an anchor w/ a negative z-index, b/c it hides it behind the body or whatever, and the event doesn't get passed through. basically what I ended up doing is placing the anchor around the div (login-btn), and giving the div a z-index of -1, therefore relieving the z-index on the anchor
HTML
<div id="wrapper" class="round">
<a href="#" id="login-btn">
<div class="login-btn">
</div>
</a>
....
....
CSS
#wrapper
{
width: 950px;
margin: 60px auto 40px;
background-color: #fff;
position:relative;
}
.login-btn
{
background: url(/images/btn-sprite.png) no-repeat 0 -48px;
height: 34px;
width: 98px;
}
a#login-btn
{
display:block;
height: 34px;
width: 98px;
position:absolute;
top:-15px;
right:20px;
}
a#login-btn div
{
z-index: -1;
position:relative;
}
I have a header logo where I'm adding one more image on the left of this logo.
I have used margin-left property and works perfectly across all major browsers except IE6.
As a bit of a research I used position:relativeproperty to fix this negative value.
But no luck. Here's the code I used.
in the <body> section I'm using this
<div id="logo">
<span style="position:relative;margin-left:-400px"><img src="image path"/>
</span>
</div>
now the DIV id="logo"
has following css styles
#logo {
background: url("../images/logo.jpg") repeat scroll 0 0 transparent;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
The following code works well on my IETester - IE6 mode.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
#logo {
background: url("logo.png") repeat scroll 0 0 #EEE;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-400px;
background:blue;
}
</style>
</head>
<body>
<div id="logo">
<span><img src="logo.png" alt="" />
</span>
</div>
</body>
</html>
P.S. maybe you should use something like this:
<div id="logo-wrapper">
<div id="logo" style="float:right;"></div>
<div style="float:right;"><img src="logo.png" /></div>
</div>
If an element has floating, in this case IE6 doubles the margin value. So if you want to move 400px to left, you should separately for IE6 write margin-left: -200px
#logo{position:relative}
span {position:absolute:left:-400px}
Yes IE6 does not support negative margin-padding values so you can play with positioning with the use left right position negative or positive for getting your desired results......
like this:-
HTML
<div id="logo">
<span>span</span>
</div>
CSS
#logo {
background: red;
border: 0 solid black;
float: right;
height: 70px;
margin-top: 10px;
padding: 0;
width: 387px;
}
#logo span {
position:relative;
left:-200px;
background:yellow;
width:50px;
height:50px;
}
You can try using position:relative with the left or the right attributes to position it in the right place. Or write specific styles for IE browser.
.header{
position:relative;
left: -200px;
}
I have a certain problem and searched through a lot of questions to find a solution but I just can not seem to fix it. The problem is as following:
There is the main "wrapper" div on the page (for centering reasons), and inside this is some text, images and a number of includes (footer, header etc.). The images are using "position: absolute" and using the CSS "top" and "left" property to offset them. However, Firefox and Internet Explorer 7 seem to start their offset from a different point, meaning the most of the images are just about 10px lower and 10px more to the right in IE7
What I've done to make sure;
- validated my html with the W3C validator (fixed everything)
- tried to replace position:absolute; with some position:relative;
- The position of the wrapper has been set as position:relative;
- would rather not want to work with a a specific stylesheet just for IE7 (so didn't try that)
- PS: used meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" to let my IE8 browser shows my project like it was in IE7
I'm really hoping you could help me out! Thanks in advance and hereby i'm giving the corresponding HTML and CSS
HTML:
<?xml version="1.0" encoding="utf-8"?>
<!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="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>
Document Title
</title>
<link rel='stylesheet' type="text/css" href="includes/mainmenu/Mainmenustyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/header_main/header_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="includes/footer_main/footer_mainstyle.css"/>
<link rel='stylesheet' type="text/css" href="Homepagestyle.css"/>
</head>
<body>
<div id="bg"></div>
<div id="wrapper">
<div>
<!--#include virtual="includes/mainmenu/mainmenu.html" -->
</div>
<div>
<!--#include virtual="includes/header_main/header_main.html" -->
</div>
<div id="about_us" class="about_us">
<p>Some text.</p></div>
<span class="displace"></span>
<div id="aboutgreyhorsenl_title" class="aboutgreyhorsenl_title">
<img src="images/aboutnl_image.png" alt="About Greyhorse"/></div>
<div>
<!--#include virtual="includes/footer_main/footer_main.html" -->
</div>
</div>
</body>
</html>
CSS:
#wrapper{
position:relative;
z-index: 1;
margin:10px auto;
width:1100px;
}
#bg {
width: 100%;
height: 614px;
position: absolute;
top: 93px;
left: 0;
background-image: url(images/stripe.png);
background-repeat: repeat-x repeat-y;
background-attachment: scroll;
}
body {
background-image:url(images/Background_Homepage.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
.about_us {
display: block;
width: 420px;
height: 12px;
position: absolute;
left:290px;
top:-110px;
}
.aboutgreyhorsenl_title {
position: absolute;
top: 280px;
left: 400px;
}
a.rollover {
display: block;
width: 155px;
height: 115px;
text-decoration: none;
background: url("images/FotoAnne_thumbnail.png");
position: absolute;
left:735px;
top:-100px;
}
a.rollover:hover {
background-position: 775px 0;
}
.displace {
position: absolute;
left:287px;
top:-205px;
}
Thanks in advance again for anyone who could help me out!
the style.css file from the html5boilerplate will make all browsers have the same 'default' settings.. adding this css file to your site (as the first one to be loaded), might fix the issue.
http://html5boilerplate.com/