PDA

Click to See Complete Forum and Search --> : Simple HTML Question

cha
12-05-2003, 09:21 AM
I want to be able to place questions and pictures and text anywhere I want on the screen, not just along the left side or at the top. Example: What is the shortest HTML code that will display "A" 1.2 inches below and 3.4 inches to the right of the upper left hand corner of the screen, and also display "B" 5.6 inches below and 6.7 inches to the right of the upper left hand corner?

Charlie
chvol@aol.com
Daria
12-05-2003, 09:24 AM
CSS is the way to go. Check CSS forum, there are plenty of topics that should help you out.
cha
12-05-2003, 09:29 AM
You didn't answer the question. What would the HTML code be?
Daria
12-05-2003, 09:31 AM
Oh, sure. You are welcome.
Gimme a min.
Daria
12-05-2003, 09:35 AM
<html>
<head>
<style type="text/css">
<!--
#card {
border: 1px solid #000000;
width: 100px;
height: 50px;
left: 275px;
top: 120px;
position: absolute; clip: rect( )
}

#more {
border: 1px solid #000000;
width: 50px;
height: 100px;
left: 20px;
top: 320px;
position: absolute; clip: rect( );
}

-->
</style>
</head>
<body>
<div id="card">card content</div>
<div id="more">more content</div>
</body>
</html>



it doesn't have your positioning - just change left: and top: to the number of pixels you like, experiment.
ray326
12-05-2003, 09:59 AM
Originally posted by cha
I want to be able to place questions and pictures and text anywhere I want on the screen, not just along the left side or at the top. Example: What is the shortest HTML code that will display "A" 1.2 inches below and 3.4 inches to the right of the upper left hand corner of the screen, and also display "B" 5.6 inches below and 6.7 inches to the right of the upper left hand corner?

Charlie
chvol@aol.com
As Daria said, you need to use CSS absolute positioning to do that kind of thing BUT you CAN'T do what you stated because you don't know "inches" on your viewers' browsers.
Paul Jr
12-05-2003, 02:33 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head><title>Example></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type="text/css">
<!--
#A {
position:absolute;
top:1.2in;
left:3.4in;
border:1px solid #000;
width:3em;
height:2em;
}

#B {
position:absolute;
top:5.6in;
left:6.7in;
border:1px solid #000;
width:3em;
height:2em;
}
-->
</style>
</head>

<body>

<div id="A">Hello.</div>
<div id="B">Hello Again.</div>

</body>
</html>