paddyhaig Posted July 8, 2010 Share Posted July 8, 2010 I am looking to make a cool looking even sexy looking form (No, nude men or woman) I made this using tables (See graphic), but I want it to look a little cooler, I figured if I used alternating slightly transparent table row colors or something like that and maybe made the table using css as opposed to html. I might be able to do some cooler stuff (Like fine 1px borders). I have been getting some great ideas from PhPfreaks so far for other aspects of my project. Any idea or suggestions greatly appreciated. Quote Link to comment Share on other sites More sharing options...
trq Posted July 8, 2010 Share Posted July 8, 2010 I figured if I used alternating slightly transparent table row colors or something like that and maybe made the table using css as opposed to html CSS isn't a substitute for html, they are used together. Where exactly are you stuck? Quote Link to comment Share on other sites More sharing options...
paddyhaig Posted July 8, 2010 Author Share Posted July 8, 2010 Well let me see. I am aware that css and html are used together, maybe I should rephrase, I am interested in css style tables. I am also interested in alternating slightly transparent table row colors. Here's my present code, how would I implement the above interests? All and any help greatly appreciated. Here's my present style sheet. /* The below ruleset applies to the Admin Index*/ /* This first container applies to the center slightly transparent box */ #container_3col { position:absolute; width:686px; height:310px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid white 1px; color: #FFF; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=85); /* CSS3 standard */ opacity:0.89; } #container_2col { position:absolute; width:462px; height:310px; z-index:1; left:50%; top:10px; margin-left:-231px; border:solid white 1px; color: #FFF; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=85); /* CSS3 standard */ opacity:0.89; } /* End of container */ /* This second container applies to the buttons used in the above box */ #container_3col a { float:left; display:block; height:50px; width:200px; z-index:2; margin-left:20px; margin-top:20px; text-align:center; line-height:50px; border:solid white 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; cursor: auto; background-color:#F00; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #container_2col a { float:left; display:block; height:50px; width:200px; z-index:2; margin-left:20px; margin-top:20px; text-align:center; line-height:50px; border:solid white 1px; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: large; cursor: auto; background-color:#F00; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } /* End of container */ /* This third container is the background for the Admin Index page */ body { background-image: url(../graphics/backpackers.png); background-repeat: no-repeat; } /* End of container */ /* End of css rulesets for the Admin Index page */ Here's the html (With just a little php) <?php // Start time variable. $time= strftime("%Y-%m-%d %H:%M"); // End time variable. ?> <!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>Check in/out</title> <link href="../../css/general.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container_3col"> <form action="<?php echo $editFormAction; ?>" id="check_in" name="check_in" method="POST"> <table width="655" border="0" cellspacing="0" cellpadding="0"> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th width="136">ID type:</th> <td width="192"><input type="text" name="idtype" id="idtype" /></td> <th width="167">Key Deposit:</th> <td width="160"><input name="keydeposit" type="text" id="keydeposit" value="$5.00" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th>ID Number:</th> <td><input type="text" name="idnumber" id="idnumber" /></td> <th>Rent:</th> <td><input type="text" name="rent" id="rent" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th>First Name:</th> <td><input type="text" name="forename" id="forename" /></td> <th>Date and Time:</th> <td><input name="arrivaldate" type="text" id="arrivaldate" value="<?php echo $time ?>" readonly="readonly" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th>Second Name:</th> <td><input type="text" name="surname" id="surname" /></td> <th>Emergency Contact#</th> <td><input type="text" name="departdate" id="departdate" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th>Nationality:</th> <td><input type="text" name="nationality" id="nationality" /></td> <th>Room number:</th> <td><input type="text" name="roomnumber" id="roomnumber" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th>Email Address:</th> <td><input type="text" name="emailaddress" id="emailaddress" /></td> <th>Total:</th> <td><input type="text" name="total" id="total" /></td> </tr> <tr> <th> </th> <td> </td> <th> </th> <td> </td> </tr> <tr> <th><input type="hidden" name="id" id="id" /></th> <td><input type="submit" name="button" id="button" value="Submit" /></td> <th>Notes:</th> <td><input type="text" name="notes" id="notes" /></td> </tr> </table> <input type="hidden" name="MM_insert" value="check_in" /> </form> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
trq Posted July 8, 2010 Share Posted July 8, 2010 I wouldn't be using tables for such a layout, the same thing can be achieved using divs. In fact you have another topic that pretty much covers the same ground here. Quote Link to comment Share on other sites More sharing options...
paddyhaig Posted July 8, 2010 Author Share Posted July 8, 2010 Who made you an administrator Thorpe? I don't have anything pertaining to alternating colored rows on a form posted. Your such a time waster Thorpe and your ruining my posts. Who do I complain to? Your not helping me a bit, your just being a bitch. Do you even know how to offer solutions? Have you ever actually helped anyone? Why not offer a solution instead of criticizing peoples posts. I am making a copy of this dialog and sending a copy with a complaint to the person registered behind phpfreaks. You are totally pissing me off. You had the audacity to call me a Princess! I came here for help not to mix it with some idiot on a control trip! Quote Link to comment Share on other sites More sharing options...
isedeasy Posted July 9, 2010 Share Posted July 9, 2010 Since when was a form tabular data? Read up on label tags as well As for alternate row colours just write a bit of php or javascript to add a class to every other row, then style that class using CSS. Quote Link to comment Share on other sites More sharing options...
haku Posted July 9, 2010 Share Posted July 9, 2010 Actually, a form is exactly tabular data. A table cross references two data types on an x/y axis (add a z-axis if you want a 3-dimensional table, but those don't exist in HTML). So let's consider the data types here. One data type is 'data'. This could be for example 'name', 'age', 'address' etc. The other data type is 'values'. For a piece of data that is 'name', you have to values: 1) Title 2) Input The first one is the label, and the second is the input. So you are cross-referencing a data type with the values for that data type. That is tabular data. Now the easiest way to prove something is tabular data is to show how it can be stored in a table, with no empty values. So let's consider a database table - which is a pure table in that it is fully conceptual: Table name: Form fields Columns: Label, Input And here are to possible rows, that fit the above columns: 1) Label: <label>Name</label> Input: <input name="name"> 2) Label: <label>Age</label> Input: <input name="age"> As you can see, this data fits in a database table with no empty columns., which all goes to show that this form is in fact tabular data. Quote Link to comment Share on other sites More sharing options...
isedeasy Posted July 9, 2010 Share Posted July 9, 2010 So would you use html tables to display a html form? the actual html used to create a form is not designed to be placed in a html table. Quote Link to comment Share on other sites More sharing options...
paddyhaig Posted July 9, 2010 Author Share Posted July 9, 2010 Thanks for your help everyone, I went elsewhere and got a little help. Had to get the job done and not spend all my time bickering. I do sincerely apologize if I upset anyone, I was pretty upset myself. If you want to spend time kicking this can around then you can. If not, I am again sincerely sorry for maybe over reacting. I just felt like I was being set upon by the wanna be authorities. I just felt like the was some kind of aloof snobbery and old school cronyism. Peace! Quote Link to comment Share on other sites More sharing options...
haku Posted July 9, 2010 Share Posted July 9, 2010 So would you use html tables to display a html form? Honestly, I don't. But not because it's wrong, rather it's because I can create forms that render faster and require less code using CSS and not using a table. But my point is that as a form is tabular data, using a table to display it is entirely fine if that is the method someone chooses to take. the actual html used to create a form is not designed to be placed in a html table. Sure it is. <table> <tr> <td><label>label 1</label> <td><input type="text" name="input_1" /></td> </tr> <tr> <td><label>label 2</label> <td><input type="text" name="input_2" /></td> </tr> </table> Goes in just fine. Quote Link to comment Share on other sites More sharing options...
paddyhaig Posted July 9, 2010 Author Share Posted July 9, 2010 Thank's haku. Here's what I ended up with after a little help from other groups and a little experimenting. Do you know by any chance how I can make the backdrop graphic somewhat transparent without actually editing the graphic itself hopefully by using css? Or if you know of any way of making this code a little more efficient I would love to know? I don't believe this is the right place to ask, but I also want to know how I can adjust the php time ($time_date= strftime) with an offset of + or -. <?php // Start time variable. $time_date= strftime("%Y/%m/%d %H:%M"); // End time variable. ?> <!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>Form</title> <style type="text/css"> <!-- /*Beginning of page layout css*/ body { background-repeat: no-repeat; background-color: #FFE375; } #backdrop { position:absolute; width:970px; height:985px; z-index:0; left:50%; top: -1px; margin-left:-485px; background-image: url(../../graphics/graphicstar.png); } #container { position:absolute; width:686px; height:310px; z-index:1; left:50%; top:10px; margin-left:-343px; border:solid white 0px; } #row1 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.70; } #row2 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#F00; text-align:center; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: medium; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } #row3 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#C1AA24; /* for IE */ filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.70; } #row4 { float:left; width:169px; height:20px; z-index:1; border:solid white 0px; background-color:#F00; text-align:center; font-weight: bolder; color: #FFF; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: ; /* for IE */ filter:alpha(opacity=90); /* CSS3 standard */ opacity:0.9; } /*End of page layout css*/ /*Beginning of form css*/ INPUT { background-color: #99ccff; color: black; font-family: Arial, Helvetica, sans-serif; font-weight:600; font-size: 11pt; text-align:center; } .altButtonFormat { background-color: #c0c0c0; font-family: verdana; border: #FFFF00 3px solid; font-size: 12px; font-weight:600; color: #000000; } /*End of form css*/ --> </style> </head> <body onLoad="document.getElementById('id_type').focus()"> <div id="backdrop"></div> <form id="form1" name="form1" method="post" action=""> <div id="container"> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">ID type:</div> <div id="row2"><input name="id_type" type="text" id="id_type" size="15" value=""></div> <div id="row2">ID Number:</div> <div id="row2"><input name="id_number" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">First Name:</div> <div id="row4"><input name="forname" type="text" size="15" value=""/></div> <div id="row4">Second Name:</div> <div id="row4"><input name="surname" type="text" size="15" value=""/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Nationality:</div> <div id="row2"><input name="nationality" type="text" size="15" value=""/></div> <div id="row2">Emergency #</div> <div id="row2"><input name="emergency_number" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">Email address:</div> <div id="row4"><input name="email_address" type="text" size="15" value=""/></div> <div id="row4">Date - Time</div> <div id="row4"><input name="time_date" type="text" size="15" value="<?php echo $time_date ?>" readonly="readonly"/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Room number:</div> <div id="row2"><input name="room_number" type="text" size="15" value=""/></div> <div id="row2">Rent:</div> <div id="row2"><input name="rent" type="text" size="15" value=""/></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row4">Deposit:</div> <div id="row4"><input name="deposit" type="text" size="15" value="<?php echo $deposit ?>" readonly="readonly"/></div> <div id="row4">Total:</div> <div id="row4"><input name="total" type="text" size="15" value=""/></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row1"></div> <div id="row2">Notes:</div> <div id="row2"><input name="notes" type="text" size="15" value=""/></div> <div id="row2">Press when done >></div> <div id="row2"><input name="Submit" type="submit" class="altButtonFormat" value="----- Submit -----" /></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> <div id="row3"></div> </div> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted July 10, 2010 Share Posted July 10, 2010 You can set opacity in CSS (requires an IE fix though), but it's not very good, because any child elements will also have a lower opacity, and there is no way to give the child elements full opacity. You should open a thread in the PHP help section for your $time question. I personally stopped venturing in there a couple of years ago though, I couldn't handle seeing people coding everything and anything in tables anymore Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.