I dont know, either I am not that good in the art of 'search' or this topic is so so simple that nobody generally asks this but I have been searching this ever since i started my website.
I have only four block elements on my webpage.
The first Block element displays on the top alone
The second, third and fourth block elements, I want arranged in a single horizontal line from next line
At present I am using the table to do this, but its bad styling, isn't it?!
Please tell me a way in which I can bring all those 3 block elements in the same line
At present, if I remove the table property, my block elements move to next line.
This is how it looks if i remove the table property:
^^^^^^^^^Block element: top^^^^^^^^^^^^
^^^^Block2^^^^^
^^^^Block3^^^^^
^^^^Block4^^^^^
I want block elements 2,3,4 in same line like this:
^^^^Block2^^^^^ ^^^^Block3^^^^^ ^^^^Block4^^^^^
You can try display:inline-block or float:left.
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
display: inline-block;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
float: left;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
These are the effects on Chrome.
Related
This question already has answers here:
Background-image in <div> doesn't display
(2 answers)
Background color not showing for a DIV
(4 answers)
Why background color is not applying to DIV container? [duplicate]
(4 answers)
Closed 1 year ago.
I'm having problems with coding this, because I really can't find what the problem is, the background color wouldn't appear.
I used an external css file.
I hope someone answers this, the code is below:
This is the html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
</div>
</body>
</html>
This is the css:
.header {
background-color: #111111;
}
Your code is ok. The problem is that you did not specify width and height of the div.
Try to add this to your css and you will see that it will work.
.header {
background-color:#111111;
width: 100%;
height: 100px;
}
I actually had this problem (before I knew about StackOverflow).
Your code is (mostly) fine.
The problem is the computer doesn't know what to do.
A div is simply a divider. (Pretty sure that div is a abbreviated version of divider).
A divider without anything inside it is empty. Useless.
You need to put something in it to apply color, size, ect.
See the following Stack Snippets®.
As you can see, adding text is a simple way to solve your problem.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
And look at that. Problem solved.
</div>
</body>
</html>
If you don't want text, add a <br>.
.header {
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
<br>
</div>
</body>
</html>
You can even set the size of the div, too!
.header {
height: 200px;
width: 50 px;
background-color: #111111;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="designs.css">
</head>
<body>
<div class="header">
Some text here whose div has been set to 200 by 50 px
</div>
</body>
</html>
I'm trying to add color in the body property of my CSS in Codepen. Have not added anything but the title to the webpage, but it does not changes color regardless of where I put the tag. Tried to place the <body> html tag before <head>, erased <main>, still no change.
<!DOCTYPE html>
<html>
<head>
<title>Project Survey Form</title>
</head>
<body id="body">
<main>
<h1 id="title">Survey Form</h1>
</main>
</body>
</html>
<style>
body {
background-color: blue;
}
</style>
It keeps displaying the white background. Do you know of any workaround for this?
Codepen at CSS section, you don't need style tag
<style>
body {
background-color: blue;
}
</style>
to
body {
background-color: blue;
}
I have a textarea and a button. I wanted them to be placed in a same horizontal line from the bottom.But when I place them inline with no style applied It is displayed like this:
I am just unable to understand what is causing them to happen so?
Where is the extra margin coming from at the bottom of the text area?
And When I am doing the same thing with the form input they are okay as in the image 2:
So what is causing textarea to behave like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
textarea,button
{
margin:0;
}
</style>
</head>
<body>
<div>
<textarea>textarea</textarea>
<button>Button</button>
</div>
</body>
</html>
Add vertical-align: bottom; to your style:
<style type="text/css">
textarea,button
{
vertical-align: bottom;
}
</style>
The issue is that setting them to inline elements messes with their vertical-alignment. The style will fix this issue.
I have some text and would like to make it more narrow so it doesn't span right across the screen. I have typed:
<body style="margin:20">
<body>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
However it doesn't seem to be doing anything to the text. Do I need to close my body style tag? Is margin the correct operator to use? (I am a very beginner, this is literally the first time trying HTML)
The basic syntax of an HTML page is
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
There is only one body for HTML.
So use div, span, p tags within the body for wrapping your content.
<body style="margin:20"> is bad code
Try <body style="margin:20px"> or <body style="margin:1%">
body {
margin: 20px;
}
<div>
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</div>
add css on your html,
<style>
body {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
Without css just add style property on your body tag,
<body style="margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
</body>
Remove second <body> tag
Add unit to margin (i.e. px)
<body style="margin:20px">
SQUIRE TRELAWNEY, Dr. Livesey, and the rest of these gentlemen having etc,
<body/>
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>