Search Posts

HTML – flytte tekst rundt om billeder

Problem: Få tekst til at flyde rundt om et billede
http://www.echoecho.com/htmlimages08.htm

Løsning 1)
add align="left" or align="right" to the <img> tag

<img src="rainbow.gif"

align="left">

bla bla bla bla bla

bla bla bla bla bla

bla bla bla bla bla

<img src="rainbow.gif"

align="right">

bla bla bla bla bla

bla bla bla bla bla

bla bla bla bla bla

Løsning 2)
enter the image and text in an invisible table. Entering text in one column and the image in another

TABLES:

Using tables to divide the page into different sections is an extremely powerful tool.

Almost all major sites on the web are using invisible tables to layout the pages.

The most important layout aspects that can be done with tables are:

  • Dividing the page into separate sections.
    An invisible table is excellent for this purpose.

  • Creating menus.
    Typically with one color for the header and another for the links following in the next lines.

  • Adding interactive form fields.
    Typically a gray area containing a search option.

  • Creating fast loading headers for the page.
    A colored table with a text on it loads like a bullet compared to even a small banner.

  • Easy alignment of images that have been cut into smaller pieces.

  • A simple way to allow text to be written in two or more columns next to each other.

The importance of using tables for these layout purposes can't be overrated. However there are a few things to keep in mind when doing so.

Most important is, that the content of a table is not shown until the entire table is loaded. If you have extremely long pages, you should divide it into two or more tables – allowing the user to start reading the upper content while the rest of the page is loading.

The following properties can be added to the <table> tag:

Property
Description
align=
left
center
right
left align table
center table
right align table
background=filename
image inserted behind the table
bgcolor=#rrggbb
background color
border=n
border thickness
bordercolor=#rrggbb
border color
bordercolordark=#rrggbb
border shadow
cellpadding=n
distance between cell and content
cellspacing=n
space between cells
nowrap
protects agains linebreaks, even though the content might be wider than the browser window.
frame=
void,
above,
below,
lhs,
rhs,
hsides,
vsides,
box
removes all outer borders
shows border on top of table
shows border on bottom of table
shows border on left side of table
shows border on right side of table
shows border on both horizontal sides
shows border on both vertical sides
shows border on all sides of table
valign=
top
bottom
aligns content to top of cells
aligns content to bottom of cells
width=
n,n
n,n%
minimum width of table in pixels
minimum width in percentage of window size

Note:
Table properties are set for the entire table.
If certain properties are set for single cells, they will have higher priority than the settings for the table as a whole.
external image p.gif

These settings can be added to both <tr> and <td> tags.

PROPERTY
DESCRIPTION
align=
left
right
center
aligns content to the left of cells
aligns content to the right of cells
aligns content to the center of the cells
background=filename
sets a background image for the cells
bgcolor=#rrggbb
sets a background color for the cells
bordercolor=#rrggbb
sets color for the border of cells
bordercolordark=#rrggbb
sets color for the border shadow of cells
valign=
top
middle
bottom
aligns to the top of cells
aligns to the middle of the cells
aligns to the bottom of cells
width=
n
n%
specify a minimum width for the cells in pixels
specify a minimum width for the cells in percent of the table width
height=
n
n%
minimum height of cells in pixels
minimum height of cells in percentage of table height

These settings are only valid for <td> tags.

PROPERTY
DESCRIPTION
colspan=n
number of columns a cell should span
nowrap
protects agains linebreaks, even though the content
of a cell might be wider than the browser window
rowspan=n
number of rows a cell should span

Note:
Settings for columns(<td> tag) have higher priority than settings for rows(<tr> tag).

Settings for cells (<tr> or <td> tags) have higher priority than settings for the table as a whole(<table> tag).

external image mainborder.gif
HTML BASICS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifWHY LEARN HTML?
external image c.gifexternal image b.gif
external image a.gifTAGS
external image c.gifexternal image b.gif
external image a.gifPAGE STRUCTURE
external image c.gifexternal image b.gif
external image a.gifHEAD SECTION
external image c.gifexternal image b.gif
external image a.gifBODY SECTION
external image c.gifexternal image b.gif
external image a.gifHOW TO LEARN MORE
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML TEXT
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifBASEFONT
external image c.gifexternal image b.gif
external image a.gifFONT
external image c.gifexternal image b.gif
external image a.gifTEXT LINKS
external image c.gifexternal image b.gif
external image a.gifTEXT FORMAT
external image c.gifexternal image b.gif
external image a.gifTEXT SIZE
external image c.gifexternal image b.gif
external image a.gifTEXT LAYOUT
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML LISTS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifBULLETED LISTS
external image c.gifexternal image b.gif
external image a.gifNUMBERED LISTS
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML IMAGES
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifGIF&JPG IMAGES
external image c.gifexternal image b.gif
external image a.gifINSERTING IN HTML
external image c.gifexternal image b.gif
external image a.gifRESIZING
external image c.gifexternal image b.gif
external image a.gifBORDER AROUND
external image c.gifexternal image b.gif
external image a.gifALTERNATIVE TEXT
external image c.gifexternal image b.gif
external image a.gifSPACING AROUND
external image c.gifexternal image b.gif
external image a.gifALIGNMENT OF
external image c.gifexternal image b.gif
external image a.gifTEXT WRAPAROUND
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML LINKS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifHOW TO MAKE A LINK
external image c.gifexternal image b.gif
external image a.gifCOLORS ON TEXT LINKS
external image c.gifexternal image b.gif
external image a.gifLINK TARGETS
external image c.gifexternal image b.gif
external image a.gifNO UNDERLINE
external image c.gifexternal image b.gif
external image a.gifADVANCED TEXT LINKS
external image c.gifexternal image b.gif
external image a.gifIMAGE LINKS
external image c.gifexternal image b.gif
external image a.gifIMAGEMAPPING
external image c.gifexternal image b.gif
external image a.gifLINK WITHIN A PAGE
external image c.gifexternal image b.gif
external image a.gifLINKS IN FRAMESETS
external image c.gifexternal image b.gif
external image a.gifLINK TO NEW WINDOW
external image c.gifexternal image b.gif
external image a.gifLINK TO EMAIL
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML BACKGROUNDS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifBACKGROUND COLOR
external image c.gifexternal image b.gif
external image a.gifBACKGROUND IMAGE
external image c.gifexternal image b.gif
external image a.gifFIXED IMAGE
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML TABLES
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifBASIC TAGS
external image c.gifexternal image b.gif
external image a.gifTABLE TAGS
external image c.gifexternal image b.gif
external image a.gifROW/CELL TAGS
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML FRAMES
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifBASIC EXAMPLE
external image c.gifexternal image b.gif
external image a.gifCREATING A FRAMESET
external image c.gifexternal image b.gif
external image a.gifDEFAULT PAGES
external image c.gifexternal image b.gif
external image a.gifBORDERS
external image c.gifexternal image b.gif
external image a.gifRESIZEABLE WINDOWS
external image c.gifexternal image b.gif
external image a.gifSCROLLBARS
external image c.gifexternal image b.gif
external image a.gifLINKS WITHIN
external image c.gifexternal image b.gif
external image a.gifEXAMPLES
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML FORMS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifEXAMPLES
external image c.gifexternal image b.gif
external image a.gifCGI SCRIPTS
external image c.gifexternal image b.gif
external image a.gifTHE FORM TAG
external image c.gifexternal image b.gif
external image a.gifFORM FIELDS
external image c.gifexternal image b.gif
external image a.gif TEXT
external image c.gifexternal image b.gif
external image a.gif PASSWORD
external image c.gifexternal image b.gif
external image a.gif HIDDEN
external image c.gifexternal image b.gif
external image a.gif TEXT AREA
external image c.gifexternal image b.gif
external image a.gif CHECK BOX
external image c.gifexternal image b.gif
external image a.gif RADIO BUTTON
external image c.gifexternal image b.gif
external image a.gif DROP-DOWN MENU
external image c.gifexternal image b.gif
external image a.gif SUBMIT BUTTON
external image c.gifexternal image b.gif
external image a.gif RESET BUTTON
external image c.gifexternal image b.gif
external image a.gif IMAGE BUTTON
external image c.gifexternal image b.gif
external image a.gifQUICK REFERENCE
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML META TAGS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifSEARCH ENGINES
external image c.gifexternal image b.gif
external image a.gifAUTOLOAD PAGES
external image c.gifexternal image b.gif
external image a.gifRSACi CONTENT
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif

external image mainborder.gif
HTML HEXCOLORS
external image mainborder.gif
|| external image a.gifINTRODUCTION
external image c.gifexternal image b.gif
||

external image a.gifDECIMAL vs HEX
external image c.gifexternal image b.gif
external image a.gifRGB COLORS
external image c.gifexternal image b.gif
external image a.gifHEXADECIMAL RGB
external image c.gifexternal image b.gif
external image a.gif216 SAFE COLORS
external image c.gifexternal image b.gif
external image a.gifCONVERTING HEX-DEC
external image c.gifexternal image b.gif
external image a.gifNAMED COLORS
external image c.gifexternal image b.gif
external image a.gifCOLOR SAMPLES
external image c.gifexternal image b.gif
external image a.gifTAKE THE QUIZ!
external image c.gifexternal image b.gif
external image mainborder.gif
||

Tegn abonnement på

BioNyt Videnskabens Verden (www.bionyt.dk) er Danmarks ældste populærvidenskabelige tidsskrift for naturvidenskab. Det er det eneste blad af sin art i Danmark, som er helliget international forskning inden for livsvidenskaberne.

Bladet bringer aktuelle, spændende forskningsnyheder inden for biologi, medicin og andre naturvidenskabelige områder som f.eks. klimaændringer, nanoteknologi, partikelfysik, astronomi, seksualitet, biologiske våben, ecstasy, evolutionsbiologi, kloning, fedme, søvnforskning, muligheden for liv på mars, influenzaepidemier, livets opståen osv.

Artiklerne roses for at gøre vanskeligt stof forståeligt, uden at den videnskabelige holdbarhed tabes.

Leave a Reply