Jump to content

Really New to this CSS stuff


2old2learn?

Recommended Posts

Well, I've read the w3schools tutorials, and viewed some youtube tutorials..and I sort of getting a grasp of things..like this sample theme..In the body of the theme it asks the question for me...thanks...csstesting.jpgOOOps!...sorry test too small..so here is what it says..

Okay how do I get information to display here in the body..if I hit the Service Request links in the left column
That is the text in the body section of the theme...thanks..What I want it a form to display in the body...
Link to comment
Share on other sites

For the form to display in the body you need to put the HTML code in the <body> tag and inside the tag in which you want to be. CSS is only for the appearance of the page.example: Simple form

<body>   <div><!--this tag is optional>	<form>	   <input type="text" /> 	   <input type="submit" />	<form>  </div></body>

Link to comment
Share on other sites

For the form to display in the body you need to put the HTML code in the <body> tag and inside the tag in which you want to be. CSS is only for the appearance of the page.example: Simple form
<body>   <div><!--this tag is optional>	<form>	   <input type="text" /> 	   <input type="submit" />	<form>  </div></body>

Okay will give it a try thanks...Well not quite what I expected...it shows the form with clicking the link tab from the left column...example:link> Service Requests > form shows in body....
Link to comment
Share on other sites

Hey okay getting I think the hang of this I now have table boxes..now how do I import MySQL data into these boxes..???theme2p.jpgThanks..

Link to comment
Share on other sites

Okay update...I finally figure out how to insert my phpMySQL form into the css stylesheet..here is what it looks like for now...theme3h.jpgBut this is what I am having a hard time to figure out..how do I call say this form or even go back to the Main page(Home) link...and display text info and then maybe click SR's link again and return to form view..????

Link to comment
Share on other sites

??? you create 3 separate pages, home (usually index.php), sr.php, and records.php, which on each, will have the left navigation that links to these specific pages.To save reproducing the left nav manually on each page you could create a nav page with these link, BUT! without html, head, body opening and closing tags, just the html code to produce the navigation (ul,li, and a elements), then use <?phpinclude("leftnav.php");?>on the page wher the nav would be, then if you have to add, remove links, you only have to amend 1 page the leftnav page.

Link to comment
Share on other sites

??? you create 3 separate pages, home (usually index.php), sr.php, and records.php, which on each, will have the left navigation that links to these specific pages.To save reproducing the left nav manually on each page you could create a nav page with these link, BUT! without html, head, body opening and closing tags, just the html code to produce the navigation (ul,li, and a elements), then use <?phpinclude("leftnav.php");?>on the page wher the nav would be, then if you have to add, remove links, you only have to amend 1 page the leftnav page.
I think I understand what you are saying....
Link to comment
Share on other sites

??? you create 3 separate pages, home (usually index.php), sr.php, and records.php, which on each, will have the left navigation that links to these specific pages.To save reproducing the left nav manually on each page you could create a nav page with these link, BUT! without html, head, body opening and closing tags, just the html code to produce the navigation (ul,li, and a elements), then use <?phpinclude("leftnav.php");?>on the page wher the nav would be, then if you have to add, remove links, you only have to amend 1 page the leftnav page.
Okay I've created 3 pages(" index.php, index_sr.php, index_records.php " ) now the rest you are saying well...sorry it just went over my head not sure of what you mean..????
Link to comment
Share on other sites

in leftnav.php you will have code similar to below

<ul><li><a href="/"></a></li> <!-- "/" will take you to root directory which will cause it to look for specific files such as index.htm, index.html, index.php or even default.php--><li><a href="index_sr.php"></a></li><li><a href="index_records.php"></a></li></ul>

that is all you requirein other pages you will have something like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="wrapper"><div id="left"><?php include("leftnav.php"); ?></div><div id="content">your form code etc will be placed in here</div></div></body></html>

Because the menu is being inserted/included into the other page, it does not require <html><body> etc, because, it will use those from the page it is inserted to, all the styling for the menu can be placed in between the <head> </head> tags, as when created it will be treated as being entered manually within the html code of the page itself.

Link to comment
Share on other sites

in leftnav.php you will have code similar to below
<ul><li><a href="/"></a></li> <!-- "/" will take you to root directory which will cause it to look for specific files such as index.htm, index.html, index.php or even default.php--><li><a href="index_sr.php"></a></li><li><a href="index_records.php"></a></li></ul>

that is all you requirein other pages you will have something like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="wrapper"><div id="left"><?php include("leftnav.php"); ?></div><div id="content">your form code etc will be placed in here</div></div></body></html>

Because the menu is being inserted/included into the other page, it does not require <html><body> etc, because, it will use those from the page it is inserted to, all the styling for the menu can be placed in between the <head> </head> tags, as when created it will be treated as being entered manually within the html code of the page itself.

Well, I am not sure still of what your are explaining...sorry my bad...but the good news is that i got it working I sent you a "PM" ..also in the form it displays a error message..but I check the database and the file is inserted....strange..here is the code...
<html><head><link href="style.css" rel="stylesheet" type="text/css"></head><body><div id="container"><div id="header"></div><div id="leftnav"><!--OPEN MENU-->    <div id="menu">		 <h2>Menu</h2>	 <li><a href="http://www.xxxxxxxxxxxxxxxx.com/xxxxx/index.php" title="Home">Home</a>	 <li><a href="http://www.xxxxxxxxxxxxxxxx.com/xxxxx/index_sr.php" title="Service Requests">TWAL</a>	 <li><a href="http://www.xxxxxxxxxxxxxxxx.com/xxxxx/display.php" title="Records">Records</a></li>	 		  </div><!--CLOSE MENU--></div><div id="body"><div class="twal"><form action="insert.php" method="post"><center><table border="0"><center><caption>Tenant Work Authorization Log</caption></center></table></center><br><center><table class="space" border="1"> <tr align="right"><tr><td>SR Number:</td><td><input type="text" name="srnumber" /></td> <td>Tenant:</td><td><input type="text" name="tenant" /></td> <td>Tower:</td><td><input type="text" name="tower" /></td> <td>Floor:</td><td><input type="text" name="floor" /></td> <tr></tr> <tr><td>Job Description:</td><td><input type="text" name="job_description"></td> <td>Employee:</td><td><input type="text" name="employee"></td> <td>Labour Cost:</td><td><input type="text" name="labour_cost" /></td> <td>Material Cost:</td><td><input type="text" name="material_cost" /></td> </table></center> <center> <table class"space" border="1">  <tr><td>Supplier:</td><td><input type="text" name="supplier" /></td> <td>Date TWA Sent to Tenant:</td><td><input type="text" name="date_twa_sent_to_tenant" /></td> <td>Date TWA Approved:</td><td><input type="text" name="date_twa_approved" /></td>  <tr align="right"><td align="right">Date Parts Ordered:</td><td><input type="text" name="date_parts_ordered" /></td> <td>Date Job Completed:</td><td><input type="text" name="date_job_completed" /></td> <td>Date Billing Given to Accounting:</td><td>  <input type="text" name="date_billing_given_to_accounting" /></td></tr> </table> <center><table border="1"><center><caption>Office Use:</caption></center></table></center><br> <table border="1"> <td>Employee Comments:</td><td>  <textarea rows="5" cols="40" name="employee_comments"></textarea></td> <td>Managers Comments:</td><td>  <textarea rows="5" cols="40" name="managers_comments"></textarea></td> </table> </table></center><center> <input type="submit" /><br><br> </center> </form></div></div><div id="footer">2007-2011 Copyright Bill Juschko</div></body></html>

Didn't see anything..

Link to comment
Share on other sites

create 2 php files one h1.php the other h5.php, within h1.php add just <h1>This is included file h1.php with h1 header</h1> and nothing else.within h5.php add just <h5>This is included file h5.php with h5 header</h5> and nothing else.create another php page and call it mainPage.php. and add the following, <html><body><?php include("h1.php"); ?><?php include("h5.php"); ?></body></html>make sure all these files are in the same directory, Now open mainPage.php in browser, what you should see is the header text from h1.php and h5.php being displayed also.

Link to comment
Share on other sites

Here is my progress so far....theme4b.jpg
How can I get this center in the middle as you noticed..it is aligned="left"...would like it aligned="center" ??????
Link to comment
Share on other sites

use a outer container to surround everything on the page, usually called 'wrapper' give that a fixed width, and use margin:0 auto;<div id="wrapper"><div id="container">rest of html code....<div id="footer">2007-2011 Copyright Bill Juschko</div></div><!--end of wrapper -->#wrapper {width:960px; margin:0 auto;}

Link to comment
Share on other sites

use a outer container to surround everything on the page, usually called 'wrapper' give that a fixed width, and use margin:0 auto;<div id="wrapper"><div id="container">rest of html code....<div id="footer">2007-2011 Copyright Bill Juschko</div></div><!--end of wrapper -->#wrapper {width:960px; margin:0 auto;}
Are you saying like this
<div id="wrapper"><div id="container"><html><head>All the html code in between <div></head></html></div>

Can this also be done in the stylesheet???Here is my css file..

#container {width: 1050px;}#header {width: 1050px;height: 150px;background-image: url(http://www.teamcombatleague.com/tecicc/images/4806F1.jpg);border-bottom: 2px solid #000000;}#leftnav {float: left;width: 75px;height: 489px;background-color: #ff6633;border-right: 1px dashed #694717;}#body {width: 350px;height: 453px;}#footer {clear: both;background-color: #d1c0a7;} .twal { margin-top: 1px; padding: 0px 0px 0px 0px; border: 2px solid #d22929; background-color: #ffcc00; width: 965px; color: #000000  }  .box {   margin-top: 10px; padding: 1px 1px 1px 1px; background-color: #dddddd; border: 2px solid #d22929; width: 870px; color: #000000;  } h2 { font-size: 20px; color: #cc0000; padding: 10px; font-famil: verdana; }

Link to comment
Share on other sites

I really didn't want to do the whole page, but no like this

<div id="wrapper"><div id="container"><div id="header"></div><div id="leftnav"><!--OPEN MENU-->    <div id="menu">		 <h2>Menu</h2>	 <li><a href="http://www.teamcombatleague.com/tecicc/index.php" title="Home">Home</a>	 <li><a href="http://www.teamcombatleague.com/tecicc/index_sr.php" title="Service Requests">TWAL</a>	 <li><a href="http://www.teamcombatleague.com/tecicc/display.php" title="Records">Records</a></li>			  </div><!--CLOSE MENU--></div><div id="body"><div class="twal"><form action="insert.php" method="post"><center><table border="0"><center><caption>Tenant Work Authorization Log</caption></center></table></center><br><center><table class="space" border="1"><tr align="right"><tr><td>SR Number:</td><td><input type="text" name="srnumber" /></td><td>Tenant:</td><td><input type="text" name="tenant" /></td><td>Tower:</td><td><input type="text" name="tower" /></td><td>Floor:</td><td><input type="text" name="floor" /></td><tr></tr><tr><td>Job Description:</td><td><input type="text" name="job_description"></td><td>Employee:</td><td><input type="text" name="employee"></td><td>Labour Cost:</td><td><input type="text" name="labour_cost" /></td><td>Material Cost:</td><td><input type="text" name="material_cost" /></td></table></center><center><table class"space" border="1"><tr><td>Supplier:</td><td><input type="text" name="supplier" /></td><td>Date TWA Sent to Tenant:</td><td><input type="text" name="date_twa_sent_to_tenant" /></td><td>Date TWA Approved:</td><td><input type="text" name="date_twa_approved" /></td><tr align="right"><td align="right">Date Parts Ordered:</td><td><input type="text" name="date_parts_ordered" /></td><td>Date Job Completed:</td><td><input type="text" name="date_job_completed" /></td><td>Date Billing Given to Accounting:</td><td>  <input type="text" name="date_billing_given_to_accounting" /></td></tr></table><center><table border="1"><center><caption>Office Use:</caption></center></table></center><br><table border="1"><td>Employee Comments:</td><td>  <textarea rows="5" cols="40" name="employee_comments"></textarea></td><td>Managers Comments:</td><td>  <textarea rows="5" cols="40" name="managers_comments"></textarea></td></table></table></center><center><input type="submit" /><br><br></center></form></div></div><div id="footer">2007-2011 Copyright Bill Juschko</div></div><!--end of wrapper -->

and then, yes! add#wrapper {width:960px; margin:0 auto;}to your stylesheetNote: the smallest resolution screen to allow for would be 1024 res wide screen, and when you allow for browser scrollbars etc, the width usually used is 960px; but you can use your 1050px, but the user with this size screen will have to scroll horizontally to see the rest of the page.

Link to comment
Share on other sites

I really didn't want to do the whole page, but no like this
<div id="wrapper"><div id="container"><div id="header"></div><div id="leftnav"><!--OPEN MENU-->    <div id="menu">		 <h2>Menu</h2>	 <li><a href="http://www.xxxxxxxxxxxxxxxx. com/xxxxx/index.php" title="Home">Home</a>	 <li><a href="http://www.xxxxxxxxxxxxxxxx. com/xxxxx/index_sr.php" title="Service Requests">TWAL</a>	 <li><a href="http://www.xxxxxxxxxxxxxxxx. com/xxxxx/display.php" title="Records">Records</a></li>			  </div><!--CLOSE MENU--></div><div id="body"><div class="twal"><form action="insert.php" method="post"><center><table border="0"><center><caption>Tenant Work Authorization Log</caption></center></table></center><br><center><table class="space" border="1"><tr align="right"><tr><td>SR Number:</td><td><input type="text" name="srnumber" /></td><td>Tenant:</td><td><input type="text" name="tenant" /></td><td>Tower:</td><td><input type="text" name="tower" /></td><td>Floor:</td><td><input type="text" name="floor" /></td><tr></tr><tr><td>Job Description:</td><td><input type="text" name="job_description"></td><td>Employee:</td><td><input type="text" name="employee"></td><td>Labour Cost:</td><td><input type="text" name="labour_cost" /></td><td>Material Cost:</td><td><input type="text" name="material_cost" /></td></table></center><center><table class"space" border="1"><tr><td>Supplier:</td><td><input type="text" name="supplier" /></td><td>Date TWA Sent to Tenant:</td><td><input type="text" name="date_twa_sent_to_tenant" /></td><td>Date TWA Approved:</td><td><input type="text" name="date_twa_approved" /></td><tr align="right"><td align="right">Date Parts Ordered:</td><td><input type="text" name="date_parts_ordered" /></td><td>Date Job Completed:</td><td><input type="text" name="date_job_completed" /></td><td>Date Billing Given to Accounting:</td><td>  <input type="text" name="date_billing_given_to_accounting" /></td></tr></table><center><table border="1"><center><caption>Office Use:</caption></center></table></center><br><table border="1"><td>Employee Comments:</td><td>  <textarea rows="5" cols="40" name="employee_comments"></textarea></td><td>Managers Comments:</td><td>  <textarea rows="5" cols="40" name="managers_comments"></textarea></td></table></table></center><center><input type="submit" /><br><br></center></form></div></div><div id="footer">2007-2011 Copyright Bill Juschko</div></div><!--end of wrapper -->

and then, yes! add#wrapper {width:960px; margin:0 auto;}to your stylesheetNote: the smallest resolution screen to allow for would be 1024 res wide screen, and when you allow for browser scrollbars etc, the width usually used is 960px; but you can use your 1050px, but the user with this size screen will have to scroll horizontally to see the rest of the page.

I did this and nothing happened..
<html><head><link href="style.css" rel="stylesheet" type="text/css"></head><body><div id="wrapper"><div id="container"><div id="header"></div><div id="leftnav"><!--OPEN MENU-->    <div id="menu">

and ended it with </div>

Link to comment
Share on other sites

also replace<html>with<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
Ahhh, will do that once I get home from work...thanks..
Link to comment
Share on other sites

you are missing a closing </div> for container, add this at end with closing div tag for wrapper.
Okay corrected all the error's and now it is center..as far as screen size..doesn't matter this is just for work.." Intranet " I believe the term is ...sharing internally ...only...My next step will be making a login script but this discussion will move to the " SQL " & " Php " section..so this is how site theme's are done....nice...
Link to comment
Share on other sites

My style.css is this good for users monitor's 1024x728 ???

#wrapper {width: 900px;margin: 0 auto;}#container {width: 900px;}#header {width: 900px;height: 150px;position: relative;background-image: url(http://www.xxxxxxxxxxxxxxxxxxxx/xxxxxx/images/4806F1.jpg);border-bottom: 2px solid #000000;}#header a: {color: #ffffff;text-decoration: underline;font-weight: bold;font-family: Verdana;font-size: 14px;}#header  a:visited; {color: #000000;text-decoration: underline;font-weight: bold;}#header a:hover; {color: #cc0000;text-decoration: none;font-weight: bold;}.HorizLinks   {position: absolute: top: 77px; left: 180px;}.HorizLinks  ul {margin: 0px;}.HorizLinks li {margin: 0px 8px 0px 0px;list-style: none;display: inline;}#header p {color: #000000;font-family: Arial;font-weight: bold;}#body {width: 350px;height: 453px;}#footer {clear: both;background-color: #d1c0a7;} .twal { margin-top: 0px; padding: 0px 0px 0px 0px; border: 2px solid #d22929; background-color: #dddddd; width: 900px; color: #000000  }  .box {   margin-top: 10px; padding: 1px 1px 1px 1px; background-color: #cccccc; border: 2px solid #d22929; width: 900px; color: #000000;  } h2 { font-size: 20px; color: #cc0000; padding: 10px; font-famil: verdana; }

thanks...

Link to comment
Share on other sites

most sites use 960px for 1024 res so 900 is well below this and will be fine.Edit: the #container looks like it is doing the same as #wrapper so you could remove this, also block element such as a div do not need width defined to match outer container width, as they will do this automatically, only when the element is styled as float, or position: absolute; would you define width;

Link to comment
Share on other sites

most sites use 960px for 1024 res so 900 is well below this and will be fine.Edit: the #container looks like it is doing the same as #wrapper so you could remove this, also block element such as a div do not need width defined to match outer container width, as they will do this automatically, only when the element is styled as float, or position: absolute; would you define width;
Hey Thanks..good to know..
Link to comment
Share on other sites

Hey Thanks..good to know..
Okay I now have it centered...now on the left side and right side are big white spaces..how can I add either a photo or color to it..instead of having file sitting in the middle of a white page...???thanks..
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...