|
CSS - How To Hide Label
Hello. I have code like this one
Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... Similar TutorialsHello. I'm nesting inputs within labels to enable me to position the inputs underneath their labels. (I use relative positioning for the labels and absolute positioning to move the inputs underneath and slightly to the right.) For one label I don't want any text to appear. I could use a non-breaking space but I'd ideally like to keep the label but just not show the text. But I can't hide it because it contains the input What would be a good way to approach this? (I've given the label a class to identify it/them.) Code: <form id="myForm" method="">
<label>Email<input type="text" id="txtEMail" /></label>
<label>Password<input type="text" id="txtPWord" /></label>
<label class=" lblHidden " >Login<input type="image" src="images/login.jpg" id="btnLogin" /></label>
</form>
[It occurred to me to set the width to 0 but I'm not so keen on this approach and it might interfere with my positioning.] Andy. PS I could post my css if it's useful (?). Edited: width:0px doesn't do anything anyway, because it contains an image. I have a form label styled from an external stylesheet. I don't understand why some style options don't seem to work. For example, setting the width of the label seems to have no effect. But setting the font does work. I assume it is because of some parent div style? The stylesheet is from a template in which I am attempting to make some additions. I'm actually having the same problem with unordered lists. Could someone explain what would cause some style options to be ignored? I can post the stylesheet, but it is rather long. Thanks. Hi there, Was wondering if anyone had a solution with what I am trying to achieve if at all possible. I've been playing with a drop down that opens onclick with pure css. What I am trying to accomplish to have the dropdown close automatically when pointer is not on the dropdown menu. I know this is possible with jQuery but get this, I am trying to accomplish this in pure css. My code is below which is pure css which again works onclick to open the 2nd tab. Again, I am trying to achieve an automatic close behavior such as with a hover but not by using the hover class or javascript. <!doctype html> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <!-- Mobile viewport optimized: j.mp/bplateviewport --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects --> <script src="js/libs/modernizr-1.7.min.js"></script> <style> div.items ul:not(:target) {display:none;} div.items ul:target {display:block;} .tabs { float:left; clear:none; width:200px; height:30px; border:solid 1px #cccccc; padding:10px; background:#000000; } a { text-decoration:none; } .tabs a { float:left; margin:8px 5px 5px 5px; color:#ffffff; } ul { width:222px; float:left; clear:both; padding:10px 0px 10px 0px; margin:-8px 0px 0px 222px; line-height:35px; list-style:none; } li { border-left:#cccccc solid 1px; border-right:#cccccc solid 1px; border-bottom:#cccccc solid 1px; } ul li a { margin-left:15px; } </style> </head> <body> <!-- Start Tabs --> <div class="tabs"> <a href="#">Dashboard</a> </div> <div class="tabs"> <a href="#item2">Data & Reports</a> </div> <div class="tabs"> <a href="#">Data Archives</a> </div> <!-- End Tabs --> <!-- Start 2nd Tabs Content --> <div class="items"> <ul id="item2"> <li> <a href="#">Sales By Device</a> </li> <li> <a href="#">Delivery</a> </li> <li> <a href="#">Revenue</a> </li> <li> <a href="#">Sales By Purchase Type</a> </li> <li> <a href="#">Data Archives</a> </li> </ul> </div> <!-- End 2nd Tabs Content --> </body> </html> Hi gyus! I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed. All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned) I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server) Code: <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <title>Testing</title> <link rel="stylesheet" type="text/css" href="test.css"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8;"/> </head> <body> <form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8"> <div> <label for="audio_level">Audio Level:</label> <input type="text" id="audio_level" value="0"/> <label for="audio_level1">Audio Level:</label> <input type="text" id="audio_level1" value="0"/> <label for="audio_level2">Audio Level:</label> <input type="text" id="audio_level2" value="0"/> <label for="audio_level3">Audio Level:</label> <input type="text" id="audio_level3" value="0"/> </div> </form> </body> </html> And the CSS: Code:
body {
width:800px;
}
label {
display:block;
float:left;
clear:left;
width:100px;
text-align:left;
}
input {
display:block;
float:left;
width:100px;
}
Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary? I can't figure out what I am missing to get the one label/input per "line" Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Not the best title, but I couldn't think of a better way to describe what I am trying to do. I currently use css to position form elements and their labels nicely without the use of tables. I now want to be able to add fieldset tags, encapsulating a bunch of radio or checkboxes, and a legend tag, and have that legend tag appear exactly as my current label tags do. Easier to look at the demo page I think: http://markdw.com/formTest.html Looks fantastic in FF, almost perfect in IE, but not so good in Safari (all on a PC). I can fix the positioning of the fieldset in Safari by removing the top:-18px and margin-top:-18px styles, but no matter what I do I cannot get the LEGEND to show up on the page. The same applies to IE6 I just noticed. a) I hope the code is useful and/or interesting to others, and b) I hope someone will be able to help me with the safari issue Many thanks. Here is my problem: keoasian .com/details If you look at the contact form, it does not properly line up. I've had this problem on another site before but I forget how I fixed it. The solution is probably simple, I just can't think of it. By the way, this may not show up on all browsers as a problem. I initially designed and tested this page on a Windows XP machine with 1024x768 running Google Chrome; now I am on a Mac OSX computer with 1280x800 resolution testing it on Chrome and Firefox. Hi all, I'm implementing a web form where the labels for each input will appear as the default value rather than having the actual label elements visible. The label elements themselves will still be present in the markup for accessibility. I want to visually remove the labels while still having them acknowledged by screen readers. I'm aware of the left-offset trick, but I've read several articles where it's suggested to simple set the labels to display: none with JavaScript after the DOM has loaded. This seems to assume that screen readers will ignore this, otherwise there you might as well just set them as display: none in the first place. Can anyone confirm that a screen reader will still acknowledge a label element if display: none has only been applied after the DOM load via JavaScript? Thanks! Hi! Let's say I have this Code: <form id="some_form" ...> <div> <label> Some text <input .... /> </label> <label> Some text 2 <input .... /> </label> <input type="submit ... /> </div> </form> In CSS I have this: Code: #some_form label {margin-button:10px}
This does work in NO browsers! Very strange... If one replaces the label with a div, everything works fine again. I really want to use the labels... Hello, Can search engine see a hide H1 tag? Quote: h1 {display:none;} For some reason i am adding css Code: Original - css Code /* Hide this from IE-Mac \*/ div.spacer { height: 5px; } /* End the hiding */ /* Hide this from IE-Mac \*/ But IE keeps seeing this, does anyone knows why? hey on my site at http://www.tequme.com theres a little copyright footer at the bottom and it looks good in 1280 but in 1024 it gets tucked away under the main site. its all divs and css and i kinda get whats going wrong but any suggestions/solutions on resolving it would be appreciated. i use one table to centrally align the main div. Regards Russell I used the following code to hide overflowing content in one of my earlier works. Not working this time, check it yourself (purple section), http://www.refinethetaste.com/html/ Code:
<style>
.playlist { float:left; width:474px; height:80px; background:#FFF; overflow:hidden; }
.playlist .entries { position:absolute; width:10000em; }
.playlist .entries a { float:left; width:452px; height:60px; font-size:9px; padding:10px; background:#90F;}
.playlist .entries a:hover { background-position:-211px 0; color:#000; }
.playlist .entries a.playing { background-position:-422px 0; }
.playlist .entries a.paused { background-position:-633px 0; }
.playlist .entries a.progress { opacity:0.8; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { float:left; width:20px; height:60px; margin:15px 0; background:url(/html/themes/default/images/home_carousel_arrow_left.png) no-repeat; display:block; cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important; }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(/html/themes/default/images/home_carousel_arrow_right.png); }
</style>
I'm looking for a way to show / hide a DIV triggered buy mousing over / clicking on a tab. The action will not navigate away from the page, just show / hide the DIV. I found this script: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm But it seems like a lot of JS overhead. Is there a simpler way? Hi all, pls can anybody help me out in writing a code to hide the address bar and IE bar with css..it is very urgent.. thank you in advance I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board. For example I'd like the topics to be displyed when the page loads 1) topic 1 (Open/Close) 2) topic 2 (Open/Close) On hitting the Open button this would be something like this: 1) topic 1 (Open/Close) ---message 1 ---message 2 ---message 3 ---message 4 2) topic 2 (Open/Close) Hope someone can suggest me an answer or point me to one. Thanks Is it possible to hide a vertical scroll bar? I have a div that I just want to be able to horizontal scroll within a page. Is there a way to hide the vertical scroll??? Thanks! i am trying to find anywhere that may have something to describe a collapse and expand link menu in css. I can't find one that use's mainly css it is all javascript of somekind does anyone know where i could find one. Thanks for taking the time to read my question, I want to hide this line from IE6 and lower Code: padding: 0px 0px 0px 12px; Is there something I can do to it to hide it? I need it to work in IE7, FF etc. I'm looking on line, but I guess I'm not typing in the correct search terms, as I'm not coming up with anything. Thanks, Brad |
|||||||