Jump to content


Photo

HTML Noob - cant figure out <div> tags


  • Please log in to reply
4 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.



#5 noahwilson

noahwilson

    Member

  • Members
  • PipPip
  • 15 posts

Posted 08 May 2013 - 09:17 AM

This topic really also helpful for me thanks to all of you for sharing your feedback and suggestion.

thanks.


if you need International Moving Companies and looking best relocation services to Moving To Europe just contact to Australian vanlines.





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