|
CSS - Can Not Give Width To Label Or Span
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 Similar TutorialsHello, Well this is a very simple question ... how can Iset the width of a span from CSS? Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire. I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place! is there a way to set the span width without having to set thr float:left option? thanks and regards, Sim085 ok, i know that because span is a inline element width cant be applied to it, and a lot of people suggest DIV my problem is that div wont work, because of its auto-break thing.... it being a block element and all... so, how would i apply a width of something like 100px to the span elements in code like this?... Code: <div class="infocontainer"> <span class="infobox">Publisher: <?php print $publisher; ?></span> <span class="infobox">Developer: <?php print $developer; ?></span> <span class="infobox">System: <?php print $system; ?></span> <span class="infobox">Gen <?php print $genre; ?></span> </div> I use this in IE: <span style="width:22"></span> as a blank spacer. The 22 is actually calculated so it varies. Of course it does not work in Firefox. I get no spacing at all. What is the acceptable cross browser method of doing this? Thanks in advance. I want to have some small boxes of fixed width on a page, so I can change the background colour to create the appearance of "flashing lights". I've set the width property on the span tag. It works fine in Internet Explorer but not in Netscape. Any suggestions? Hello all! I've problem with firefox rendering's of span tag, the problem is in the width definition, the code is this: Code: <span style="width:100%; background:red">My name is Danny!</span> IE show me a 100% red row with the text instead Firefox show me only text with the backgroud color. Why this? is a Firefox bug or is not possible to assign width definition to the span tag?! Hello, I am having a problem getting the section that says WHAT OUR CUSTOMERS HAVE TO SAY to span the entire right side of the page. I would like to set it up so that no matter what screen resolution the page is viewed in, that section will stretch all the way to the right side. Any suggestions? http://www.discinsights.com/cyber/Scripts/default.asp Thanks ahead of time! I don't mind telling yall, I'm a bit hesitant to post here, only because I'm very new to html and css, just learning. Folks here are far above my ability, I've got many of the pages on site bookmarked for reference. I'm taking this plunge because I'm ready to rip hairs one by one on a problem. I have a friend who originally made a site in a builder program *shudders* and he has asked me to convert it to more conventional pages (he's determined to keep this theme and I'm not good enough to remake the entire site by hand yet). This program created every thing on the pages as a Div with css styling embedded in the document. Ive got everything working perfectly except that I can not for the life of me get the Div.banner to stretch the width of pages in order for it to span the width of any resolution. What I'm trying to do is simply (or should be) make a 93px by 3 or 4 px bar repeat the length of the div. Here is the code its using at this time. Code: <STYLE TYPE="text/css">
DIV.banner { position:absolute; top:0px; left:0px; z-index:0; }
....</STYLE>
<DIV class="banner"><IMG SRC="images/vbar.PNG" WIDTH=900 HEIGHT=93 BORDER=0></DIV>
The above works but its a fixed width and I would like it to be full width no matter what resolution ones using. I have tried making the Div class="banner" use a width=100%. This causes the image to be shown at top=0 and left=0 once only. I tried adding background-repeat repeat-x to the css code. Any other changes I make like removing the Width from the Div class all together causes it to just go away. I've been able to manipulate everything else from this horrible theme fine except this. I'm sure there is something simple I'm missing and if you need to see more of the index page code just let me know (its not online at this time). I didn't want to put in too much stuff and being such a n00b at all this, I'm learning so be gentle with me.. Thanks in Advance Me I'm basically asking the same question as this post, but hoping that I can press for a better solution. I have an element which contains an image and some text, and I need that element to expand to the width of the image, not the text. The size of the image will change, so I can't set a fixed width on the containing element. The code I have which doesn't work looks like this: Code: <html> <head> </head> <body> <span style="display: inline-block; border: 1px solid black"> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio.</div> </span> </body> </html> The solution proposed in the post I linked to looks like this: Code: <html> <head> </head> <body> <table width="1"> <tr> <td> <img src="someimage.jpg" style="width: 400px; height: 200px;" /> </td> </tr> <tr> <td> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel placerat sapien. Aenean tempus lorem justo, at eleifend mi. Nam elementum nisl ut elit blandit dapibus. Donec et massa turpis, ac tincidunt odio. </td> </tr> </table> </body> </html> The second example gives me the functionality I'm looking for, but I would really like to avoid using tables. I'm hoping there is a CSS solution to this. Thanks. Hi I'm struggeling with the following: I have some span elements inside a td. If I apply padding to a span then the padding is flowing outside the td (above and below the borders of the td). Why does that happen and is there a way to make the td to autogrow to fit all the span's inside? Se example code below Code: <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:300px; margin-top:50px;"> <tr> <td style="background-color:gray; text-align:center; border:1px solid black;"> <span style="margin-right:20px;">First</span> <span style="margin-right:20px;">1</span> <span style="margin-right:20px;">2</span> <span style="margin-right:20px; background-color:orange; padding:10px;">3</span> <span style="margin-right:20px;">4</span> <span style="margin-right:20px;">5</span> <span style="">Last</span> </td> </tr> </table> ******* UPDATE ******* I found this link today: http://css-discuss.incutio.com/?page=FormattingContexts which says (among other things): ************************* Only one thing impacts the vertical space between inline elements: the line height. Normally, the line height is based upon the line height for the text in that line, or the height/padding/border/margin of any replaced items. The element on a line with the largest line height or replaced height is the one to define the vertical space that line takes up. Height, padding, border or margins on text do not impact the line height or the container height. Instead, borders, padding and margins overlap from line to line. If you want to give an inline text element some padding and border, make sure you give it some extra line height, too, or else it will overlap with whatever else is above or below it. ************************* So does that rule mean that I have no way to make my TD autogrow in relation to the padding applied to the SPAN in the example above? Is there any working workarounds for this...? 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"... 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. Hello. 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. 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;
}
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. 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" 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. See code below. Why does the outer SPAN in TABLE not grow with the image height. If the text is longer so it is forced below image then it looks as it should. Please also read some comments in the code. Code: <html><body><center><br><br> Why does image not force the outermost span to be at least as high as image?<br> If the text are long enough and gets below the bottom border of image it look good though.<br><br> NOTE: I need to put Image and text either within separate span or in same span as the examples below.<br> In my real application I'm using an <a href=" ...> around the outer span in examples below.<br> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px;"> <span style="display:block; float:left"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0"> </span> <span style="display: block; color: white;"> Text here. </span> </span> </td></tr></table> <br><br> <table border=1 cellpadding=0 cellspacing=0 width=200px><tr><td> <span style="display:block; background-color:#ffa827; padding-top:10px; padding-left:10px; padding-right:10px; color: white;"> <img src="landscape.jpg" height="40px" width="40px" alt="" border="0" style="float:left"> Text here. </span> </td></tr></table> </center></body></html> 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, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help |
|||||||