HTML Forum

**david7287** · 06-28-2005, 04:28 PM

Ok i use dreamweaver as my editing program and i chose which size i think looks best. But the problem is that the font that appears on my webpage in the browser window is way bigger than the font size in dreamweaver. How can i get my font smaller!!??

Also i would like to know how to overlap text over images like this web site does.

www.killswitchengage.com

As you can see, the second page has text that overlaps the graphic on thhe left....How do you do that!!!???

**The_Anomaly** · 06-28-2005, 04:33 PM

Its probably the text size in your browser. In the browser go to view -> text size...then adjust accordingly. But if your using a default text size and it seems to big with your browser you have to think people viewing your page are using the default size. You should probably adjust the text in dreamweaver to something smaller.

To overlap pictures and text you need to use CSS and absolute positioning. I'm not sure if this is the only way to do it but it works.

**david7287** · 06-29-2005, 01:55 AM

alright thanks that helps a lot but what exactly do i do to use the absolut positioning?

**fancymoustache** · 06-29-2005, 11:10 AM

Since you're using Dreamweaver, you'll have to use some html for this, otherwise I don't know what to tell you. Here is an example of absolute positioning:

Code:

<!--Goes in style.css-->
#block {
	position:absolute;
	top:50px;
	left:50px;
	width:100px;
	height:100px;
	background-color:#000000;
}

#photo {
	position:absolute;
	top:200px;
	left:50px;
	width:100px;
	height:100px;
}

#text1 {
	position:absolute;
	top:75px;
	left:75px;
	color:#00FF00;
}

#text2 {
	position:absolute;
	top:225px;
	left:75px;
	color:#00FF00;
}

HTML Code:

<!--Goes in example.html-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="imagetoolbar" content="no">
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <link rel="stylesheet" href="style.css" TYPE="text/css">
  <title>Example of absolute positioning</title>
 </head>
 <body>
  <!--Block Example-->
  <div id="block"></div>
  <div id="text1">Example</div>
  <!--Photo Example-->
  <div id="photo"><img src="whatever.gif" border="0" height="100" width="100" /></div>
  <div id="text2">Example</div>
 </body>
</html>

A good link to learn about this kind of stuff can be found at http://webmonkey.wired.com/webmonkey...tutorial1.html or for positioning, specifically, http://webmonkey.wired.com/webmonkey/98/15/index4a.html

Hope that helps you,
Micah

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!