PDA

View Full Version : Resolved Positioning Image



Kscriptz
Feb 9th, 2010, 11:39 PM
I'm trying to position the image that is currently on the left side of the page so that it is under the top header image and between the two paragraphs so that it looks like a separator.

Here's the code that I have. Any suggestions?

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>
Positioning an image with absolute
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="head">
<img src="puppy07.jpg" alt="puppyheader" width="800" height="100" />
</div>
<p>
This paragraph should be centered. It will remain centered until the css style sheet is

manipulated so that the paragraph will be aligned in a different format. This is just a

bunch of meaningless words making no sense whatsoever in order to fill up the column of

the page.
</p>

<div class="para">
This paragraph should be centered. It will remain centered until the css style sheet is

manipulated so that the paragraph will be aligned in a different format. This is just a

bunch of meaningless words making no sense whatsoever in order to fill up the column of

the page.
</div>

<div class="centdiv">
<img src="puppy07.jpg" alt="puppyheader" width="5" height="600" />
</div>
</body>
</html>


css

.head
{
position:absolute;
margin-top:50px;
margin-left:100px;
}

p
{
position:absolute;
width:300px;
margin-top:200px;
margin-left:100px;
margin-right:600px;
}

.para
{
position:absolute;
width:300px;
margin-top:200px;
margin-left:600px;
margin-right:200px;
}
.centdiv
{
margin-left:auto;
margin-right:auto;

}

Kscriptz
Feb 10th, 2010, 12:09 AM
Resolved with the following code:

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>
Positioning an image with absolute
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="head">
<img src="puppy07.jpg" alt="puppyheader" width="800" height="100" />
</div>
<p>
This paragraph should be centered. It will remain centered until the css style sheet is

manipulated so that the paragraph will be aligned in a different format. This is just a

bunch of meaningless words making no sense whatsoever in order to fill up the column of

the page.
</p>

<div class="para">
This paragraph should be centered. It will remain centered until the css style sheet is

manipulated so that the paragraph will be aligned in a different format. This is just a

bunch of meaningless words making no sense whatsoever in order to fill up the column of

the page.
</div>

<div id="centdiv">
<img src="puppy07.jpg" alt="puppyheader" width="5" height="600" />
</div>
</body>
</html>


css

#head
{
position:absolute;
margin-top:50px;
margin-left:100px;
}

p
{
position:absolute;
width:300px;
margin-top:200px;
margin-left:100px;
margin-right:600px;
}

.para
{
position:absolute;
width:300px;
margin-top:200px;
margin-left:600px;
margin-right:200px;
}
#centdiv
{
position:absolute;
margin-top:155px;
margin-left:490px;


}

harrierdh
Feb 10th, 2010, 12:20 AM
Kscriptz,
It is a very bad idea to use margins for positioning. I'm not a big fan of using position absolute, but it is a valid technique. Putting margin: auto on an absolutely positioned item will have no effect.

Since you are positioning absolute, Do it for paragraph divider too. Even if you had gotten margin auto to work, the divider would have moved around over top of your paragraphs. This may give you a nudge. Fully tested.



<style>
* {
margin: 0;
padding: 0;
}
.head
{
position:absolute;
top:50px;
left:100px;
}
.para1
{
position:absolute;
width:300px;
top:200px;
left:100px;
}
.para2
{
position:absolute;
width:300px;
top:200px;
left:600px;
}
.centdiv {
position: absolute;
top:152px;
left:490px;
}
</style>
<div class="head">
<img src="CAP1.jpg" alt="puppyheader" width="800" height="100" />
</div>
<p class="para1">
This paragraph should be centered. It will remain centered until the css style sheet is
manipulated so that the paragraph will be aligned in a different format. This is just a
bunch of meaningless words making no sense whatsoever in order to fill up the column of
the page.
</p>
<p class="para2">
This paragraph should be centered. It will remain centered until the css style sheet is
manipulated so that the paragraph will be aligned in a different format. This is just a
bunch of meaningless words making no sense whatsoever in order to fill up the column of
the page.
</p>
<div class="centdiv">
<img src="CAP1.jpg" alt="puppyheader" width="5" height="600" />
</div>