I'm struggling with CSS to get my search box and list to look like how I want it. I want the list to be attached to the bottom of the textbox and I have no idea how to do that. Here is a short of what I've got so far...
<style>
ul.drop{display:inline-block;}
ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3; color: #28313F; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; background: #1e7c9a;}
</style>
</head>
<body>
<label for="someinput">Search Ingredients</label>
<input id="someinput">
<ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
<li>ingredient1</li>
<li>ingredient2</li>
<li>ingredient3</li>
<li>ingredient4</li>
<li>ingredient5</li>
</ul>
<label for="qty"></label>
<input type="text" size="5" name="qty" id="qty" />
g
<button type="submit" name="add" id="add" value="Add">Add</button>
</body>
The list is currently showing to the right of the box, I would like it to be directly underneath the textbox. I was considering a container div for the list, but wasn't sure if that was necessary.
Thanks for your help.
You have two options here both would involve changing you html to the following:
<div class="inputHolder">
<label for="left someinput">Search Ingredients</label>
<input id="someinput" /><br />
<ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
<li>ingredient1</li>
<li>ingredient2</li>
<li>ingredient3</li>
<li>ingredient4</li>
<li>ingredient5</li>
</ul>
</div>
<div class="inputHolder">
<label for="qty">g</label>
<input type="text" size="5" name="qty" id="qty" />
<button type="submit" name="add" id="add" value="Add">Add</button>
</div>
Then if you want to have your list appear above any further content (ie content will be pushed down), you need the following extra styles:
.inputHolder {float:left; margin-right:10px;}
#menu {margin-left:7.5em}
http://jsfiddle.net/FteVT/3/
If you want your list to appear on top of (overlapping) any further content, you can use these styles:
.inputHolder {float:left; margin-right:10px; position:relative;}
#menu {position:absolute; left:7.5em; top:1.5em;}
http://jsfiddle.net/FteVT/4/
sorry this is'nt really an answer but you might be interested in jquery chosen component, which does the job : jQuery Chosen
When I run your code in a fiddle, I get this: http://jsfiddle.net/Lera/VG642/
With this CSS
ul.drop{display:inline-block;}
ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3; color: #28313F; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; background: #1e7c9a;}
The list is under the search box and its label, not to the right as you said. I don't think I'm clear where you want it from your question.
Did you want the list indented? Can you clarify a bit more?
To start you have a href before li that needs to be moved inside of the li, also remove display: block-inline and leave block only, then add #someinput { display: block}
<label for="someinput">Search Ingredients</label>
<input id="someinput">
<ul id="menu" class="drop" style="overflow:auto; max-height:200px;">
<li> ingredient1</li>
<li> ingredient2</li>
<li> ingredient3</li>
<li> ingredient4</li>
<li> ingredient5</li>
</ul>
<label for="qty"></label>
<input type="text" size="5" name="qty" id="qty" />
<button type="submit" name="add" id="add" value="Add">Add</button>
CSS Portion
ul.drop{display:block;}
ul.drop, ul.drop li { list-style: none; margin: 0; padding: 0; background: #ECF1F3; color: #28313F; }
ul.drop li.hover, ul.drop li:hover { display: block; position: relative; z-index: 599; background: #1e7c9a;}
#someinput {
display:block;
}
See my jsfiddle here http://jsfiddle.net/cornelas/P7z7d/embedded/result/
Related
I'm new to CSS layouts and have hit a problem.
This is what I currently have. http://jsfiddle.net/EPp5C/5/
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
}
#login ul {
margin: 0;
padding: 0;
}
#login ul li {
margin: 0;
padding: 0;
display: inline-block;
font-size:14px;
color: white;
}
There are 2 parts to this question.
First part:
I would like the list items to be displayed as
Username: Password:
[textfield] [texfield]
so have the textfields under the corissponding username and password.
http://jsfiddle.net/EPp5C/6/
I added a <br> with a class of clear. I then gave this class the attributes of clear:both;. This will push the floats onto a new line. If you want to line them up, add a width to the elements. If you want to move them further up the page, add a margin-top to the parent elements.
<ul>
<li>Username: </li>
<li>Password: </li>
<br class="clear" />
<li><input type="text" name="username" /></li>
<li><input type="text" name="password" /></li>
</ul>
.clear { clear:both; }
I think you should change your html.
You do not need to put this form info in a ul. In fact, that would be semantically incorrect.
Here is what I suggest:
HTML
<div id="login">
<form>
<label>Username:</label><label>Password:</label>
<br />
<input type="text" name="username" />
<input type="text" name="password" />
</form>
</div>
CSS
label{
display:inline-block;
width:170px;
color: #fff;
}
Also, to put it inside the colored div as much as possible, I used margin-top on the #login
#login {
margin: 0;
padding: 0;
width: 500px;
float: right;
**margin-top:-30px;**
}
Demo
http://jsfiddle.net/EPp5C/9/
i suggest you to put the form child inside span tag
working fiddle
HTML
<div id="login">
<form>
<span>Username:<input type="text" name="username" /></span> 
<span>Password:<input type="text" name="password" /></span>
</form>
</div>
reference:The <span> tag is used to group inline-elements in a document.
CSS (refer complete CSS at the fiddle)
span{
margin-right:10px;
display:inline-block;
width:220px;
color: #fff;
}
hope it can help
In the below code my span is showed at the right side of the text box I want it below the text box. Please let me know what can be done?
<fieldset class="no_border">
<div class="float_left">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
<div class="float_left">
<label>Relationship:</label>
<br />
<input type="text" class="effect" name="nominee_one_relationship" id="nominee_one_relationship" style="width:95%" /><span id="info_nominee_one_relationship">x</span>
</div>
#nominee_details span {
margin-left: 0px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
display:none;
}
fieldset.no_border {
overflow:hidden;
border:0;
padding:0 0 10px 0;
margin:0;
}
.float_left {
float:left;
width:33%;
}
other spans without DIV
<fieldset class="no_border">
<label>Age in years:</label>
<br />
<input readonly="readonly" type="text" class="effect" id="nominee_one_years" name="nominee_one_years" value="0" style="width:20%" /><span id="info_nominee_one_years">x</span>
</fieldset >
JS Fiddle
I actually have 2 situation
1st where are inside fieldset and div as shown above and
2nd where are inside fieldset
span for 1st case are not getting rendered below text box
span for second are displayed properly
if you see my jsfiddle you shall understand what i am trying to explain
http://jsfiddle.net/dwWww/5/
Are you looking for this?
.float_left span {
display: block;
}
If you can use jquery, First you set display: none;
$(".float_left span").css("display","none");
But when you detect an error just do:
$(".float_left span").css("display","block");
Or just:
.addClass() //set display block
.removeClass() //set display none
Or:
$(".float_left span").text("Error!!");
and
$(".float_left span").text('');
Update:
.float_left span, #nominee_details span {
display: block;
}
http://jsfiddle.net/M8XQ6/
span is an inline element, you may want to use a block level element like div or p or set display:block to the span or put a <br/> just before the span.
I want to center the div box im making here but i dont want to center the text in the box and i cant seem to find how to do this. For now what i have is this:
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
display: inline-block;
width: 200px;
}
and
<div class=box>
Login
<form method ="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name"/>
<label for="password">Password:</label>
<input name="password"/>
<p>
<input name="submit" type="Submit" value="Register"/>
<input name="reset" type="reset" value="Clear Form">
</form>
</div>
Thanks in advance!
Remove display: inline-block; & text-align:center
inline-block is not necessary when you are defining the width/height for the div.
By default div is a block element.
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
margin:120px auto;
height:150px;
width: 200px;
}
DEMO
Use dead centre...
.box {
text-align: left;
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -75px;
}
Note: Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
More info:
CSS Tricks Example
jsFiddle Demo
jsFiddle DEMO
Alternate jsFiddle DEMO with Centered Form and also this CSS3 Version.
The key to making the form look correct is to use padding, which is part of box model. Doing so allows you to fill in the sides, and keeps the text left-hand aligned.
HTML
<div class=box>Login
<form method="post" action="addMember.php">
<label for="name">Username:</label>
<input name="name" />
<label for="password">Password:</label>
<input name="password" />
<div class="buttons">
<input name="submit" type="Submit" value="Register" />
<input name="reset" type="reset" value="Clear Form" />
</div>
</form>
</div>
CSS:
.box {
background-color:#3F48CC;
color:white;
font-weight:bold;
height:150px;
width: 150px;
padding: 10px;
}
.buttons{
padding-top: 20px;
}
Screenshot:
I am looking for a neat way to space my form elements but i am not so sure how to do it.
Currently,i am using the ordinary <br/> to space but i wonder if there was a better way of doing this using class or id
<form>
Message: <input type="text" class="msg" name="message" /><br/><br/>
<input type="submit" class="c-add" value="Add" />
<input type="submit" class="c-update" value="Update" />
</form>
I am thinking of
.c-add + .c-update{
margin-right:100px;
}
but that's not valid css.What would be the solution?
.c-add + .c-update is a valid CSS selector. It selects all elements with the "c-update" class that follow immediately an element with the "c-add" class. Example: DEMO (CSS Selector Reference)
Solution
You can seperate multiple selectors with a comma. You do not need to give each input a unique class name. That's only necessary if you want to style them uniquely. Since you did not provide information on how the expected result should look like, i made a demo with different solutions:
DEMO
HTML markup:
<form class="form">
<label>Message:</label><input type="text" class="msg" name="message" />
<input type="submit" class="add" value="Add" />
<input type="submit" class="update" value="Update" />
</form>
Note that i wrapped "Message" with label, which is better markup.
CSS to make a one-row inline form:
.form input {
margin-right: 0.5em;
}
.form label {
float: left;
margin-right: 0.5em;
}
CSS to make a multiple-row form:
.form input {
display: block;
margin-bottom: 1em;
}
.form label {
float: left;
margin-right: 0.5em;
}
You can mix both approaches by using specific classes for each input element or type.
Use a comma to separate selectors.
.c-add, .c-update {
The structure, perhaps this way:
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<ul>
<li>
<label>
<span>Name</span>
<input type="text" name="name" />
<small class="errorText"><?php echo ($_POST["name"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Email</span>
<input type="text" name="email" />
<small class="errorText"><?php echo ($_POST["email"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Subject</span>
<input type="text" name="subject" />
<small class="errorText"><?php echo ($_POST["subject"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<label>
<span>Message</span>
<textarea name="message" cols="80" rows="7"></textarea>
<small class="errorText"><?php echo ($_POST["message"] == "") ? "This field is required" : ""; ?></small>
</label>
</li>
<li>
<input type="submit" name="submit" value="Send" />
</li>
</ul>
</form>
And the CSS for the same:
* {font-family: Segoe UI, Tahoma;}
h1 {font-weight: bold; font-size: 14pt; padding: 5px 0; margin: 5px 0; border: 1px solid #999; border-width: 1px 0;}
input[type='submit'] {padding: 5px 20px; cursor: pointer;}
ul, li {display: block; list-style: none; margin: 0; padding: 0;}
ul li {padding: 5px 0;}
ul li label span {display: block; cursor: pointer;}
ul li label .errorText {color: #f00; font-weight: bold; vertical-align: top;}
ul li label textarea {width: 300px;}
You can see a live demo here: Demo
I have a "multiselect" control that looks like this (sorry for the long id names, they are kinda autogenerated because this whole thing is being generated by a custom tag):
<div class="default-skin-outer" id="myMapSelect_multiSelectOuterDiv">
<div class="default-control" id="myMapSelect_multiSelectControlDiv">
<span class="default-icon-check-text" id="myMapSelect_multiSelectControlCheckWrapperSpan">
<span class="default-icon default-icon-check" id="myMapSelect_multiSelectControlCheckIconSpan"></span><span class="default-icon default-icon-text" id="myMapSelect_multiSelectControlCheckTextSpan">Check All</span>
</span>
<span class="default-icon-uncheck-text" id="myMapSelect_multiSelectControlUncheckWrapperSpan">
<span class="default-icon default-icon-uncheck" id="myMapSelect_multiSelectControlUncheckIconSpan"></span><span class="default-icon default-icon-text" id="myMapSelect_multiSelectControlUncheckTextSpan">Uncheck All</span>
</span>
</div>
<div class="default-skin-inner" id="myMapSelect_multiSelectInnerDiv">
<ul class="default-multiselect">
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="0" class="default-checkbox" id="myMapSelect0" name="myMapSelect"> Zero
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="1" class="default-checkbox" id="myMapSelect1" name="myMapSelect"> One
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="2" class="default-checkbox" id="myMapSelect2" name="myMapSelect"> Two
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="3" class="default-checkbox" id="myMapSelect3" name="myMapSelect"> Three
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="4" class="default-checkbox" id="myMapSelect4" name="myMapSelect"> Four
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="5" class="default-checkbox" id="myMapSelect5" name="myMapSelect"> Five
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="6" class="default-checkbox" id="myMapSelect6" name="myMapSelect"> Six
</label>
</li>
<li class="default-multiselect">
<label class="default-label">
<input type="checkbox" value="7" class="default-checkbox" id="myMapSelect7" name="myMapSelect"> Seven
</label>
</li>
</ul>
</div>
</div>
The CSS for this whole thing is:
div.default-skin-outer {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 300px;
height: auto;
padding: 2px;
background-color: #f0f0f0;
border: 1px solid #999999;
}
div.default-skin-inner {
overflow: auto;
width: 300px;
height: 100px;
}
div.default-control {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: auto;
border: 1px solid #555555;
background-color: #999999;
color: #f0f0f0;
vertical-align: middle;
padding: 2px;
margin-bottom: 2px;
font-weight: bold;
overflow: hidden;
}
ul.default-multiselect {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
ul.default-with-padding {
padding: 0px;
padding-left: 20px;
margin: 0px;
white-space: nowrap;
}
li.default-multiselect {
list-style-type: none;
}
label.default-label {
display: block;
padding: 2px;
}
input.default-checkbox {
width: 13px;
height: 13px;
padding: 0;
margin: 0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
span.default-icon {
background-image: url("/resources/authoring/jqueryui/custom-theme/images/ui-icons_ffffff_256x240.png");
display: inline-block;
height: 16px;
width: 16px;
overflow: hidden;
}
span.default-icon-text {
width: auto;
background: none;
}
span.default-icon-text:hover {
text-decoration: underline;
cursor: pointer;
}
span.default-icon-check-text {
float: left;
}
span.default-icon-uncheck-text {
float: right;
}
span.default-icon-check {
background-position: -64px -144px;
}
span.default-icon-uncheck {
background-position: -96px -128px;
}
This works beautifully in Firefox. The checkboxes scroll without any problem in the scrollable div. But when I looked at this in IE8, it looks terrible.
Firstly, the extra checkboxes bleed outside the main div. Secondly (and this is the really strange thing) when I use the scroll bar, the text scrolls, but the checkboxes do not. They simply stay in place while the text scrolls. I tried googling for a solution but was unable to come up with anything.
Thanks!
UPDATE
So I found out that if I remove the funky part in the checkbox styling:
vertical-align:bottom;
position:relative;
top: -1px;
*overflow: hidden;
It works fine. But I put that in to make sure my labels and checkboxes are lined up properly.
Oh yes as far as the compatibility view is concerned, this is IE8 running under compatibility mode.
In response to the comments about inherited styles, here are styles that the checkbox inherits:
input {
border:1px solid #CFCFCF;
color:#000000;
font-family:Arial,Verdana,Sans-Serif;
font-size:12px;
padding-left:4px;
}
li.default-multiselect {
list-style-type:none;
}
ul.default-with-padding {
white-space:nowrap;
}
table {
empty-cells:show;
}
html, body {
line-height:16px;
}
I don't see anything that could potentially interfere...
There seems to be some strange interaction between inherited styles and the styles I have defined. That much is clear from Jacob's and Ray's comments since they were able to slap this code onto a page and have it render fine in IE without any issues.
I was able to make it behave properly by removing position:relative from the input.default-checkbox style.
I'm assuming that some sort of bizarre interaction is making the checkboxes think they are positioned statically or absolutely (or something) due to which they don't scroll. At least I think that's the reason; someone may be able to provide a better reason and shed light on this. At any rate, by removing the position:relative, I was able to make the strange scrolling-behavior stop. Thanks for helping me figure this out!
As #rossisdead suggested, adding position: relative to the scrolling element solves the problem. I also had to add position: relative to the parent of the scrolling element.
Make sure you don't have position: fixed set on your checkboxes in any other stylesheets.