I have my css button that wont work, it only comes up as a simple hyper link..
I have it all setup right with the css reference and everything.. Heres a look at my code:
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
CSS is top and HTML is bottom. It runs fine when I run it on here but its not working for me..
PS: I am running mac snow leopard and firefox (Chrome did not work either)
It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Put you .html and style2.css in the same folder and it should work.
Another solution:
Replace your html with this:
<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
background-color:#44c767;
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
border:4px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:arial;
font-size:17px;
padding:18px 63px;
text-decoration:none;
text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
background-color:#5cbf2a;
}
.B1:active {
position:relative;
top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>
Now the CSS is inside the html file.
Related
I'm following an online tutorial for css and wrote the exact code as the instructor yet I'm unable to generate the desired output. I want the heading 'My Website' to have coral background while the output being generated applies coral background to the whole page.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header{
background-color:coral;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</body>
</html>
I want the heading 'My Website' to have coral background while the output being generated applies coral background to the whole page.
In my browsers your code even as-is works as you expect it to work. But there's one thing missing anyways. You don't have a closing tag for your header.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header{
background-color:coral;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</header>
</body>
</html>
your question is a little bit unclear to me. What did you mean by heading? Did you main the h1 tag or the header tag. If your answer is h1 then I just gave a solution but if it is header then I think your code is generating the correct output in the snippet.
body{
background-color:#f4f4f4;
color:#555;
font-family:sans-serif;
font-size:16px;
line-height:1.6em;
margin:0;
}
.container{
width:80%;
margin:auto;
overflow:hidden;
}
#main-header h1{
color:coral;
}
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<header id="main-header">
<div class="container">
<h1>My Website</h1>
</div>
</body>
</html>
If I do the following, I notice that <input type='image' /> adds the border to the input, which makes sense because you want the image to fit. But check out that space at the top, it looks like that's a bug.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
background:#eee; border:2px solid #007; font:bold 20px Arial, Helvetica, sans-serif; border-radius:30px;
}
#to_cart{
width:200px; height:64px;
}
#paypal{
width:306px; height:60px;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' alt='PayPal - The safer, easier way to pay online!' type='image' src='https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png' /></div>
</div>
</body>
</html>
After a simple change to from <input type='image' /> it works as expected. Can't be the white space. It's been removed.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px; font:bold 20px Arial, Helvetica, sans-serif; padding:0;
}
#to_cart{
width:200px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
Here is another behavior I don't fully understand.
/* external.css */
html,body{
padding:0; margin:0; background:#000;
}
body{
overflow-y:scroll;
}
.main{
width:980px; margin:0 auto;
}
.cartpal{
width:544px; height:64px; text-align:center; margin:0 auto;
}
#to_cart,#paypal{
height:64px; background:#eee; border:2px solid #007; border-radius:30px;
}
#paypal{
width:306px; background:url(https://www.paypalobjects.com/webstatic/en_US/i/btn/png/silver-pill-paypalcheckout-60px.png);
}
#to_cart{
width:200px; font:bold 20px Arial, Helvetica, sans-serif;
}
#to_cart:hover,#paypal:hover{
border-color:#fff;
}
#to_cart:active,#paypal:active{
border-color:#fc3;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width'>
<title>Is this a Bug?</title>
<link type='text/css' rel='stylesheet' href='external.css' />
</head>
<body>
<div class='main'>
<div class='cartpal'><input id='to_cart' name='to_cart' title='Add to Cart' type='button' value='Add to Cart' /><input id='paypal' name='paypal' title='Pay with PayPal' type='button' /></div>
</div>
</body>
</html>
All I did was only set the font on #to_cart. Since the default font-size is even smaller, why is #paypal now a pixel or 2 from the top? Would not the half-leading on a smaller font be less?
I can do a work arounds, that's not the issue. I'm really just trying to understand why my first and last example exhibit this strange, chaotic behavior. What's the logic? Any help is greatly appreciated.
You need to make your Inputs floating to align in row. Just change your css:
#paypal, #to_cart {
height: 62px;
background: #eee;
border: 2px solid #007;
border-radius: 30px;
float: left;
}
Every browser provide some sort of default implementation to some elements,
Like in your case because of default styling provided by the browser...
input="button"
input="image"
Notice addition 1px of padding to top and bottom, because of default appearance rule by rendering engine of your browser.
input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i]::-webkit-file-upload-button, button {
padding: 1px 6px;
}
here you can see addition padding is applied by browser for input="button" but the same dont exist for input="image"
More about appearance
I have an <img> tag inside a <div> tag and they both have classes but when I try to style the img class inside of CSS, it doesn't work? Also, whenever I try to set the div class to an id and change it in CSS, it disappears. Any help?
JSFiddle: https://jsfiddle.net/mmfm4vee/
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/loading.js"></script>
<!--Stylesheet Links-->
<link rel="stylesheet" text="text/css" href="css/style.css">
<link rel="stylesheet" text="text/css" href="css/font-awesome.min.css">
<!--Font Links-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<!--Website Header-->
<div id="header">
<div class="steam-info">
<img class="steam-avatar" src="<?$steamprofile['avatar'];?>">
<ul>
<li><a href=#></a>
</ul>
</div>
</div>
</body>
CSS:
/* Website Header */
#header {
background:rgb(28,28,28);
width:100%;
height:60px;
position:absolute;
box-shadow:0px 0px 8px 2px black;
border-top:3px solid rgb(235,50,50);
z-index:99999999;
left:0px;
top:0px;
}
.steam-info {
background:rgb(50,50,50);
border-left:3px solid rgb(235,50,50);;
width:160px;
height:40px;
position:absolute;
z-index:999999999;
top:10px;
left:1160px;
}
.steam-info a {
display:block;
color:rgb(255,255,255);
height:100%;
width:100%;
font-size:30px;
}
.steam-avatar {
width:30px;
height:30px;
}
Looking through the code, there appears to be no problem adjusting the style of the image when using an image through placehold.it.
I simply replaced <?$steamprofile['avatar'];?> with http://placehold.it/200 and was able to both see the image, and succesfully change the way it displays with simple changes to:
.steam-avatar {
width: 100px;
height: 30px;
}
Therefor, I conclude that the problem is with the way your PHP script grabs the image from Steam.
Updated code with that slight change can be found here.
Sorry this can't be of more help, but the code appears to be functioning correctly aside from the image coming through from Steam.
I am unable to remove default top margin after many attempts. Below is my html and css code. Please suggest where I am lacking?
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sample</title>
</head>
<body>
<div id="maincontainer">
<div id="header">
<h1>Sample</h1>
</div>
</div>
<div id="contents">
Body of page
</div>
</body>
</html>
CSS File
html, body
{
margin:0 auto;
padding:0;
border:0;
background:#fff;
font-family:Times New Roman;
font-size: 16px;
width:1024px;
}
#maincontainer
{
margin:0;
padding:5px;
}
#header
{
margin:0;
padding:0;
height:100px;
background:#8A0808;
text-align:left;
}
h1
{
margin:0;
padding:0 0 0 10px;
font-size: 60px;
font-weight:normal;
color:#fff;
}
padding: 5px; on the #maincontainer might be your issue. There's going to be 5px of white surrounding anything inside of the #maincontainer div.
may be it's a simple but i didnt find the solution
i wrote the following code.
<html>
<head>
<style>
span.dropt {
border-bottom: thin dotted;
background:white;
}
</style>
</head>
<body>
<span class="dropt" title="Title for the pop-up">Hot Zone Text
</span>
</body>
</html>
here,what i want is,i want to give the background color/image for "Title for the pop-up" when hover the cursor.i tried but i didnt get the solution.can any one help me...
Jquery "tooltip" is the right solution for it. Here are some resources for you:
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
http://codecanyon.net/item/the-tooltip/150532?ref=1stwebdesigner
But if you wanna make one your self. Using, jquery try to append get the title attribute of the element then append it to the span when the event is hover.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.dropt').hover(function(){
var title = $(this).attr('title');
$(this).append('<span class="tooltip">'+title+'</span>');
},function(){
$('.tooltip',this).fadeOut('slow').remove();
});
});
</script>
<style>
.tooltip {
display:block;
padding:5px;
background:black;
color:white;
min-width:200px;
font-size:11px;
line-height:25px;
text-align:center;
position:absolute;
top:-50px;
border:none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.dropt {
position:relative;
display:block;
cursor:pointer;
}
</style>
</head>
<body>
<br><br/>
<span class="dropt" title="Title for the pop-up">Hot Zone Text</span>
</body>
</html>