CENTERED HTML content box with a width and height limit? - html

I need what is listed as the question. It needs to function on its own and does not have any CSS tags for divs.
I have a website with a centered pane that I'm working on, but the text aligns to the box, when I set a limit on the width of it, it goes to that paragraph width but automatically goes to the left of the 900PX content radius. Here's an example of what I'm talking about;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<p style="width:850px;"><font color="#000000">
<font face="calibri"><p align="center">BEEP</p>
<body>
</body>
</html>

For html W3C standard validation you have to write your code within body tag like this:
this will be your perfect code:
Untitled Document
<body>
<p style="text-align:center; width:850px; color:#000000; font-family:calibri;">BEEP</p>
</body>
</html>

SOLVED.
<div align="center"><div style="width:600px;">

Related

Span tag doesn't work in text-image or text combinations

I have a piece of code and it seems that my code doesn't care about my span tag, I don't know if it is the problem of my browser (Chromium Edge) or my code, all my websites seems to have this problem. ALSO THIS ONLY HAPPENS IN TEXT-IMAGE COMBINATION OR JUST TEXT, NOT IN IMAGES. THE SNIPPET WILL HELP YOU UNDERSTAND BETTER. That means whenever I want to show an image exactly like this:
text But what my span does is:
text
I hope that gave a better understanding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>
<p>This is text</p>
</span>
<span>
<p>It doesn't work with spans.</p>
</span>
<span>
<img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Image #1">
</span>
<span>
<img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="Image #2">
</span>
<br>
<br>
<br>
<br>
<span>
<p>This is a image text combination</p>
</span>
<span>
<img src="https://images.unsplash.com/photo-1599993771158-370837d1dba8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
alt="ImageText">
</span>
</body>
</html>
The image might appear to be in div state because of the size of the post area. Expand to get accurate results.
You can use the CSS property display: inline-block to make a set of components inline. Here's a simple example. Since the image you're using is somewhat big, it is displayed on a separate line in your browser. You can fix this by defining a width and/ or height to the image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="display:inline-block">This is text</p>
<p style="display:inline-block">It doesn't work with spans.</p>
<img src="https://images.unsplash.com/photo-1603381616642-42b585a184b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #1" style="display:inline-block; width:100px">
<img src="https://images.unsplash.com/photo-1603132852827-5857c966512e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Image #2" style="display:inline-block; width:100px">
</body>
</html>
I'm still not clear what you're trying to achieve with spans here. If you want to surround a particular <p> tag with a <image> tag, I would recommend you to use <div>s instead of spans.

<Head> appears inside the <body>

The following html intepreted wrongly.
Using debug tool of chrome, the <head> appears inside the <body>.
Why is that happening ?
Code:
<!DOCTYPE html>
<html>
<hed>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</hed>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Result:
https://zoharch.github.io/position/index.html
Because you have a error in the head tag
<hed> should be <head>
</hed> should be </head>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</head>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Your spelling is not correct for head. you wrote hed.
it will be:
<head></head>
It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.
In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.
it should be like this just copy paste this head and it will be OK :)
<head>
<meta charset="utf-8">
<link href="_css/style.css" rel="stylesheet">
<title>Position test</title>
</head>

Chrome: input text element loses vertical alignment after copy / paste

I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.
If i remove the font-size property from style, the effect does not appear.
Is that a browser bug, or am i doing something wrong with the style attribute ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.
I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>

Getting rid of <center> tag

I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS

How do you stop HTML tables from being propped up by the content?

With some HTML like this:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
td {
width:10px;
}
</style>
</head>
<body>
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>WHOA I'M A LONG STRING!</td><td>Text</td><td>Text</td><td>Text</td></tr>
</table>
</body>
</html>​
The tds don't get a width of 10px, they are just as long as the longest string in them.
How do you make this work?
You can change the css to:
max-width: 10px;
overflow: hidden;
but that will chop off the words mid-letter, wherever the edge happens to be.
I think all you could do is wrap the content in a div and give the div a width and overflow:hidden. It cuts off the text (or content), so that may not be what you're looking for.