I have this html and css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
div.container{
border: 1px solid #F00;
}
a.padded
{
font-size: 14px;
font-weight: bold;
text-decoration: none;
background-color: #F0F0F0;
border: 1px solid #666666;
padding: 15px;
margin: 10px;
border-radius: 5px;
box-shadow: #CCC 2px 2px 2px;
color: #333333;
}
</style>
</head>
<body>
<div class="container">
my padded link
</div>
<div>Some other content</div>
</body>
</html>
I was expecting the padded link to be contained in it's parent DIV block where the DIV would expand to whatever height of the padded link. However it seems the link padding is ignored by the DIV and everything else on the page.
Why does this happen and how do I properly pad a link?
What you need to do is, give your anchor tag an display:block property.
a.padded {
display: block;
/* display:inline-block; should
work too but is not supported in some version of IE */
}
Anchor tags are inline objects.
Add display: inline-block; to .padded. and it should work.
http://jsfiddle.net/6h7MY/
Because I've asked myself this question recently, this article is a big help as to why this is happening. The relevant bit is:
The W3C’s CSS2 spec states that for Inline, non-replaced elements,
the ‘height’ property doesn’t apply, but the height of the box is given
by the ‘line-height’ property.
Related
Basically i just want to put a button around a link and this is my code:
.btn {
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
Explore Now
Unfortunately, nothing happens when i add the CSS part. The link gets added in right part, but doing anything in CSS won't change the look of it. Where is my error please?
Your CSS must be inside the <style> tag, like this:
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
display: inline-block;
background: #ff523b;
color: black;
padding: 8px 30px;
margin: 30px 0;
border-radius: 40px;
}
</style>
</head>
<body>
Explore Now
</body>
</html>
... or referenced with a link to a stylesheet (e.g styles.css) with your css styles
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Explore Now
</body>
</html>
Note: In this example, the stylesheet is supposed to live in the same directory of your html file.
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
I want to delete the margin top of my page. I will show you what I mean with a screenshot
You can see in my pic there are a red arrow that indicate my problem. How I can delete this margin?
I post here my css:
div#header {
background-color: #6495ED;
background: -moz-linear-gradient(100% 100% 90deg, black, gray);
background: -webkit-gradient(linear, center top, center bottom, from(gray), to(black));
margin: 0px;
width: 100%;
}
body {
background-color: #000000;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
}
ul {
list-style-type: none;
padding: 5px;
}
li {
color: #FFFFFF;
font-family: sans-serif;
}
p {
color: #FFFFFF;
font-family: sans-serif;
padding: 5px;
}
a {
text-decoration: none;
color: #FFFFFF;
}
So any suggestion about how I can delete this margin just above my header?
Here you can see my html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<title>Lista coupon</title>
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/memoria.js" type="text/javascript"></script>
<style src="../css/style.css" type="text/css"></style>
</head>
<body onload="loadJson();">
<div id="header">
<h1>Lista coupon salvati</h1>
</div>
<div id="content">
<p>Di seguito trovi tutte le promozioni salvate</p>
<div id="list">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Set margin: 0; to <h1> element
Demo: http://jsfiddle.net/5w6Es/
Same problem as with the margin-left of <ul> elements, or margin-top / margin-bottom of <p> elements, etc.
You need to reset their default styles when using them at the borders of your page.
Try removing padding and margin also for the html element, (not only the body)
Try also to remove the default margin (differently) applied by every browser to the h1 element that you didn't redefined/reset and which is probably collapsing over the #header element
html {
margin: 0;
padding: 0;
}
h1 {
...
margin: 0;
}
You need to add margin:0px; to this CSS: http://jsfiddle.net/vv6DL/
h1 {
text-align: center;
color: #FFFFFF;
font-family: sans-serif;
font-size: 26px;
font-weight: bold;
padding: 5px;
margin:0px;
}
You don't say what browsers its occuring in.
If you use Firebug and its tools you should be able to see what is causing the spacing and then set that to zero, however, a "cheat" would be to use a reset css script such as Meyers http://meyerweb.com/eric/tools/css/reset/ to clean up all those browser inconsistencies.
Try This
h1
{
margin:0px;
}
The best way I've found to do this is by adding the :first-child pseudo-element in your css to your first element such as <h1> or <ul> etc etc within your body-element.
So an example using your mark up above would be
h1:first-child { margin-top: 0; }
This eliminates interfering with all further <h1> elements in your code and also without needless css classes added to your html mark-up.
I hope this helps as I was having the sam problem with little luck with the answers provided.
I noticed when I use border-radius with padding and the direction of HTML is RTL it is not working as expected. It works fine if remove the direction part dir="rtl". The following codes will show how it works without and with dir="rtl"
without dir="rtl":
<!DOCTYPE html>
<html >
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
with dir="rtl":
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>test</title>
</head>
<body>
<style type="text/css">
.main {
padding:5px;
}
.tag{
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
}
</style>
<div class="main">
<span class="tag">test</span>
</div>
</body>
</html>
Result:
As you can see the text moved to the left and background moved to the right. I tested it on IE10 and IE9. Is there any fix for this problem or any work around?
Making the .tag display as an inline-block seems to resolve this:
.tag {
background-color: #0473c0;
border-radius: 3px 3px 3px 3px;
padding:5px;
display: inline-block;
}
See also this jsfiddle for a working demo. (Tested in IE10, Win8).
However, I'm not sure whether this messes with the flow of text in RTL documents in any way.
The :active code works in all browsers, except IE8 (not 9). I've looked at other similar questions to this and have tried different methods. This is the code:
HTML:
<div id="main" style="color:white;font-family:Georgia">
<div id="button" onmouseup="someFunction()"></div>
<!-- other things -->
</div>
CSS:
#button
{
position: relative;
width: 241px;
height: 41px;
background-image:url("images/buttonStatic.png");
display: none;
}
#button:hover
{
background-image:url("images/buttonHover.png");
}
#button:active
{
background-image:url("images/buttonActive.png");
}
The button displays proper, changes to the second button when I hover over it properly, but doesn't change to the third button when I click on it.
I just tried this out in IE8 and it works fine. Make sure your DOCTYPE specification is declared correctly <!doctype html> and maybe try putting in the IE compatibility meta tag which is something like <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>.
On a side note, you shouldn't be using a <DIV> element as a button like that. You should use <button> or <a> with suppressed behaviour.
Edit
Here's my code...
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Active Button</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.5.0/build/cssreset/cssreset-min.css&3.5.0/build/cssfonts/cssfonts-min.css"/>
<style type="text/css">
.button {
padding: 4px 12px;
border: solid #555 1px;
background-color: #ddd;
}
.button:hover {
background-color: #eee;
}
.button:active {
background-color: #09c;
color: #fff;
}
.frame {
padding: 2em;
}
</style>
</head>
<body>
<div class="frame">
<button class="button">I'm a Button</button>
</div>
</body>
</html>
Your code is fine, it's a known bug (sorry, discrepancy) in IE8.