I have spent some time creating a page which requires quite specific positioning of elements and I’m nearly there. I just want to move the yellow boxes (divs) next to the A, B, C and D down about 8 or 9 px but cannot fathom what I need to do. The page is at http://gandalf458.co.uk/quiz/questions.php
Thanks guys
You know, what you might want to do instead is pull the images up.
to the images, after float: left, try adding
margin-top: -7px;
or so. Adjust as needed.
The use of absolute and relative positioning is not working on this page.
I strongly recommend that you rethink your design strategy altogether.
Give me an hour or so and I’ll try to work up a different structure (without duplicate IDs).
EDIT:
It would be helpful if you would indicate where the php calls are taking place on your HTML page, perhaps by surrounding them with comments such as:
<!-- BEGIN filename.php INCLUDE –>
<?php … >
<!-- END filename.php INCLUDE –>
(Sorry, I don’t know of another way to spot them. You can always delete the comments later.)
[FONT=Verdana]gandalf458,
This demo page represents a fairly dramatic change in page structure. This is not plug-n-play insertable into your overall site, of course. But, since you are still in the developing stage, I thought you might enjoy a different approach.
I changed all ids to classes. It is best to use ids only where an object needs to be identified uniquely such as in on-page links (fragment ids), or JavaScript calls, etc.
The divs “answer1” thru “answer4” have been deleted. One layer was unnecessary: either “answer#” or “a-text”; I opted to delete “answer#” and move the red ball image inside “a-text”. If you need ids for JavaScript or php, you can easily reinsert them by changing the four appearances of “a-text” to “a-text-1” thru “-4” or replacing them with the “answer1” thru “4” and making the appropriate changes on the css sheet… or you could just add id’s for targeting purposes and leave the css alone.
The entire yellow answer bar is clickable, not just the text.
The page no longer triggers a horizontal scroll bar in a browser before narrowing the viewport to the width of the page.
Your design uses a fixed height page. However, there is enough room for one of the lines of answers to wrap before the text overflows the page. Notice that the red ball remains vertically centered to the left of the answer. The text and red ball remain centered in the yellow bar if the user zooms his text larger, too.
With this structure, changing to an extendable height page would be relatively easy.
I did not touch the home page code nor the summary page stuff. I suspect it will have to be changed if you adopt this layout strategy.
Tested in IE 8, IE 9, FF 18, and Chrome 24.
Your page could also use an <h1> tag with a title. Perhaps an image replacement technique would work for you. Think about it.
Hope this is of some value.
body {
background:#5E8AC7;
font:bold 22px Arial, Helvetica, sans-serif;
padding:0;
margin:0;
}
a {
color:#000;
text-decoration:none;
}
.quiz {
width:600px;
margin:20px auto;
}
.header {
height:102px;
background:url(images/heading.jpg) no-repeat;
}
/* home page */
.p1main {
height: 471px;
background: url(images/loaddata.jpg) no-repeat;
}
.btn-start {
position: relative;
top: 305px;
left: 220px;
width: 160px;
height: 50px;
font-size: 16px;
}
.btn-start a {
display: block;
padding: 10px;
color: #F14F4D;
font-size: 91%;
}
/* question page */
.p2main {
height:471px;
background: url(images/start.jpg) no-repeat;
}
.question {
position:relative;
height:142px;
}
.q-num {
color:#fff;
font-size:120%;
position:absolute;
top:82px;
left:101px;
}
.q-text {
padding:41px 0 0 230px;
}
.answers {
font-size:80%;
padding-left:177px;
}
.answers img {
position:absolute;
top:50%;
right:100%;
margin-top:-26px;
margin-right:-2px;
}
.a-text {
position:relative;
margin:30px 0; /* space between answers */
}
.a-text a {
background:#FEF650;
display:block;
padding:8px 0 11px 10px; /* space around text within yellow bar */
}
/* summary page */
.p3main {
height: 471px;
background: url(images/summary.jpg) no-repeat;
}
/* review page */
.p4main {
height: 471px;
background: url(images/review.jpg) no-repeat;
}
/* end review page*/
.p5main {
height: 471px;
background: url(images/endreview.jpg) no-repeat;
}
/* finish page */
.p6main {
height: 471px;
background: url(images/finish.jpg) no-repeat;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fabulous Frogs</title>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="quiz">
<div class="header"></div>
<div class="p2main">
<div class="question">
<div class="q-num">1</div>
<div class="q-text">What type of animal is a frog?</div>
</div>
<div class="answers">
<div class="a-text">
<img src="images/A.gif" width="52" height="52" alt="A">
<a href="#">inanimate</a>
</div>
<div class="a-text">
<img src="images/B.gif" width="52" height="52" alt="B">
<a href="#">octagon</a>
</div>
<div class="a-text">
<img src="images/C.gif" width="52" height="52" alt="C">
<a href="#">vertebrate vertebrate vertebrate vertebrate vertebrate vertebrate </a>
</div>
<div class="a-text">
<img src="images/D.gif" width="52" height="52" alt="D">
<a href="#">primate</a>
</div>
</div>
</div>
</div>
</body>
</html>
[/FONT]
Ronpat, many thanks for this. I did wonder whether I was going about things the right way. I’ve just got up and seen your reply and will play with it later. I can add the PHP later.
[FONT=Verdana]errata:
NOTE: the following change makes NO difference in the behavior of the page. It is purely for clarity in the css. I noticed it after I had posted the code. Consider it useful, but optional 
.
Change these two classes by moving .answers {} below .a-text {}, then renaming .answers to .a-text
FROM:
.answers img {
position:absolute;
top:50%;
right:100%;
margin-top:-26px;
margin-right:-2px;
}
.a-text {
position:relative;
margin:30px 0; /* space between answers */
}
TO:
.a-text {
position:relative;
margin:30px 0; /* space between answers */
}
.a-text img {
position:absolute;
top:50%;
right:100%;
margin-top:-26px;
margin-right:-2px;
}
As you read from top to bottom, you can see the relationship between .a-text {position:relative} and .a-text img {position:absolute} more easily. It follows the flow of the HTML better, too.
Please do let me know how it works out for you. Especially if you run into any problems.[/FONT]
Thanks Ronpat. It’s coming along nicely now - just adjusting the PHP logic…