Jump to content


Photo

HTML Noob - cant figure out <div> tags


  • Please log in to reply
3 replies to this topic

#1 Phear46

Phear46

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts

Posted 29 April 2013 - 01:01 PM

	<b>Enroll a student:</b>

<div id="content" style="width:100%;">
	<form name="enroll" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
	
	<div name="user_info" style="background-color:#f0f0f0;height:35px;width:100%;">
		<div name="first_name" style="background-color:#ff0000;height:35px;width:20%;float:left;">
			First Name:<input type="text" name="firstname" size="8">
		</div>
		<div name="surname" style="background-color:#00ff00;height:35px;width:20%;float:left;">
			Surname:<input type="text" name="surname" size="8">
		</div>
		<div name="dob" style="background-color:#0000ff;height:35px;width:20%;float:left;">
			D.O.B:<input type="text" name="dob" size="8">
		</div>
	</div>
		<br>
	<div name="class_info" style="width:100%;">
		<div name="class_info_header" style="text-align:left;width:100%;">
		Class:
		</div>

		<div name="class_col_1" style="height:100px;width:50%;float:left;">
			<li><input type="checkbox" name="class[]" value="english">English<br>
			<li><input type="checkbox" name="class[]" value="maths">Maths<br>
			<li><input type="checkbox" name="class[]" value="science">Science<br>
			<li><input type="checkbox" name="class[]" value="sports">Sports<br>
		</div>

		<div name="class_col_2" style="background-color:#ff0000;height:100px;width:50%;float:left;">
			<li><input type="checkbox" name="class[]" value="history">History<br>
			<li><input type="checkbox" name="class[]" value="geography">Geography<br>
			<li><input type="checkbox" name="class[]" value="ict">ICT<br>
		</div>

		<div name="submit_button" style="background-color:#ababab;text-align:left;width:100%;">
			<input type="submit" name="enrollsubmit" value="Enroll!">
		</div>
	</div>

	</form>
</div>

Can anyone tell me why this doesnt work? im making a simple php script but i just wanted to lay it out nice first. I cant get the button to center, and also i cant see why the whole class_info div is inheriting the colour of submit_button div.

 

Im lost!



#2 Jessica

Jessica

    This is not my name.

  • Gurus
  • 8,982 posts
  • LocationDallas, TX
  • Age:26

Posted 29 April 2013 - 06:58 PM

Move your styles into a css file instead of doing them inline, and use a tool like Firebug to debug. I don't see anything in there about centering a button.
My goal in replying to posts is to help you become a better programmer, including learning how to debug your own code and research problems. For that reason, rather than posting the solution, I reply with tips and hints on how to find the solution yourself. See below for useful links when you get stuck.

How to Get Good Help: How to Ask Questions | Don't be a help vampire
Debugging Your Code: Debugging your SQL | What does a php function do? | What does a term mean? | Don't see any errors?
Things You Should Do: Normalize Your Data | use print_r() or var_dump()
Lulz: "Functions should not have side effects." - trq

Please take a look at my new PHP/Web Dev blog: The Web Mason - Thanks!!

#3 InoBB

InoBB

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts

Posted 30 April 2013 - 08:00 PM

try this

set margins for the button CSS: 

#buttonid {
    margin-left: auto;
    margin-right: auto;
    }

This should make it auto set the left and right spacing of the button, thus making it center.

 

 

Edit: Sorry double post, someone can delete please?


Edited by InoBB, 30 April 2013 - 08:06 PM.


#4 InoBB

InoBB

    Advanced Member

  • Members
  • PipPipPip
  • 35 posts

Posted 30 April 2013 - 08:06 PM

Use CSS margins to center the button:

#buttonid {
    margin-left: auto;
    margin-right: auto;
    background-color: #ababab;
    }

You can change from input to button with html5 and just call an id of the specified CSS tag you want it to appear with:

<button type='submit' name='enrollsubmit' id='buttonid'>Enroll!</button>

This should center the button once it auto sets left and right margins.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com