|
CSS - Login Form(div) Disable Background
Hi,
I need a class, that if I apply to a DIV tag (which has login form), It makes the background of that div a dull colored. Also I want to know if I need to force the user to first close that div before any other action outside the div. I hope this make sense. I am not sure if it can be done only with CSS or it also needs javascript. Similar Tutorialsis there a way to disable the 3d shadowing effect on form fields? so i can just have a border. Forms are needed to submit values, of course. But they may also change the formatting on a page when included. If I want to include a form just to contain hidden input fields, or even include it otherwise for some other reason, it will affect formatting. Is there a way to disable all presentational effects caused by inserting a form tag? I'm assuming this would involve CSS. Skolem Hi, Is anyone aware of why the background color of my forms won't work in Safari? Here's the CSS code: Code:
input {
background: #010101;
border: none;
color: #FEFEFE;
font: 9px Georgia, Arial, Helvetica, san-serif;
letter-spacing: 0px;
line-height: 12px;
margin: 0px 0px 0px 4px;
}
The background in Safari is white instead of black. Help please! Viggo Hi all, I'm working on styling a form button at the moment. I've got it styled perfectly to how I want it, with the correct mouseover and mouseout colours (mouseOver = light grey, mouseOut = white). However when the page is loaded initially, the background colour is set to something I haven't manually chosen - darker grey. Once I put the cursor over it and off it, the desired colours appear; however it's just this initial-colour problem that I can't seem to root out. Here's the link. Button.html I believe this initial colour is the background colour of a standard button, but I can't seem to fix it so that it doesn't appear. Anyone know how to fix this? Thanks Jaiyan Code:
<html>
<head><title></title>
<style type="text/css">
INPUT.formButton {
color: Gray;
font: 11px Arial,Helvetica,sans-serif;
text-decoration: none;
background-color: white
border: 1px solid #708090;
text-align: center;
display: block;
width: 150px;
padding: 3px 5px;
/*margin: 7px;*/
}
</style>
</head>
<body>
<form action="/expense_attach.phtml" method="post">
<input type="submit" name="which" class="formButton" onmouseover="this.style.background='#DADADA'; return true" onmouseout="this.style.background='#FFFFFF';" value="Investigator">
</form>
</body>
</html>
I have a form that has background images for the inputs. In both IE 6 and IE 7, the background images will move if the text goes outside of the image. You can see what I'm talking about here. Here is the xhtml: Code: <div class="contact">
<form action="sendmail.php" method="post" id="contactform">
<ul>
<li>
<label for="name"><img class="label" src="images/name.png" alt="" /></label>
<input class="inputbox" type="text" name="name" value="" id="name" />
</li>
<li>
<label for="email"><img class="label" src="images/email.png" alt="" /></label>
<input class="inputbox" type="text" name="email" value="" id="email" />
</li>
<li>
<label for="tele"><img class="label" src="images/phone.png" alt="" /></label>
<input class="inputbox" type="text" name="tele" value="" id="tele" />
</li>
<li class="special">
<label for="last">Don't fill this in:</label>
<input type="text" name="last" value="" id="last" />
</li>
<li>
<label for="message"><img class="label" src="images/message.png" alt="" /></label>
<textarea rows="5" cols="30" name="message" class="messagebox"></textarea>
</li>
<li class="submitbutton">
<input type="submit" value="" class="formbutton" />
</li>
</ul>
</form>
</div>
and here is the relevant css: Code: .inputbox {
height: 39px;
width: 246px;
border: none;
padding: 10px 10px 0 10px;
background: url("../images/inputbox.png") no-repeat 0 0;
font: bold italic 1.25em/1.1em Lucida, sans;
color: #3d2d06;
}
I'm sure this is an easy one but I can't really figure it out and googling has not produced any results. Thanks in advance. Is there a simple way of applying a CSS style to only the form fields that are empty? I searched online and found this but doesn't seem to work. Code: input[value=""] {
background-color: #FFFF66;
}
any other 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! Hi there, In my stylesheet I've written a style for the table tag: Code: table {
width: 500px;
margin: auto;
text-align: left;
border: 1px solid #999999;
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
line-height: 140%;
margin-bottom: 10px;
padding-bottom: 15px;
font-size: 14px;
padding-left: 10px;
}
All the main tables on my site need to be this exact style. I now need to create a table which shouldn't use the table style above. I could have just pasted the stylesheet info directly to the page (and delete the css link at the top of the page), and then delete the table info, but can't do this because the stylesheet link location is dynamic (my new site design will alternate a stylesheet every 24 hours). Anyone know how I can tell the css to not apply the style to an element? Thanks, saj Can you use a stylesheet to effectively disable the link, so that you can't click on it; that it will appear simply as text? Thanks Hi. Is it possible in the same page to use a css and in the middle of the page, disable it and use another for the rest page another? I know that if i include two similar css the last override the first in the whole page. Can i use them both ? Is it possible to disable JavaScript with CSS? For instance, I need to disable a JavaScript popup on this site. The popup is triggered if the searched word isn't found in the dictionary. This site isn't mine, but I'd like to load it in a kind of frame. Hello I would like to change the cursor when it is over on a link with an defined file extension. It does not work well: the test.zip link is OK while the test.ZIP link does not have any effect. How can i disable the case sensitive in the following code so that work? Thank you PHP Code: <html> <head> <style type="text/css" media="screen"> a[href*=".zip"] {cursor:help;} </style> </head> <body> <a href="http://www.abc.com/test.ZIP">test.ZIP</a> <a href="http://www.abc.com/test.zip">test.zip</a> </body> </html> I would like to prevent safari from highlighting the field that has focus. Is this possible? I'm doing a similar effect on my site and it looks bad when they are combined. Thanks anyway to disable a user from viewing your css source? not particular for me but, i think there might be a way with php in the css file, but it still displays the code when i go to the file Whenever I roll out a new feature (including new layout) to the production version of a website I am working on, I know that it won't properly work until a user downloads a new version of the relevant CSS files. For new users this happens automatically, but existing users have to wait or hit refresh. The result is that the pages look bad for some users when I make changes. I would fix this problem by renaming the CSS files whenever I make changes, but this can get a bit unwieldy since I use SVN for source code management. I would have to make a revision to other source code files solely to reflect a change in the CSS file. Another idea is to control the name of the CSS file from a constant or from my database, but each has its downsides (complexity, performance in the case of the db calls). Is there any easy way to have caching of CSS files, but somehow break through that cache when I make changes? I am guessing not since the cache is based on expiration settings set by Apache, which to be meaningful need to be long. But if you have encountered this issue before, I'd love to hear what you did! I'm fighting with this for a while now. I want to change my table layout into div based one, but keeping all the positive features of table design. The layout is based on percents and em (the liquid philosophy) The problem: Make div resize like table cell with minimal width equal to width of widest unbreakable element. I don't want my "verylongunnecesaryword" stick out of menu div nor dissapear partaily when resizing the window. I basically want the menu to always stay wide enough to accomodate the longest word and resize dynamically with window and fonts. There is no such problem when using tables, cells automatically resize to fit content and never become so small that content sticks out or disappear. Setting the min-width with either em, px nor percent is a no go, because it's impossible to tell what size will the biggest element be. No javascript either. Also keeping it IE6 complaint would be good. I still think that tables are the best idea and unless someone shows me how to fix this problem with div and css, I'm just sticking with tables till the end of world. shortened HTML: Code: <div class="menu"> menu here </div> <div class="contents"> the rest of page </div> shortened CSS: Code: .menu
{float: left;
width: 20%;
padding: 1%;
}
.contents
{float: left;
padding: 1%;
width: 76%;
}
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 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 I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. |
|||||||