I like to put a line throughout HTML page. How to do this?
I tried:
hr {
width: 100%;
}
but it doesn't work
The <hr /> tag is always of 100% width of its parent tag.
<br /><hr /><br />
Check if the parent has some padding which you need to remove. Another option is to set the body tag's padding and margin to 0.
body {
padding: 0;
margin: 0;
}
Complete code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<br />
<hr />
<br />
</body>
</html>
Check these Demos...
http://jsfiddle.net/dqnKQ/1/ And http://jsfiddle.net/dqnKQ/2/
Just type <hr />, it works great
You can always style it inline if need be.
for example:
<hr style="width:100%; height:6px; background-color: #cce1ec; border:none;" />
As an HTML tag it can also be used as a selector in CSS,
for example:
hr{ width:100%; height:6px; background-color:#cce1ec; border:none;}
Related
I used text-align:center to center the three divisions, but they are all aligned on the left.
I was told that because these three elements are all block, so they wouldn't center.However, I tried to add display:inline-block, but when I inspected the page, it still showed me display:block.
Here's my code:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Google-logo {
width: 250px;
}
.Google-search-box {
font-size: 13px;
padding-left: 15px;
height: 30px;
width: 460px;
border-radius: 15px;
border-style: solid;
border-color: rgb(160, 157, 157);
box-shadow: 0 1px 6px rgb(183, 181, 181);
margin-top: 15px;
}
.div {
text-align: center;
}
</style>
</head>
<body>
<div>
<img
class="Google-logo"
src="images/Google_2015_logo.svg.png"
alt="Google logo"
/>
</div>
<div>
<input
class="Google-search-box"
type="text"
placeholder="Search Google or type a URL"
/>
</div>
<div>
<button class="left-button">Google Search</button>
<button class="right-button">I'm Feeling Lucky</button>
</div>
</body>
</html>
Very simple,
div is not a class, is a html element, so do this;
CSS
div {
text-align: center;
}
You can do it in multiple ways, the simplest and the first way is to write a CSS like:
div {
text-align: center
}
The second way if you want to use a inline CSS in your HTML code itself:
<div style="text-align:center">
The third way is what you were trying to do by using classes/id for that you need to change both your HTML and CSS code:
*for class
HTML:
<div class="center"> </div>
CSS:
.center {
text-align: center,
}
*for id
HTML:
<div id="center"> </div>
CSS:
#center {
text-align: center,
}
And most importantly div is not a class it's an HTML tag so your code didn't work because you used
.div {
text-align: center,
}
in your CSS code and the . symbolizes a class whereas if you had written it like this it would have worked as it would have given the text center to all the divs present in your code
div {
text-align: center,
}
But I feel you should use classes and center the text in div so that it could be specific to the div you wanna center texts for so try to prioritize the second or third way over the first one.
Pretty noob question I'm sure. I ran into this problem when attempting to change the background color in a more complex webpage, so I started from scratch and still can't figure it out. Here's the simplified page
My goal is to set the background color of the site, but doing so with body had no effect, even when I had it filled with content. So I tried setting the background color and instead ran into a whole new problem. The header is not at the top of the site, since there's an unwanted space above the body element itself. I've tried setting everything to margin 0 and padding 0 to no effect. Here is my code:
html {
background-color: green;
}
.body {
padding: 0;
margin: 0;
}
#logo {
font-size: 2rem;
border-right: 1px solid grey;
color: green;
}
header {
border-bottom: 1px solid grey;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="blah">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<p id="logo">Path</p>
</header>
<section class="hero">
</section>
<section class="content">
<p>hi</p>
</section>
</body>
</html>
have you tried "body" instead of ".body"?
Try :
#logo {
margin-top: 0px ;
}
body {
padding: 0px;
margin: 0px;
}
Try add This in your CSS:
html,body,header,section,p{
padding:0;
margin:0;
border:0;
}
it Works, No unwanted space.
here the fiddle :https://jsfiddle.net/osrrwrqn/
Use
html,body{
padding:0;
margin:0;
}
I need to set the background image of my website to this picture.
However, when I look at the page, I see white space on that page as illustrated below:
I want the picture to cover the whole space, and when I open the site in any computer it must show the same. Finally I could not write text in the middle part of the center of the image. Not on top, but in the middle center of picture. Here is what I have so far
I need to have this text on the page in the middle part. Not in high part of page, but in the middle. Here is a short fragment of code that I have so far:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ka-ge" lang="ka-ge" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>
#links {
postiton:absolute;
margin: 0 auto;
width: 4800px;
font-size:50px;
clear: both;
display: block;
z-index:-90;
}
#test a {
float: right;
}
a, a:active, a:visited {
color: light-blue;
a {text-decoration:none;}
}
</style>
<style>
a {text-decoration:none;}
</style>
<body >
<img src ='english.gif' style="float:right" width="90" height="90">
<img src ='russian.gif' alt="Russian flag" style="float:right" width="90" height="90"/>
<img src="georgian.jpg" style="float:right" width="90" height="90"/>
<img src="11.gif" width="100%" height="100%"/>
<div id="links">
<a href=" index.html " >მთავარი </a>
ბაკურიანი
გუდაური
ზღვა
კახეთი
სვანეთი
ვარძია
ქართლი
ძველი_თბილისი
კონტაქტი
</div>
</body>
</html>
I have done a little modification in your code as below:
</head>
< style>
#links {
position:absolute;
margin: 0 auto;
top: 50%; //centers vertically
left: 50%; //centers horizontally
width: 4800px;
font-size:50px;
clear: both;
display: block;
z-index:-90;
}
...
and in body tag as well:
<body background="11.gif">
above body tag sets your image in the background. You can resize your images i.e. either stretch or compress them using "height" and "width" attributes in the < img> tags to set their sizes.
Now you can place whatever text,link or other images over your background image.
Try it!
I have an html document which has a body with many <p>, each with their own style (see below). There is also 1 image in the document. I would like a red background to appear behind all the text and the image in the body. How can I do this please?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<br /><br />
<p style="color:rgb(0,0,0);margin: 0px;font-family: Helvetica, Helvetica;font-size:20px;">
<b>John Dow</b>
</p>
<p style="color:rgb(0,0,0);margin: 0px;font-family: Helvetica, Helvetica;font-size:20px;">
123 Street
Cape Town
8005
</p>
<img style="border:none; margin: 8px 0px 0px 0px;" src="https://s3.amazonaws.com/kruranimagestest/50CB6EA7-A5F8-43C7-A826-8DBD4DBC0DB1.jpg" alt="image">
</body>
</html>
If you want your whole website to be red, just adjust the body tag: <body style="background-color:red;">.... If you want to have a red background only behind the elements inside your body use the following style in your <head> instead:
<style>body > *{ background-color:red;}</style>
Note that you can simplify your code if you put your css rules into a global stylesheet:
body > p{
color:rgb(0,0,0);
margin: 0px;
font-family: Helvetica, Helvetica;
font-size:20px;
}
You can use CSS to add a red background to the entire body or just the image a paragraph tags.
Entire body:
<style type="text/css">
body {
background: red;
}
</style>
<p> and <img> tags only:
<style type="text/css">
p, img {
background: red;
}
</style>
Add this to where you want:
background-color:red;
It can be added to the body element to have all the page colored or to any p element to color it only.
<body style="background-color: #FF0000">
On a side note, is there reason why you are not using a CSS (.css) file?
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>