LIACS Media Lab

	News

	Collaboration

	Media Projects

	DevNotes
		Audio/Video
		Graphics
		Internet
		Prog. Lang.
		Tips/Misc.

	BetaWorks
		Magic Video Project
		ImageScape
		LML Website(NEW)

	Research
		Content Based Retrieval
		Interactive Video
		Speech Interfaces
		Virtual Studio

	People

	Archive

	HTML Notes: Positioning Text and Images

	by: Staff (14 Jul 2011)

	Some examples of using layers and div elements to position images and text on a webpage

	Positioning Text and Images in HTML <html> <head> <title>My Homepage</title> </head> <body> <!-- When the mouse floats above a link, make the text red --> <style type="text/css"> a {text-decoration:none;} a:hover {color: red; text-decoration: none; font-weight: none } </style> <!-- The two img statements below place images at exact locations within the browser --> <!-- TOP:5px means 5 pixels from the top of the browser window. --> <!-- LEFT:5px means 5 pixels from the left of the browser window. --> <img STYLE="position:absolute;TOP:5px;LEFT:5px" src="myimage.jpg"> <img STYLE="position:absolute;TOP:140px;LEFT:300px" src="mybutton.gif"> <!-- The statement below places a transparent gif image to allow a weblink on the page --> <!-- border:1 means show a border around the image. border:0 means don't show a border --> <a href="home.html"><img STYLE="border:1px solid rgb(250,0,0);position:absolute;TOP:65px;LEFT:60px" src="transparent.gif" width=120 height=50></a> <!-- The statement below places a text weblink on an exact location --> <div style="position:absolute; top:140px; left:100px; width:600px; height:25px"> <span style="font-size:20px;font-family:arial;color:#4444FF;"> <a href="contact.html">Contact</a> </span> </div> <!-- The statement below places text at an exact location within a bounding box --> <!-- border:1px means 1 pixel wide border; border:0px means no border shown --> <div style="border:1px solid rgb(0,0,0);position:absolute; top:250px; left:100px; width:400px; height:160px"> <span style="font-size:16px;font-family:times;color:#444444;"> This is some random text on ranking the web which is merely a placeholder for other text. </span> </font> </div> </body> </html>

Media Lab Overview

LIACS Homepage

MM Conf

ACM Multimedia

ACM ICMR

IAPR ICPR

Science Direct

IEEE Library

LIACS Publications

ACM Digital Library