How to center a poll on website?

Mike Anthony

Solid State Member
Messages
15
Location
United States
EDIT:

This is what I have, and I cannot figure out how to center it on my webpage (as a whole without distorting it). Any ideas?
Code:
 <div id="container">
			<div id="left">
				<div id="poll-container">
					<h3>GOP Poll</h3>
					<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
						<p>Choose your favorite GOP candidate:</p><p>
						<input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'> option1</label><br />
						<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'> option2</label><br />
						<input type="radio" name="poll" value="opt3" id="opt3" /><label for='opt3'> option3</label><br />
						<input type="radio" name="poll" value="opt4" id="opt4" /><label for='opt4'> option4</label><br />
						<input type="submit" value="Vote →" /></p>
					</form>
				</div>
			</div>
		</div>
 
Last edited:
Hi,

Can you post your html and css so we can see what you are writen? Then we can work on a fix for you.
 
I'll get that to you after work today.

I don't have any CSS written yet, just background-color:.

I have several different div elements making up the poll. Like the background of it, the question, the 4 different choices, the dots for selecting your answer. I just need to find out if there is a way to move that whole group as like a block without changing the position of all the elements within the poll.
 
At the start of the poll's opening div put the html opening center. At the very end of the poll close it. It's going to stack it so watch how it does it and see if that's what you want.
 
Hi,

Are you using a WISIWIG program to help you create this site, because you divs look like they are made from a list, not from names that you made up?
 
At the start of the poll's opening div put the html opening center. At the very end of the poll close it. It's going to stack it so watch how it does it and see if that's what you want.

I tried that, it didn't work.

Hi,

Are you using a WISIWIG program to help you create this site, because you divs look like they are made from a list, not from names that you made up?

I am using dreamweaver. I got the layout for the poll off a generator online, then studied the code and changed it to better fit what I wanted.

Although I think I found a way to make a poll a different way.
 
Let me help take a look at my poll ----- lol, take a look at my poll, sorry the 13 year old boy in me is acting out again!

J & L Custom PC Poll

Here is my code

Code:
<div class="content"><center><form method="post" action="http://poll.pollcode.com/3490"><table border=0 width=401 bgcolor="EEEEEE" cellspacing=2 cellpadding=0><tr><td colspan=2><font face="Verdana" size=-1 color="000000"><b>What are you willing to spend on a new PC?</b></font></td></tr><tr><td width=22><input type=radio name=answer value="1" id="answer1"></td><td width="373"><font face="Verdana" size=-1 color="000000"><label for="answer1">$200 - $400</label></font></td></tr><tr><td width=22><input type=radio name=answer value="2" id="answer2"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer2">$400 - $600</label></font></td></tr><tr><td width=22><input type=radio name=answer value="3" id="answer3"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer3">$600 - $800</label></font></td></tr><tr><td width=22><input type=radio name=answer value="4" id="answer4"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer4">$800 - $1000</label></font></td></tr><tr><td width=22><input type=radio name=answer value="5" id="answer5"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer5">$1000 - $1200</label></font></td></tr><tr><td width=22><input type=radio name=answer value="6" id="answer6"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer6">$1200 - $1400</label></font></td></tr><tr><td width=22><input type=radio name=answer value="7" id="answer7"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer7">$1400 - $1800</label></font></td></tr><tr><td width=22><input type=radio name=answer value="8" id="answer8"></td><td><font face="Verdana" size=-1 color="000000"><label for="answer8">$1800 or more</label></font></td></tr><tr><td colspan=2><center><input type=submit value="Vote">  <input type=submit name=view value="View"></center></td></tr><tr><td colspan=2 align=right><font face="Verdana" size=-2 color="black">pollcode.com <a href=http://pollcode.com/>free polls</a> </font></td></tr></table></form>
</center>

</div>


---------- Post added at 11:15 PM ---------- Previous post was at 11:12 PM ----------

EDIT:

This is what I have, and I cannot figure out how to center it on my webpage (as a whole without distorting it). Any ideas?
Code:
 <div id="container">
			<div id="left">
				<div id="poll-container">
					<h3>GOP Poll</h3>
					<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
						<p>Choose your favorite GOP candidate:</p><p>
						<input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'> option1</label><br />
						<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'> option2</label><br />
						<input type="radio" name="poll" value="opt3" id="opt3" /><label for='opt3'> option3</label><br />
						<input type="radio" name="poll" value="opt4" id="opt4" /><label for='opt4'> option4</label><br />
						<input type="submit" value="Vote →" /></p>
					</form>
				</div>
			</div>
		</div>

Here is your code and i fixed it

Code:
<div id="container">
			<div id="center">
				<div id="poll-container">
					<h3>GOP Poll</h3>
					<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
						<p align="center">Choose your favorite GOP candidate:</p><p align="center">
						<input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'> option1</label><br />
						<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'> option2</label><br />
						<input type="radio" name="poll" value="opt3" id="opt3" /><label for='opt3'> option3</label><br />
						<input type="radio" name="poll" value="opt4" id="opt4" /><label for='opt4'> option4</label><br />
						<input type="submit" value="Vote →" /></p>
					</form>
				</div>
			</div>
		</div>


---------- Post added at 11:16 PM ---------- Previous post was at 11:15 PM ----------

I miss read your post you want to move it and leave the alignment intact but center a sa whole..........let me fix that one moment.


Ok so in order to fix the centering without messing with the format, its a bit of a trick!

You need to wrap the code inside a apdiv tag that is centered and then center a tag within it and place your code.

Code:
<style type="text/css">
#apDiv1 {
	position:relative;
	width:293px;
	height:314px;
	z-index:1;
	top: 136px;
	margin: auto;
}
#apDiv2 {
	position:relative;
	width:221px;
	height:249px;
	z-index:2;
	margin: auto;
}
</style>
</head>

<body>
   <div id="apDiv1"><div id="apDiv2"><h3>GOP Poll</h3>
					<form id='poll' action="poll.php" method="post" accept-charset="utf-8">
						<p>Choose your favorite GOP candidate:</p><p>
						<input type="radio" name="poll" value="opt1" id="opt1" /><label for='opt1'> option1</label><br />
						<input type="radio" name="poll" value="opt2" id="opt2" /><label for='opt2'> option2</label><br />
						<input type="radio" name="poll" value="opt3" id="opt3" /><label for='opt3'> option3</label><br />
						<input type="radio" name="poll" value="opt4" id="opt4" /><label for='opt4'> option4</label><br />
						<input type="submit" value="Vote →" /></p>
					</form>
 </div>
 </div>

you will need to rename the apdiv elements to match the number or lettering you use in your code.

If this is not enough of an explanation let me know

webmaster@jlcustompc.com

you can take a look at what it would look like live here

http://www.jlcustompc.com/testpollforcomputerforums.php
 
Back
Top Bottom