MoonPoint Support Logo

 


Shop Amazon Warehouse Deals - Deep Discounts on Open-box and Used ProductsAmazon Warehouse Deals



Advanced Search
July
Sun Mon Tue Wed Thu Fri Sat
           
28 29
30 31          
2017
Months
JulAug Sep
Oct Nov Dec


Sun, May 07, 2017 6:09 pm

Centering an image on a webpage horizontally

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

<p> <img src="320px-Fisher_500_radio.jpg" alt="Fisher AM/FM radio from 1959" width="320" height="208" style="display: block; margin: auto;"> </p>

Fisher AM/FM radio from 1959

Related articles:

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

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

Sat, Apr 22, 2017 11:20 pm

Vertically aligning an image with text using CSS

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:

24V <img src="direct-current.gif" width="49" height="49" style="border: none; vertical-align: middle;" alt="Direct current symbol">1500mA

I would then see the following:

24V Direct current 
symbol1500mA

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 Direct current 
symbol1500mA

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

24V Direct current 
symbol1500mA

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 Direct current symbol1500mA

Though, in this case I could also have used the HTML code &#9107;, 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

Sat, Mar 04, 2017 10:00 pm

CSS max-width and min-width for @media

The third specification of the Cascading Style Sheets (CSS) style sheet language, CSS 3 provides support for media queries, which can adjust the display of information in a browser based on screen resolution, e.g. smartphone screen vs. computer screen, the width of the browser viewport, etc. This is done through the use of "@media, which can be used in a style sheet or a style element included in the <head> section of the HTML code.

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

max-widthThe maximum width of the display area, such as a browser window
min-widthThe minimum width of the display area, such as a browser window

[ More Info ]

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

Sat, Oct 01, 2016 10:21 pm

Align attribute is obsolete

With HTML 4, you can horizontally align an element in a cell in a table using the align parameter, e.g.: <td align="right"> to horizontally align text to the right side of a cell. However, with HTML5, use of the align parameter for horizontally aligning text within elements of a table has been deprecated. E.g., if you check your HTML code for adherence to the HTML 5 standard with the Nu Html Checker provided by the World Wide Web Consortium, you will see an error similar to the following one displayed if you are using align in the HTML code for a table.

The align attribute on the td element is obsolete. Use CSS instead.
From line 118, column 5; to line 118, column 22
</tr>↩<tr><td align="right">;<b>Vir

[ More Info ]

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

Wed, Sep 28, 2016 10:55 pm

Centering a table with CSS

With HTML 4, you could center a table using align="center".

<table align="center">
...
</table>

However, that method of centering a table is deprecated in HTML5. To center a table, which is a block-level element, in HTML5 using a Cascading Style Sheets method, you can use a style that includes margin-left: auto; margin-right: auto; as shown below.

<table style="margin-left: auto; margin-right: auto;">
...
</table>

[ More Info ]

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

Sun, Sep 18, 2016 10:12 pm

Align attribute on the paragraph element is obsolete

With HTML 4, you can horizontally center an image in a paragraph using <p align="center">. E.g., the image in the following paragraph would be cenered on the web page:

<p align="center">
<img src="f2a046-10-gld_320x240.jpg" alt="F2A046-10-GLD Printer Cable" width="320" height="240">
</p>

However, with HTML5, use of the align parameter for horizontally aligning a paragraph on a web page has been deprecated. E.g., if you check your HTML code for adherence to the HTML 5 standard with the Nu Html Checker provided by the World Wide Web Consortium, you will see an error similar to the following one displayed if you are using align with the p (paragraph) tag.

The align attribute on the p element is obsolete. Use CSS instead.
From line 73, column 1; to line 73, column 18
tent -->↩↩<p align="center">↩<img src

[ More Info ]

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

Sun, Jul 24, 2016 6:33 pm

HTML attributes obsoleted by HTML5

There are quite a few HTML attributes made obsolete in HTML5, which is the current HTML standard. I've been trying to make new web pages on my site compliant with version 5 of the standard and transitioning some created using HTML 4.1 to HTML5, so I've had to modify the HTML code to use other tags or eliminate the use of attributes that have been deprecated with HTML5. Some of the elements and attributes that have been deprecated are listed below:
  1. cellpadding attribute
  2. frameborder attribute on the iframe element
  3. scrolling attribute on the iframe element
  4. name attribute
  5. valign attribute
  6. tt element

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

Sun, Mar 27, 2016 9:02 pm

Setting the padding and border for a table with CSS

With HTML 4, you can stipulate that a border be placed around the cells in a table using the border parameter, e.g.: <table border="1">. However with HTML5, use of the "border=" attribute for putting a border around elements of a table has been deprecated as has setting the padding around elements in a table with cellpadding, e.g., <table border="1" cellpadding="3">. If you check your HTML code for adherence to the HTML 5 standard with the Nu Html Checker provided by the World Wide Web Consortium, you will see an warning displayed if you have used the border attribute and an error displayed for use of the cellpadding attribute. You can achieve an equivalent table display using Cascading Style Sheets, however, by adding a style section for the table and the th and td elements to set the border and setting cell padding in a style section or for each td and th element

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

Thu, Feb 18, 2016 10:58 pm

Centering a div and an image within it using CSS

For webpages on this site, I used the following HTML code to center a div on the pages:

<div id="header" align="center">

That didn't produce any error messages when I used the HTML 4.01 document type (doctype) declaration below as the first lines in the HTML file when I checked the page for errors using the W3C Markup Validation Service.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

However, when I wanted to convert the pages to make them valid for HTML 5 and put <!DOCTYPE html> as the first line in the file, instead, I saw the following error message reported by the validation service:

The align attribute on the div element is obsolete. Use CSS instead.
From line 20, column 1; to line 20, column 32
↩↩<body>↩↩<div id="header" align="center">↩↩<scr

[ More Info ]

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

Sat, Feb 28, 2015 5:49 pm

Setting span to be the width of a div

I wanted to display the output of a program I ran at a shell prompt on a Linux system with HTML code rather than a screen shot. I wanted the output to look like the following with the black background on the header line for the columns to extend across the width of the div I used to enclose the HTML code for the display of the output:

Linux Network Bandwidth Monitor $Revision: 1.3 $ on localhost.localdomain

   Interface    Received(Kbps) Transmit(Kbps)     Total(Kbps)
      enp1s4           26.621         960.960         987.581
          lo            0.000           0.000           0.000

         All           26.621         960.960         987.581

System uptime: 5 days 5 hours 41 minutes and 2 seconds

I started the display with <div><pre> and ended it with </pre></div>. When I tried enclosing it within a div tag, the W3C Markup Validation Service complained that the div wasn't allowed where I had placed it within the surrounding pre tags, so I tried the following to stretch the span to the length of the div:

<span style="background-color: black; color: white; width: 100%">

But it produced the following:

Linux Network Bandwidth Monitor $Revision: 1.3 $ on localhost.localdomain

   Interface    Received(Kbps) Transmit(Kbps)     Total(Kbps)
      enp1s4           26.621         960.960         987.581
          lo            0.000           0.000           0.000

         All           26.621         960.960         987.581

System uptime: 5 days 5 hours 41 minutes and 2 seconds

The reason it didn't work was because by default <span> is an inline element, which means, it does not have a width or height. So setting the CSS attributes width and height on <span> will not work. I was able to get it to work by following the tip at How to Create a Fixed Width Span in HTML/CSS?:

In order to give a height and width to a span, you have to convert it to a block level element. Setting the style as “display: inline-block” will make it a block element with width and height, still displaying as inline element.

When I used the following CSS, I got the result I wanted:

<span style="background-color: black; color: white; display: inline-block; width: 100%"> Interface Received(Kbps) Transmit(Kbps) Total(Kbps)</span>

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

Once You Know, You Newegg AliExpress by Alibaba.com

Shop Amazon Local - Subscribe to Deals in Your Neighborhood

Valid HTML 4.01 Transitional

Privacy Policy   Contact

Blosxom logo