|
CSS - Changing Textarea's Background?
i am sorry 2 have wasted ur time why cant i delete my threads anymore
Similar TutorialsThe problem I am having here is that the image will stay fixed in the background as the text scrolls in IE but not in Firefox when I have it set one way and then it will reverse if I set it another way and stay fixed in Firefox but not fixed in IE. Here is what I am working with. Stays fixed in Firefox in center of the text area box and moves with entire page but stays in the center of the background of the whole lenght of text in text box (kind of like a scrolling blog) in IE textarea.textbox { background:#cccccc url(K.gif) no-repeat center; Stays fixed in IE in center of the text area box and moves with the entire page in IE but in Firefox when I scroll the whole page down it starts in the center of the text area but the whole page scrolls past and the image disappears. textarea.textbox { background:#cccccc url(K.gif) no-repeat center fixed; I want to figure out how to make the image the static background of the text box in both browsers. Any insight into this would be greatly appreciated. I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page). I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on. Code: <a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>
And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color. any ideas? Thanks Okay, so I'm having a little bit of a problem with setting the background color through an onClick event on an option tag. Here is what I mean. Code: <div id = "move">
<form name = form2>
<span style="float:left;">
<select name= theDay size=1>
<option value=0 selected>Default [themes]
<option value=1>White</option>
<option value=2 onClick = "red()">Light Blue</option>
<option value=3>Aqua
<option value=4 value = "document.body.style.backgroundColor= '#98AFC7';">Lighter Blue</option>
<option value=5 onClick = "document.body.style.backgroundColor= 'white';">Saturday</option>
<option value=6 onClick = "document.body.style.backgroundColor= 'white';">Sunday</option>
</select>
When I click one of the options, nothing changes, although I set the body.style.backgroundColor to register to a different color when the option tag is clicked. Any ideas? Hi, Please see http://lbclibrary.org/addtoinquiry.php (scroll down a bit to see the form) What I want to do is, when the user selects "I am a member of ..." or "I want to become a member of..." the form fields in the OTHER cell should become readonly (i.e. should not allow input). Is it possible to make ALL the form elements in one <td> cell as readonly? Further, is it possible to change their background colors to say light grey? Then, when you select another radio option, that cell becomes writable and the other cell becomes readonly. Thanks a lot! I have a div with a background color set, that I want to have slightly transparent. Inside that div, is essentially my entire website. Now if I apply the opacity to the main outer div, all the divs inside inherit that transparency. Any ways to get around this? The outer Div with the transparency is the "content_wrapper" div. It excludes the header and footer. So the only issue is correcting everything wrapped inside the "content_wrapper" and "content" div. I tried setting the "content" div to opacity: 1; but it had no effect whatsoever. http://www.area51entertainment.co/index.php?about Hi all, I'am using a component called TinyMce and what people not to dragg images into the textrea how would I prevent this? Regards, Stephen Alistoun The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. So I have a design where the background is a large (1400x1100) image that fades into a vertical gradient at the edges. I've set up the css as follows: body { background: #000 url(gradient.jpg) repeat-x; margin: 0; } Here's where I run into my problem... I've created an empty DIV to hold the large image which will appear on top of the gradient and positioned it absolutely. <div id="bg_image"></div> #bg_image { width: 100%; height: 1100px; background: url(images/bg_image.jpg) no-repeat top center; margin: 0; position:absolute; } This works and the background looks like it should, however because the large image is inside a DIV, any time the browser window is smaller than that div (which will be the case for most users considering the image size) there will be scrollbars. This makes perfect sense of course I just can't come up with an alternative. If there was a way to extend a background image beyond the borders of a DIV that would work but overflow:visible; doesn't seem to work with background images only content. I wish I could set a repeating background AND a static background in the body style, because that is exactly the effect I'm trying to achieve. Any suggestions would be greatly appreciated! Thanks, Josh Hi there! I am trying to create a page with a HUGE textarea... that spans the entire browser window, excluding a 30px margin. How would I do this? I've searched for 100% height tutorials, et cetera, but I can't seem to apply this to my <textarea>. Is it even possible? CSS: Code:
html, body
{
height: 100%;
}
body
{
background-image: url('images/background.jpg');
background-color: #09C;
text-align: center;
margin: 0;
padding: 0;
}
#notepad
{
padding: 30px;
width: 100%;
height: 100%;
background: #000;
}
textarea
{
width: 100%;
min-height: 100%;
}
HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Xyteran Technologies - Notepad</title> <link href="CSS.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="notepad"> <form action="index.php" method="post"> <textarea></textarea> </form> </div> </body> </html> Hi, Does anyone know how to get text in a textarea to automatically wrap when the text input hits the right hand border of the textarea. It works fine in I.E. without any style rules or using the html tag 'wrap'. But in firefox the text just continues horizontally and a horizontal scroll bar appears at the bottom of the box when the text reaches the right-hand border. Read a solution somewhere, sometime ago but can't remember where. Tried so far: [1] css overflow rule [2] HTML 'wrap' attribute [3] css white-space rule solution must validate CSS. thanx in advanz I'm having trouble adding padding to a text area without affecting the scrollbar. I would like the padding:10px to only be around text in the textarea without making the scrollbar have padding around it. Is this possible? Thanks I have attached the file, If you Open a File using that, the Textarea was styled to go to 90% (<textarea style="width:100%;height:90%;"></textarea>) this is designed only to work in IE! Can someone please help me? Thank you, In advance Zero hello is it possible to use css or some other artifice to make textarea/input elements adjust their row/col/size when the user increases/decreases the font size? i'm mostly talking about IE, because netscape/etc. seem to work it out just fine... setting a relative font-size for textarea/input elements on the stylesheet doesn't seem to do the trick. as usual, i tried looking around for info on this but found none, i'm beginning to think it just can't be done. any help would be really appreciated Hi everyone I'm not sure weather this is a CSS issue. For that sake I'm not even sure if it's possible, but I'll take a try Is there any way I can totally remove the scrollbars from a textarea? I've noticed that firefox doesn't show them at all times, but IE seems to show them even when they're not necessary. Hi, I have made a nice form that is looks fine in FireFox though when I change it to IE the textarea gets larger and makes the form miss shapened and not inline with the input boxes I have created. Is there any to make the form that I have created look the same on both browsers? The code that I currently have is: Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
textarea {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
</style>
</head>
<body>
<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="email">Email</label>
<input id="email" name="email"><br>
<label for="message">Message</label>
<textarea name="message" rows="10"</textarea><br />
</form>
</body>
</html>
Thanks for any help guys Hi, I want to show the contents of a textarea as normal text in a preview block with all the text spacing intact. Name: ABC Age: 22 Place: World Somehow the spacing of the text is not displayed as in the textarea. How can this be done. Thanks guys, can anyone help me with implementing a horizontal scroll bar in textarea? can't seem to do it myself Ok, I thought this would be simple, but I was wrong. I have a simple <textarea>. In this textarea, I do not want to have the text wrap at the edge of the text box. Seems simple. Well, here's where the monkey **** starts to fly. It turns out that the w3c has deprecated the "wrap" attribute in XHTML 1.0 (which is the standard I use). Ok, there should be a CSS property to take care of this then, right? Wrong, as far as I can find anyway. I have found the white-space property and this sort of works in IE (but no horizontal scroll bar) and not at all in Firefox. Is there anything that I have missed that actually works correctly in multiple browsers, besides the "wrap" attribute (which, incidentally, works perfectly in both browsers)? My advice to me is to start drinking heavily. cadrunk: I have the css below & would like to make the text on imageOne hidden but don't know how. <style> textarea.imageOne{ background-color:#000066; background-image:url('mom-copy.jpg'); background-repeat:no-repeat; background-attachment:fixed; color:000066; } textarea.imageTwo{ background-color:#000066; background-image:url('text3.jpg'); background-repeat:no-repeat; color:ffffff; } </style> |
|||||||