Image 1 at full scale

Image 1 at 75% scale

Note: The image above is a photo of Robert H. Goddard with an A-series rocket circa 1935

Related articles:

Automatically resizing an image for mobile devices

[/network/web/html/css] permanent link

<table style="width: 100%;">

The same is true for specification of the width of <td> table elements. Under HTML 4, the following was ok:

<td width="33%" align="left">

In the above HTML code, the cell width could be specified as 33% of the table width and text in a cell could be left-aligned with align="left". Under HTML 5, though, both specifications are considered obsolete and the following should be used, instead:

<td style="width:33%; text-align:left;">

If you need to center the text, you can use text-align:center, instead. If you wish to vertically align an element in a table cell, such as text or an image, in HTML 4 you could use the following:

<td valign="top">March 12</td>

In HTML 5, you can use the following instead of the above deprecated use of valign:

<td style="vertical-align: top;">March 12</td>

[ More Info ]

[/network/web/html/css] permanent link

img {
  max-width: 100%;
  height: auto;
}

Those lines tell browsers that the maximum width of an image when it is displayed within the user's browser shoud be no wider than the page's width as it is displayed within that browser on that device. I added the "height: auto;" to ensure that when images are resized that the height is also adjusted to maintain the height to width ration of the original image. Otherwise, some images might be distorted so that the image height would be much greater in relation to its width than in the original image. With the auto setting, the height to width balance remains such that the image fits within the displayed page without appearing elongated.

[/network/web/html/css] permanent link

<details>
<summary>Overview</summary>
The American Civil War began on April 12, 1865 when South Carolina
militia forces attacked Fort Sumter at Charleston, South Carolina. 
The war effectively ended on April 9, 1865 with the surrender by
Confederate General Robert E. Lee to Union General Ulysses S. Grant, but
the president of the Confederacy, Jefferson Davis, did not declare an
end to the insurrection until May 9, 1865. Each side in the
conflict suffered over 800,000 casualties. The principal cause of the
conflict was the issue of slavery within the United States with abolitionists
in the North viewing the practice as a crime against humanity while Southern
slave owners viewed it as a necessary evil or, for some defenders of slavery,
even as a positive good, which they feared would be eliminated under the
recently elected President Abraham Lincoln.
</details>

[More Info]

[/network/web/html] permanent link

With HTML 4, centering the contents within a div is simple. You just use <div align="center">. E.g., if I wanted to center the image and text below on a webpage, I could use the following code:

<div align="center">
<img src="186px-Antinous_Mandragone_profil.jpg" alt="Antinous Mangragone 
profile"><br>
<a href="https://commons.wikimedia.org/wiki/File:Antinous_Mandragone_profil.jpg">
Antinous Mandragone</a>
</div>

The image would then be displayed in browsers as seen below:

Antinous Mandragone

[ More Info ]

[/network/web/html/css] permanent link

A tooltip, aka infotip or hint, is a small box of text that appears when a user hovers the mouse pointer over an item, such as a particular word or phrase, on a webpage. If you wish to display a tooltip when a user hovers the mouse pointer over text on a webpage, there are a number of ways you can do so. The simplest way to do so is to specify a title attribute, which is an HTML global attribute with the span tag. E.g.:

This is an example using the above technique with example text.

[ More Info ]

[/network/web/html] permanent link

I query an SQLite database using PHP code on a webpage. One of the fields in the database is a "Note" field, where notes have been entered without any HTML code to format the text. When I display the notes on a webpage, I want to preserve the line breaks and paragraphs as they were typed. Since there are no <br> line break nor <p> paragraph tags on the page, I could display the text as typed using the pre tag, but the problem with just using that tag is that in cases where the a line is very long, someone would have to scroll far to the right to see the entire line on the webpage, if I just used the pre tag. However, I can specify a style for the pre tag that will result in the text wrapping at the right-edge of the browser window. E.g. <pre style="white-space: pre-wrap"> . Or, if I don't want the text displayed in the monospaced default font for the pre tag, I can apply the style to the <div> tag, instead. E.g.: <div style="white-space: pre-wrap">.

[ More Info ]

[/network/web/html] permanent link

To center an image horizontally on a webpage, you can add style="display: block; margin: auto;" to the img tag. E.g.

Related articles:

1. Centering a div and an image within it using CSS

[/network/web/html/css] permanent link

If you wish to vertically align an image with text in Hypertext Markup Language (HTML) code that is compliant with Cascading Style Sheets (CSS) you can do so using <style="vertical-align: position;"> where position is bottom, middle, or top. E.g., if I want to align an image of the direct current symbol, which is a horizontal line over top of three shorter horizontal lines, so that the image is vertically in the middle of the text, I could use the code below:

I would then see the following:

24V 1500mA

If I used vertical-align: top, instead, the image would appear as shown below where the text is aligned with the top of the image:

24V 1500mA

If I used vertical-align: bottom, instead, the image would appear as shown below:

24V 1500mA

If I did not specify a vertical alignment, the image would appear as it did when I specified "bottom" for the vertical alignment as shown below:

24V 1500mA

Though, in this case I could also have used the HTML code ⎓, instead, for the direct current symbol and avoided the use of an image and the need to align the image with the text, though I didn't realize that when I started using the image on a page for power adapter for various devices.

E.g.: 24V ⎓ 1500mA

[/network/web/html/css] permanent link

Two parameters that can be used with @media are shown below:

[ More Info ]

[/network/web/html/css] permanent link