Why isn't the text align changed? Here's my HTML.
<!DOCTYPE html>
<html>
<head>
<title>CSS 3 Animation</title>
<style>
.table
{
width: 400px;
height: 80px;
border: 1px dotted black;
}
.animatedMargin
{
font-size: xx-large;
-webkit-animation: marginAnimation 1s;
}
#-webkit-keyframes marginAnimation
{
from {text-align: left}
to {text-align: right}
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="animatedMargin">
SAMPLE TEXT
</td>
</tr>
</table>
</body>
</html>
I've changed text-align to background to see if it works, and it did. So is it something with text-align?
text-align is not supposed to be a transitionable property.
I think text-align simply can not be animated.
Exactly text-align is not supposed to be a transitionable property.
Related
I need to set text is normal in div tag:
._div
{
text-decoration:none;
}
<i>italic<div class="_div">need to unitalic</div></i>
But it's not works. How can I do this?
I think you are looking for
._div
{
font-style: normal;
}
Edit: (comments) Since you can't override the line-through of the s tag you can make it look like you are overriding it
<!DOCTYPE html>
<html>
<body>
<style>
s {display: inline-block; position: relative; width: 100%;}
s ._div
{
text-decoration:none ;
position: absolute;
display: inline-block;
margin-left: 5px;
}
</style>
<s>line-through <span class="_div">need to un-line-through</span></s>
</body>
</html>
you will need to adjust this to your layout (e.g width)
if you use s tag u need add
<style>
s{
text-decoration : none !important;
}
</style>
Try this.
._italics {
font-style:italic;
}
<span class="_italics">italic</span> <div> need to unitalic </div>
If you want a striked text change the contents of class to
text-decoration:line-through
I have this really weird problem. I just want to draw two simple lines that are a little bit spaced out between one another.
Here's the html:
<div class="hline">
</div>
<div class="hline">
</div>
And the CSS:
html, body {
background-color: white;
}
.hline {
background-color: black;
height: 2px;
margin: 50px;
}
When the background color is of the body is white, it works flawlessly, but when it's black, and the background color of my divs is white, there just seems to be one big white line in the black background. Why is that?
Thanks a lot in advance,
Luke :D
it's working for me
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,
body {
background-color: black;
}
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline">
</div>
<div class="hline">
</div>
</body>
</html>
I tried your code and this is what I got for a black background and a white line
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { background-color: black; }
.hline {
background-color: white;
height: 2px;
margin: 50px;
}
</style>
</head>
<body>
<div class="hline"></div><div class="hline"></div>
</body>
</html>
I have a div with a custom font and I'm trying to make it so the text has the same height as the div it's inside of.
I've been trying to find a way to override the vertical alignment of text without a div with no success.
I was hoping there was something like the text-indent method for this purpose.
Here's a simple JsFiddle with my example.
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color:white;
font-size: 24px;
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
</html>
Use a line-height CSS property :
line-height : 24px;
Add a line-height with a property value that measures the height of the containing DIV
<style>
.texto {
background-color: #000;
height: 24px;
font-family: 'Lekton', sans-serif;
color: white;
font-size: 24px;
line-height: 24px; /* This line solves your problem */
}
</style>
</head>
<body>
<div class="texto">Test</div>
</body>
I have some text and <span> tag, which are inside a <div>.
<span> is float: right; I need the text to be on the left side and <span> on right side.
In every browser it displays perfectly except ie7. How can I fix this bug?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Testing page</title>
</head>
<body>
<div style="border:2px solid #000; display:inline;">
welcome<span style="float:right"> demo</span>
</div>
</body>
</html>
move span before text, this should help.
Make span as block element and move it.
I.e.
span{
display: block;
float: right;
}
Would it be possible to enclose the text in a <p> and have that display: inline?
User the following css it will work. DEMO LINK
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
}
.container {
border:2px solid #000;
padding:20px;
overflow:hidden;
height:100%;
}
.container span {
display:inline-block;
*float:left;
}
I want to define the style of Div based on a CSS file. The CSS code I have written is:
.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
I want the background of each Div section to be light-grey. What's wrong with the above code?
Edited:
This is my HTML code. I changed the Div class as suggested below, but it is not working. Please also check whether the Link tag contains path correctly or not. The CSS file is located in a Lib folder, up-one-level.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add/Update Political Party</title>
<link rel="stylesheet" href=".\Lib\entryformstyle.css" type="text/css"/>
</head>
<body>
<div id="sectionEntryForm" class="div">
<table id="tblEntryForm" cols="2">
<tr>
<td colspan="2" align="center">Add/Update Political Party</td>
</tr>
<tr>
<td>Party full name:</td>
<td><input id="inPartyFullName" name="inPartyFullName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
<tr>
<td>Party short name (initials):</td>
<td><input id="inPartyShortName" name="inPartyShortName" accept="text/plain" maxlength="80" class="inputBoxStyle"></td>
</tr>
</table>
</div>
</body>
</html>
Nothing, you just have to use <div class="body"> to make the DIV pick it up.
ALL DIVs:
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
DIVs with class "body":
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
If your CSS file is up one level, you have to include it like this:
<link rel="stylesheet" href="../lib/entryformstyle.css" type="text/css"/>
This only works on the class "body", that is
<div class="body">
If you want it to work on any divs, the selector (".body" in your sample code) should be div.
try deleting the period (.) before 'body'
edit: it is also probably worth having a quick read of this post
it explains the difference between "." and '#' when defining styles.
For this style to work, your div needs to be written like this:
<div class="body">Your text here</div>
In other words, the . in front of the body in your css tells the browser to apply the style in the braces to an element whose class is named body.
Try changing:
background-color:lightgrey;
to
background-color:silver;
or
background-color:#CCC;
This is assuming that your div has the body class applied:
<div class="body"></div>
Either use
div
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;/*#CCC*/
}
to set background color of all div
Or use
div.body
{
text-align: center;
padding: 1px;
margin: 1px;
color: black;
background-color:lightgrey;
}
and set <div class="body"></div> for each div.
You can use inline stylesheet as :
<div style="background-color:lightgrey;"></div>