|
CSS - Css Forms Tutorial?
I'm looking for recommendations for good CSS forms tutorials. I did do a brief Google search this afternoon, but it seemed like a veritable cornucopia of crap. So I was wondering if people here had some favorite resources that deal specifically with form elements in terms of layout / positioning, and style?
Thanks... Similar TutorialsDoes anyone know of a good online site/tutorial that explores the different possibilities of div tags? Thanks, Emilie Please . . . Can anyone recommend any comprehensive, online tutorials on how to make a basic, one-column, three-div CSS Web site? I want to learn correctly. I am looking for a CSS tutorial which teaches how to make a layout like this layout Basically a 3 column layout with boxes in the left and right columns Thanks Hello, I have been spending hours on tutorials of css only to find some things work in one browser, while not in others. I would like to find a tutorial which only applies to IE CSS1(2) OR IE & Netscape css1(2). Is there such beast? It would seem I am always "taking" from this sites and never giving much back, but not today. I had posted a message a few days ago which generated a reply with a link to this site - http://www.sitepoint.com. While I was there, I requested a sample download of some chapters of a book. It was in the book "Html without tables" or something like that they pointed me to this sample site - www.footbagfreaks.com What an awesome way to learn css layout. I checked it in both IE and NS and it was pefect. There are three .html files and one style sheet. I know I will be studying this code if only to get the basics down. I hope this works for you. Whats the best CSS Tutorial you ever seen? I want to improve more on my web design so I want to know what CSS tutorial was the best? It can be anything like making a horzontal menu or best looking form. I dont care what it is... Thank you. Amazon has an amazing menu, the one that says 'see all 41 product categories'. All the options pop out and there is no need to continously click to find out what you are looking for. Genius! Is this basic? Can anybody point me in the right direction for a tutorial? I find that I'm constantly running into conflicts with css and how it displays in internet explorer and mozzilla,let alone the rest of the browsers. Does anybody know a good trusted up to date css tutorial site where one can learn css that is cross browser friendly? Thanks Hi, I'm looking for a tut on how to create tabs for content, not tabs for navigation/menu. Yes, kinda confusing, but here's an example of what I'm after: http://landflip.com/land.asp?listing_id=23028&hfeature=1 If you scroll down mid way, you will see a tabbed area where it provides the options to check out: Photos, Location, Aeriel and Street View. This is what I want to mimic (not the tabbed navigation up top in the menu bar). Can you recommend any tutorials that would teach me how to do this? Thanks. I have downloaded my fair share of drop down menus and have always had problems with understanding how it works and what adjustments move or alter what part of the menu. I experimented a bit and got it working on a Mac but it doesnt look right on a PC and vise versa. Is there a tutorial out there that is really descriptive on how it works and shows which adjustments alters what on the menu than just giving you a downloadable sample to play with. Hi guys, It's hard for me find a good book that teachs Photoshop in a way that a CSS designer need. All the good strategies to define wireframe templates I got it from mostly blogs. So, I wonder if it's any book where I could learn and master this techniques in Photoshop? (Also a good video tutorial it would be helpfull) Best to all Demian Hi, I'm having a problem that occurs in both firefox and IE so its probably a problem in my code. Basically what's happening is one of the <input> has a borked margin and is spread out away from the rest of the <input>s. Here is the link http://jameshu.com/jdhpacific/?contact. Anyone know what's wrong? Thank you for your time. Hi there I have a login page, now the thing is I see alot of sites use the small text boxes, does anyone know ho or where to set the size of a text box? Thanks Hi, I am currently having problems aligning two form in a div. I have the following CSS code: Code: #right {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
and Code: #right1 {
width:200px;
float:right;
position:relative;
margin-right:-200px;
margin-left:1px;
}
How would I structure these two DIV's so that the second DIV wil be inserted under the 1st DIV? Thank you I'm trying hard to converting some forms to css from tables. They look good in IE but issues in FF. What am I doing wrong? In Firefox: In Internet Explorer: Here's the code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled</title>
<link type="text/css" media="screen, projection" rel="stylesheet" href="./css/buffet_review_boxes.css">
<style type="text/css">
form {
font:100% verdana,arial,sans-serif;
margin: 0;
padding: 0;
min-width: 500px;
max-width: 600px;
width: 560px;
}
form fieldset {
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 0;
}
form label {
display: block;
float: left;
width: 150px;
padding: 0;
margin: 5px 0 0;
text-align: right;
}
</style>
</head>
<body>
<h2>Login:</h2>
Please enter your login and password.
<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label for="login">Login:</label>
<input type="text" name="login" size="20" value=""><br>
<label for="password">Password:</label>
<input type="password" name="password" size="8" value=""><br>
<label for="remember">Remember login?</label>
<input type="checkbox" name="remember" value="yes">
<br>
<input type="submit" name="Submit" value="Login">
</form>
<br /><br />Not registered yet? <a href="./register.php">Click here.</a>
<br /><br /><a href="./forgot_password.php">Forgot your password?</a>
<br /><br /><a href="login_local.php">Login with messages according user's language settings </a><br>(only for users with a profile)
</body>
</html>
I'm trying to structure a nice looking form using strictly CSS for its layout. I am used to constructing my forms using tables, so I have become accustomed to the labels' column being only as wide as the longest entry in it (if that makes sense). To clarify, this is what I'm used to: Code: <table border="0" cellspacing="0" cellpadding="2">
<tr>
<td>Enter this information:</td>
<td><input type="text" name="info" size="20"/></td>
</tr>
<tr>
<td>More info:</td>
<td><input type="text" name="moreinfo" size="20"/></td>
</tr>
</table>
So in this case, the descriptions column would be as long as "Enter this information:". I have been able to accomplish a similar look by specifying the width of the label tag in CSS, but I can't seem to find a way to do this dynamically. Here's how I do it by specifying the width: Code: <style>
form.ttcform fieldset ol {
margin: 0;
padding: 0;
}
form.ttcform fieldset li {
list-style: none;
padding: 5px;
margin: 0;
}
fieldset label {
display: inline-block;
line-height: 1.8;
vertical-align: top;
width: 150px;
}
</style>
<fieldset>
<legend>This is my form</legend>
<ol>
<li>
<label>This is my information:</label>
<input type="text" name="info" size="20"/>
</li>
<li>
<label>More info:</label>
<input type="text" name="mroeinfo" size="20"/>
</li>
</ol>
</fieldset>
Any ideas to how I could get these columns to size by the column with the longest content? I know how to customise textfields and inputs, what I'm interested in customising is drop down boxes. This is the code i'd like to edit, but I have no clue where to start! (the HTML code can't be edited, its on a livejournal layout) Quote: <select id="SearchType" name="type"> <option value="user" selected="selected"> Username </option> <option value="email"> </option> <option value="region"> Region </option> <option value="int"> Interest </option> <option value="aolim"> AOL IM </option> <option value="icq"> ICQ Number </option> <option value="yahoo"> Yahoo! ID </option> <option value="msn"> MSN Username </option> <option value="jabber"> Jabber </option> </select> Hi guys, i really don't know if this can be accomplished with CSS but here it goes: I want a user that's filling a form on my web application to be able to click on a certain field(or a link near that field) and pop out another form, fill it, submit it and then continue to fill the original form. Maybe there's a bit of Javascript there or a combination of technologies, i really don't know so forgive me if i'm in the wrong forum, but i've seen similar stuff done with CSS, so if any of you has any idea on how i can accomplish this i'd appreciate it very much. I've attached a graphic to illustrate it better. Thanks! Lately, I see articles everywhere telling us to ditch tables and use CSS to position forms. I don't necessarily have a problem with using CSS although I'm admitedly a bit new to using it for anything more than basics like sizing, color, borders and backgrounds. But my basic question is why ditch the tables? Tables have been around since the inception of html. They work with any browser you care to name and the provide a valid function allowing developers to position things on the screen in a pleasing manner. The flow of data in tables is simple, so the developer and usually the user can predict where the cursor will go when the user hits the tab key. There are certainly problems with tables, such as text wrapping or being truncated when the screen resolution is lower than the developer designed for and the positioning is not as clean as absolute positioning with CSS. Absolute positioning with CSS can lead to its own problems though. If the user has fonts set to a different size or odd video settings the size of the object positioned may not be large enough to display the text. This can cause object to overlap making the page unreadable. It may sound as if I'm just trying to hang on to the old way of doing things, and there may be a bit of truth in that, but more I'm asking for valid reasons to change the way I do things. I actually like finding new ways of doing things but there has to be a benefit to it. How will swithing to CSS layout instead of tables make my pages better for my users or easier to develop and maintain for me? I look forward to your responses. Hey guys, On the following page, I need some very simple help aligning these forms using CSS. I've tried a lot however I am not the best when it comes to CSS yet. Here is what the forms look like currently: http://www.blackoutplaylists.com/?page_id=150 And here is what I want the alignment to look like: http://fratmusic.com/playlist/create/ I want the text aligned to the left and I need the rest aligned to the center(ish). I also want to be able to add little text underneath on the bottom. Anyways, here is the code. Any help would be greatly appreciated. Code:
<!-- form start -->
<form method="post" action="http://www.blackoutplaylists.com/wp-content/plugins/tdo-mini-forms/tdomf-form-post.php" id='tdomf_form%%FORMID%%' name='tdomf_form%%FORMID%%' class='tdomf_form' >
%%FORMKEY%%
<div><input type='hidden' id='tdomf_form_id' name='tdomf_form_id' value='%%FORMID%%' /></div>
<div><input type='hidden' id='redirect' name='redirect' value='%%FORMURL%%' /></div>
<!-- widgets start -->
<!-- customfields-3 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-3-tf"])) {
$temp_text = $post_args["customfields-tf-3-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-3-tf" class="required">Who Created This Playlist?:
<br/>
</label>
<input type="text" title="Who Created This Playlist?" name="customfields-tf-3-tf" id="customfields-tf-3-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-3 end -->
<!-- customfields-4 start -->
<fieldset>
<?php if(isset($post_args["customfields-tf-4-tf"])) {
$temp_text = $post_args["customfields-tf-4-tf"];
} else {
$temp_text = "";
} ?>
<label for="customfields-tf-4-tf" class="required">School/Fraternity:
<br/>
</label>
<input type="text" title="School/Fraternity" name="customfields-tf-4-tf" id="customfields-tf-4-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
</fieldset>
<!-- customfields-4 end -->
<!-- content start -->
<fieldset>
<?php if(isset($post_args["content-title-tf"])) {
$temp_text = $post_args["content-title-tf"];
} else {
$temp_text = "";
} ?>
<label for="content-title-tf" class="required">Playlist Name:
<br/>
</label>
<input type="text" title="Playlist Name" name="content-title-tf" id="content-title-tf" size="30" value="<?php echo htmlentities($temp_text,ENT_QUOTES,get_bloginfo('charset')); ?>"/>
<br/><br/>
<label for="content-text-ta" class="required">Playlist Code:
</label>
<br/>
<textarea title="Playlist Code" rows="10" cols="60" name="content-text-ta" id="content-text-ta" ><?php if(isset($post_args["content-text-ta"])) {
echo $post_args["content-text-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- content end -->
<!-- excerpt start -->
<fieldset>
<label for="excerpt-ta" class="required">Description:
</label>
<br/>
<textarea title="Description" rows="5" cols="40" name="excerpt-ta" id="excerpt-ta" ><?php if(isset($post_args["excerpt-ta"])) {
echo $post_args["excerpt-ta"];
} else { ?><?php } ?></textarea>
</fieldset>
<!-- excerpt end -->
<!-- categories start -->
<fieldset>
<?php $defcat = 1; if(isset($post_args['categories'])) { $defcat = $post_args['categories']; } ?>
Select a category:
<select name='categories' class='tdomf_categories' size='1' >
<option value="1"<?php if( (is_array($defcat) && in_array(1, $defcat))
|| ( 1 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Uncategorized</option>
<option value="3"<?php if( (is_array($defcat) && in_array(3, $defcat))
|| ( 3 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Pop</option>
<option value="4"<?php if( (is_array($defcat) && in_array(4, $defcat))
|| ( 4 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Dance</option>
<option value="5"<?php if( (is_array($defcat) && in_array(5, $defcat))
|| ( 5 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Rap/Hip-Hop</option>
<option value="6"<?php if( (is_array($defcat) && in_array(6, $defcat))
|| ( 6 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Study</option>
<option value="7"<?php if( (is_array($defcat) && in_array(7, $defcat))
|| ( 7 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Alternative</option>
<option value="8"<?php if( (is_array($defcat) && in_array(8, $defcat))
|| ( 8 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Reggae</option>
<option value="9"<?php if( (is_array($defcat) && in_array(9, $defcat))
|| ( 9 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Ska</option>
<option value="10"<?php if( (is_array($defcat) && in_array(10, $defcat))
|| ( 10 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Acoustic</option>
<option value="11"<?php if( (is_array($defcat) && in_array(11, $defcat))
|| ( 11 == $defcat ) ) { echo ' selected="selected" '; } ?>
>Country</option>
</select>
</fieldset>
<!-- categories end -->
<!-- i-agree start -->
<fieldset>
<input type="checkbox" name="iagree" id="iagree" <?php if($iagree) { echo 'checked'; } ?> />
<label for="iagree" class="required" > I agree with the <a href='http://www.blackoutplaylists.com/?page_id=84'>posting policy</a>. </label>
</fieldset>
<!-- i-agree end -->
<!-- widgets end -->
<!-- form buttons start -->
<table class='tdomf_buttons'><tr>
<td><input type="submit" value="Send To Blackoutplaylists" name="tdomf_form%%FORMID%%_send" id="tdomf_form%%FORMID%%_send"/></td>
</tr></table>
<!-- form buttons end -->
</form>
<!-- form end -->
<!-- Form 3 end -->
|
|||||||