I want to display text and button on the same line, i have tried several ways, also i have searched through internet resources and also viewed many questions on the similar topic on stack overflow. Here is my code..
<!DOCTYPE html>
<html>
<body>
<div>Text Here<button id="button" style="float:right">Click Me!</button></div>
</body>
</html>
Here is the Output of above written code:
Referring to all the answers here is the final solution to this problem...
I'm answering this for those who will refer this question in future, Thanks to all :)
.Data
{
display: inline;
display: inline;
line-height: 30px;
height: 30px;
}
.DataButton
{
float:right;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
font-size: 20px;
border-radius: 4px;
cursor: pointer;
text-align: center;
text-decoration: none;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s; /* Safari */
background-color: white;
color: black;
border: 2px solid #00AABB;
height: 30px;
}
.DataButton:hover {
background-color: #00AABB;
color: white;
}
<!DOCTYPE html>
<html>
<body>
<div class="Data">
Text Here!
<button class="DataButton">Click Me!</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div>Text Here
<button id="button" style="float: 'right'">Click Me!</button>
</div>
</body>
</html>
The code above works. You've missed the ''.
Edited - added -
It does work when you apply other styles, for instance:
<html>
<body>
<div style="color:blue;text-align:center; background-color:red">Text Here
<h1 style="color:blue;text-align:center">This is a header</h1>
<button id="button" style="float: 'right'">Click Me!</button>
</div>
</body>
</html>
What would you like to do exactly? Try explaining or maybe drawing, sketching somehow for us to help you.
block elements in html are by default display:block.
The best way to show them in one line is this:
<!DOCTYPE html>
<html>
<body>
<div><p style="display: inline;">Text Here</p><button id="button">Click Me!</button></div>
</body>
</html>
Use display flex. Moreover you should add text in a tag and then add float:left; for label and float:right; for button.
Stop using floats.
Here is your code.
<div style="display:flex; justify-content: space-between; align-items: center;">Text Here<button id="button">Click Me!</button></div>
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I want to apply custom css class to the HTML tags in confluence. I tried adding css class in HTML macro as well as in css Macro. but the style is reflecting only in the preview, when i save and view the page style is not available, any advice
HTML Macro:
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
Css Macro
.myClass{
padding: 18px;
background-color: Grey;
}
Preview
When i save and publish
<head>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
</head>
<body>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I had the same problem. Simply get rid of the head section and try the below code:
<body>
<style>
.myClass {
padding: 18px;
background-color: Grey;
}
</style>
<div class="myClass">
<p>Answer will be posted here.</p>
</div>
</body>
I'm attempting to break my html into separate php files and have an error I can't seem to crack. Here is the first file, index.php
.topheader {
background-color: #404040;
color: white;
padding: 16px;
}
.footer {
background-color: #404040;
color: white;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
As of right now, only .topheader is applying to the html. I understand that both classes are identical, I plan to expand on each once I confirm they are applying individually. Can someone please take a look and advise why .footer wouldn't be applying to the sheet?
Here is a sample of the output on my machine
Seems working for me, .topheader and .footer having different styles
.topheader {
background-color: #404040;
color: blue;
padding: 16px;
}
.footer {
background-color: #404040;
color: red;
padding: 16px;
}
<head>
<link rel="stylesheet" href="./css/main.css">
</head>
<div class="topheader">
<h1>I AM BLUE</h1>
</div>
<br>
<div class="footer">
<h1>I AM RED</h1>
</div>
This is Applying to your file, both .topheader and .footer class contain same style. just change the style values, you can see the difference
.topheader {
background-color: #404040;
color: white;
padding:16px;
}
.footer {
background-color: #FFEE00;
color: Red;
padding:16px;
}
Check this code once and in your code check once href of your stylesheet.
<!DOCTYPE html>
<html>
<head>
<style>
.topheader {background-color: #404040;color: white;padding:16px;}
.footer {background-color: #404040;color: white;padding:16px;}
</style>
</head>
<body>
<div class="topheader">
<h1>KivaGIS</h1>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
As many on here pointed out, the code itself was fine. I did not realize that Chrome would cache the CSS file. I've spent all night updating the file without seeing any changes because Chrome was using an older version.
As you can see from the attached screencap, I disabled the cache and everything is working perfectly now.
I want to line it up clearly but I just can't. What should I do for it?
<html>
<head>
<style type="text/css">
.article-topic-list a {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}`enter code here`
</style>
</head>
<body>
<div class="article-topic-list"> Sale of Kodi TV boxes faces <br> legal test </div>
<div class="article-topic-list"> Piracy fighters battle Kodi 'epidemic'</div>
</body>
</html>
To get the results you're asking for, designwise, you'll have to move the margin-styles to the div, and keep the color and text-decoration on your a-tag. If you simply remove the 'a' from the style tag, you won't get any color or text-decoration changes, since the style from the browser (directly on a), would take precedence.
.article-topic-list {
margin-left: 15px;
margin-top: 20px;
}
.article-topic-list a {
color: black;
text-decoration: none;
}
<body>
<div class="article-topic-list">
Sale of Kodi TV boxes faces <br> legal test
</div>
<div class="article-topic-list">
Piracy fighters battle Kodi 'epidemic'
</div>
</body>
See this example.
Instead of applying the css rule to the tag, if you apply the rule to the entire div, i believe it should line up correctly. Your style script would be like this:
<style type="text/css">
.article-topic-list {
color: black;
text-decoration: none;
margin-left: 15px;
margin-top: 20px;
}
</style>
And the output would be something like this.
I want to know how I can change the background size around a link.
here is my HTML
<!DOCTYPE html>
<head>
<title>Library for Macintosh games.</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Old Mac Games for Free</h1>
<p>Google</p>
<script src="javascript.js" type="text/javascript">
</script>
</canvas>
</body>
</html>
here is my CSS
html {background-color: #d0e0c9}
h1 {
font-family: Arial;
font-weight: bold;
text-align: center;
margin-bottom: 85px;
margin-top: 85px;
font-size: 45px;
}
#link {
background-color: fuchsia;
text-align: center;
margin:500;
height: 100px;
width: 200px;
}
I believe you're referring to the padding of the link element.
If you'd like to increase the appearance of the background of the link element, you can easily add in this css:
#link {
background-color: fuchsia;
text-align: center;
padding:2em;
}
You should be able to see the link's "background-size" easily.
You can see a working demonstration here: http://codepen.io/anon/pen/xOVYvL
I invite you to check out some further reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
If you want to change the size of the link's text, you can use
<span style="font-size: 10px;"> <a href"..."> Text Here </a></span>
If you want to change the font color, "color: blue;", if you want to change the background color "behind the text":
<div style="background-color: black;">
<span style="font-size: 10px;">
<a href"...">
Text Here
</a>
</span>
</div>
And you change the size of the div like this:
<div style="width: 100px; height: 5px">
<div style="width: 50%; height: 5px; margin: auto;">
Here is a link to common CSS styling: http://www.w3schools.com/css/default.asp
EDIT: Also, its pretty unclear what you mean by "background size" you might want to be a little more specific when you post a question!
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>