CSS - Creating Raised Shadowed Text Or Forms With Css

having an issue with trying to work out the best way to overcome my current issue.

what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right .

now i have got some examples of trying to get this to work but it not that good currently.

I am currently using a span to accomplish this but have a few issues with it so far.

the first two links are my css sheet and the verified html page but it doesn't look the way i want it.

the third link is the page that is more like what i want. but still not 100% what i need.

be aware my whole page is self sizing so absolute position with measurements are out of the question.

Please help and if span is not the option whatever someone can suggest to put me on the right path.

I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too.

CSS verified

theknowledgeden .com / default .css

Verified html

theknowledgeden .com / ancient-afr .html

non verified html but closer to what i am trying to accomplish.

theknowledgeden .com / ancient -asia .html

Hi:

Does anyone know of a site(s) that deal with text presentation in CSS? I'm looking not for the plain text manipulation but for really, really good FX(maybe?) text presentations.

Just place a link to a site(s) that you consider you would be looking for.

Also, if it has been mentioned in the forum, kindly show me the link to it.

Thanks.

How do create text that has a background AND foreground image? The effect I am after is looking through one image (I already have a transparent one that should work) to see text which is on top of a background image.

I figure that these would come into play...but I have not been able to make the right combination of divs, etc., to make this happen.

.back {
background: url(backsrc.gif) bottom left repeat-x;
}

.fore {
background: url(foregrdsrc.png) bottom left no-repeat;
}


I don't think this detail will matter, but just in case... I want this appearance for the text of every <td> in a particular table.

Thanks,
oak island

I have an assignment and it says "A class attribute for text to be used with the DIV tag, named SPECIAL (for division), which indents the text division (all lines in the division) by 25 pixels and sets the font size to 14 point. "

I am not sure how to write this out in CSS format, can someone help me?

Hi all,

I've got an div set up for images, which just has a style of padding-right 15px; .

Now, I've got a text div with a style of padding-right 5px; .

Whenever I put that div in after the image div, the text appears below the image. Can anyone tell me how to make it so the text appears next to the image (on the right)?

Cheers.

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'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 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!

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'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...

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">
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>

As per the subject I'm looking for examples of attractive yet sensibly coded forms where the layout uses only CSS. I guess bad things would be where the layout is done using absolute positioning. I'm looking for something that is easy to reuse and straightforward to code a stylesheet for.

Thanks,
Geoff

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 -->