Odd Graphic and Text Combinations - HTML

You can also use tables to combine text and graphics in nonstandard layouts. For example, look at the header. The header graphic is actually several pieces.

Note:The buttons in the page’s upper-right are contained in separate table cells for a variety of reasons—the most notable is to provide navigation using separate elements while still providing a cohesive graphic.

Presenting graphics and text in a nonstandard format.

Presenting graphics and text in a nonstandard format.

The various pieces of the header graphic.

The various pieces of the header graphic.

A table with no padding and no spacing is used to put the pieces back together into a complete image while allowing text to flow to the right of the face portion. You can see the various pieces and the text in the table layout..

The completed layout in the table.

The completed layout in the table.

Code for this completed header is shown here:

Using this technique you can wrap text and graphics around each other in a variety of ways. For example, if the graphic used in the preceding example descended on the right as well, you could use three columns—pieces of the graphic in the first and third, text in the middle.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics