How to set margins for h2 and buttons in HTML?
I am new to HTML (I am working on Android). I try to create a web page. My web page contains h2 (heading), table, image, edittext and buttons. One h2 is on the left side of the web page and another h2 is on the right side of the web page. I am using the following code:
<html>
<head>
<style type="text开发者_C百科/css">
body{
background-color:#d0e4fe;
}
h2{
color:orange;
text-align:left;
}
h2{
color:orange;
text-align:right;
}
p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>
<title>VacantTable And Waiter Status</title>
</head>
<h2>Allot Table Number</h2>
<h2>Table status style</h21>
</html>
but it is showing on the right side of the web page. I am able to display the table, but how to display a button at the bottom of the table?
Do one thing give each h2 different classes and apply css to them differently.
<div class="main_container">
<h2 class="left_heading">Allot Table Number</h2>
<h2 class="right_heading">Table status style</h2>
</div>
Above is your html.Then in your css write :
h2.left_heading{
color:orange;
float:left;
}
h2.right_heading{
color:orange;
float:right;
}
There are many ways to apply styles, you can try this:
<html>
<head>
<title>VacantTable And Waiter Status</title>
<style type="text/css">
body{
background-color:#d0e4fe;
}
div.leftH2{
color:orange;
text-align:left;
float: right;
}
div.rightH2{
color:orange;
text-align:right;
float: left;
}
p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>
<body>
<div class="leftH2">
<h2>Allot Table Number</h2>
</div>
<div class="rightH2">
<h2>Table status style</h2>
</div>
</body>
</html>
You should play with id's (normally unique per page) or classes (non unique per page). That way you can differentiate between 2 sections sharing the same tag.
More info at the CSS section at W3schools
The sanest option here seems:
<html>
<head>
<style type="text/css">
body{
background-color:#d0e4fe;
}
h2{
color:orange;
}
h2.right{
text-align:right;
}
h2.left{
text-align:left;
}
p{
font-family:"Times New Roman";
font-size-size:18px;
}
</style>
</head>
<title>VacantTable And Waiter Status</title>
</head>
<h2 class="left">Allot Table Number</h2>
<h2 class="right">Table status style</h21>
</html>
I see two main problems with the code as you have it. First off, in the actual HTML, the second h2 tag is closed with a </h21> instead of </h2>.
Secondly, you seem to be misunderstanding a little about how CSS works. When you have two rules that 'overlap', then they get merged when a tag uses them. When two rules have different values for the same properties, CSS has several tricks for deciding which rule's property will be preserved.
The first trick is the 'weight' of the rule, which is just a count of the number of ids, then classes, then HTML tags in the rule. The second trick is the !important property, which tells the count that this rule is not weighted.
The third trick is the one you're running into here. If two rules have the same weight, then the last one defined takes precedence, which should mean that here, both of your h2 tags will be right aligned. You can look here for more information on CSS precedence.
Anyway, what you probably want to do is make different classes for your h2 tags, so that each has a class that gives it its properties that differ from standard h2 tags. That could be something like this:
CSS:
h2 {
color:orange;
}
/* This .right is a class that can be included on any tag, no matter what type,
and then that tag will inherit all these properties. */
.right {
text-align: right;
}
.left {
text-align: left;
}
HTML:
<h2 class="right">Allot Table Number</h2>
<h2 class="left">Table status style</h2>
加载中,请稍侯......
精彩评论