I'm doing my first piece of HTML & CSS today, and I'm having trouble trying to move a div. I read some tutorials on CSS and tried to replicate what I've seen. But for some reason I cannot get the div to move.
Can anybody set me straight as to what I've done wrong please?
CSS
#seax {
position:static;
top:400;
left:400;
}
HTML
<div id="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
Change position:static; to position:relative;. Static position displays the div in it's default position, which is as it'd appear in the document flow you see.
Add "px" to your CSS, and use absolute
#seax {
position:absolute;
top:100px;
left:100px;
}
http://jsfiddle.net/djwave28/tnvQz/
It really depends on how you want to position the div.
position: static; is definitely your issue, as static position (as #Omega noted) displays the div in it's default position. You mean to write either position: absolute or position: relative. The difference between the two is best outlined here but I'll give you a tl;dr.
position: absolute positions the div relative to the whole page, whereas position: relative positions it relative to the parent.
Also, you are missing px at the end of your top and left property values (i.e top:10px; and left:10px;)
Give the div a position of absolute
#seax {
position: absolute;
top:400;
left:400;
}
Try changing
<div id="seax"></div>
to
<div class="seax"></div>
and
#seax {
position:static;
top:400;
left:400;
}
to
.seax {
position:absolute;
top:400px;
left:400px;
}
if you want to use seax for multiple elements.
You could even try:
<form autocomplete="off" method="post" action="/search.html">
<div class="seax">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif" value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</div>
</form>
That should fix it. Otherwise your HTML document should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.seax {
position:absolute;
top:400px;
left:400px;
}
</style>
<body>
<div class="seax">
<form autocomplete="off" method="post" action="/search.html">
<table>
<tbody>
<tr>
<td>Search:</td>
<td>
<input type="text" size="40" name="for" class="ui-
autocomplete-input" autocomplete="off" role="textbox" aria-
autocomplete="list" aria-haspopup="true">
</td>
<td>
<input type="hidden" name="brand" value="0">
<input type="image" src="/user/templates/custom/search.gif"
value="Go" alt="Go" style="padding: 0px">
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
Related
I am using select2 for a dropdown in a form and I like using a table layout (although maybe this is part of the problem?) to keep the widths of all of the form-group elements the same.
The problem is that when I type text into the select2 dropdown, the width changes (and in weird ways). Is there a way I can force the initial width that the browser gives the select2 dropdown to remain fixed?
Here is my html:
<table>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>Title</label>
<input name="title" class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<input class="form-control"/>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label>a label</label>
<select id="tag_list" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="row action">
<div class="form-group">
<div class="inline">
<button class="btn btn-primary form-control" type="submit">submit</button>
</div>
<div class="inline">
<button class="btn btn-primary cancel">Cancel</button>
</div>
</div>
</div>
</td>
</tr>
</table>
and my css:
.form-group{
display: block;
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
height: 30px;
border: 1px solid #e3e3e3;
padding: 3px 10px;
width: 100%;
}
.inline{
float:left;
margin-right: 5px;
}
span.select2-container{
width: 100% !important;
tex-overflow: ellipsis;
}
Here is a fiddle example. You can try it out by typing something long enough into the select2 dropdown and pressing enter seeing that the width changes. How can I stop that from happening?
I Added a new css class that seems to work aimed at that specific select box.
The + is equivalent to the jquery next function. This should get you pointed in the right direction. Just to be safe, make sure this is set after you load the select2 css.
#tag_list + .select2-container .select2-selection--multiple {
max-width: 400px;
}
So if you want the search box to be the same size for all select2s (single or multi ) then try...
.select2-container .select2-dropdown,
.select2-container .select2-selection--multiple {
max-width: 300px;
}
I turned the last select box into a select2 and tried this.
What I am doing is using the DOM explorer built into IE to find the element that is giving me issues and what classes are being applied. Then I simple overwrite or append them.
by setting width=100% as below
<select id="tag_list" style="width:100%; display:block;" class='form-control' multiple="multiple">
<option value='1'>abba</option>
<option value='2'>zabba</option>
<option value='3'>doo</option>
</select>
.select2 dropdown to stay at constant width in table tag use below style in your code
<style>
.select2-container{
width: 100% !important;
}
</style>
I have a big table and this is the last row of that table:
<tr>
<td>
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
Inside my last td there are two buttons inside forms (is this good way to do it?). What I want to do is to middle align both "Back" and "Delete" buttons so that they look nice. Now it looks like a zigzag (see picture). I've given id or class -tags to those buttons and tried to move them with bottom, left, display, float etc. commands with no results.
I can't make two td's (one td for one button) because there is so much space between td's.
What should I do?
[edit] Here is a jsFiddle to demonstrate. [/edit]
Forms are block-level elements, simply turn them into inline-block and they'll sit nicely side-by-side.
<table>
<tr>
<td>
<form action="index.jsp" method="get" style="display: inline-block;">
<button type="submit" id="backButton">Back</button>
</form>
<form action="deleteServlet" method="post" style="display: inline-block;">
<button type="submit" name="delete" class="deleteButton" value="${placeholder.placeholder_id}">Delete</button>
</form>
</td>
</tr>
</table>
The styling would be better done as part of your stylesheet, but added here as style attributes for simplicity.
You could try something like this:
<tr>
<td style="line-height:30px;">
<div style="height:30px; float:left;">
<form action="index.jsp" method="get">
<button type="submit" id="backButton">Back</button>
</form>
</div>
<div style="height:30px; float:left;">
<form action="deleteServlet" method="post">
<button type="submit" name="delete" class="deleteButton"
value="${placeholder.placeholder_id}">Delete</button>
</form>
</div>
<div style="clear:both;"></div>
</td>
</tr>
Let me know if it works (or not) :)
Simply align form tag with display:inline-block in last-child td
Clarification in fiddle : http://jsfiddle.net/HarishBoke/uHCyU/
In the following snippet I want <span>1</span> to have the same width, as <input type="text" size="1" value="1" />
Same for second span and second input. And so on.
<!DOCTYPE HTML>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<input type="text" size="1" value="1" />
<input type="text" size="1" value="2" />
<input type="text" size="1" value="3" />
</div>
</body>
</html>
How can I accomplish this with css?
UPD: Sorry, I did not make it clear, that it must be 2 rows. Row of spans and row of inputs
I assume that you want to retain the span elements inline behavior, but inline1 elements don't take width, so assign display: inline-block; to your span elements
div span {
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #f00;
}
div input[type=text] {
width: 25px;
}
Demo
1. Inline Elements
Note: As you might be aware, inline-block retains white space between the elements, to get rid of that, either call font-size: 0; on the parent element, or consider floating your elements to the left, and you don't have to use size attribute anymore, consider assigning width to the elements using CSS instead.
Also make sure you normalize your CSS for cross browser consistency.
Remove the size of one on the inputs and add a class.
(Just in case you dont know, 1 em = the current font-size)
<!DOCTYPE HTML>
<style>
.one {
width: 1em;
}
.two {
width: 1em;
}
.three {
width: 1em;
}
</style>
<body>
<div>
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
<div>
<input type="text" class="one" value="1" />
<input type="text" class="two" value="2" />
<input type="text" class="three" value="3" />
</div>
</body>
</html>
JsFiddled here :
span, input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:222px;
height: 33px;
padding:0;
margin:0;
display:block;
float:left
}
BUT, by forcing the input in a border-box layout, you will have to deal with some other situations....
Somehow, i feel ashamed trying to help you without seeing first what you have tried.
Well if you want to remain your span's, you could use something like this:
#wrapper
{
height: auto;
width: 500px;
}
span, input
{
width: 30%;
display: inline-block;
}
jsFiddle
However, your layout is so close to a table layout. So why not use the <table> element:
<table>
<tr>
<td>
<label>1</label>
</td>
<td>
<label>2</label>
</td>
<td>
<label>3</label>
</td>
</tr>
<tr>
<td>
<input type="text" size="1" value="1" />
</td>
<td>
<input type="text" size="1" value="2" />
</td>
<td>
<input type="text" size="1" value="3" />
</td>
</tr>
</table>
jsFiddle
as i am new in html, css, php so i am facing so many problems in completing a small project.So please don't mind. I've included a screen shot. Problem is that whenever i click radio button 'Yes' then only the input text fields of corresponding table should work. If i select the button 'No' then the text fields should be hidden i.e it will not take any input and i should be able to proceed without filling up the table. Thanks in advance.
.html
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
I left the rest part of the code...if necessary i will post
Your issue is solved, please check:
Simply add these scripts:
<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- Applying Custom JS -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
// Disabling Text Fields by default
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
$(".inputradio1 input[name=sex]").change(function () {
var val = $(this).val();
if (val == "No") {
$("table input[type='text']").each(function () {
$(this).attr("disabled", "disabled");
});
} else if (val == "Yes") {
$("table input[type='text']").each(function () {
$(this).removeAttr("disabled");
});
}
});
});
</script>
Or checkout the fiddle here http://jsfiddle.net/kDG5t/2/
something like that http://jsfiddle.net/Z8jU3/1/ ?
$('.detailradio1').change(function(){
if($(this).attr('id')=='sex' && $(this).is(':checked')){
$('table').hide();
}else{
$('table').show();
}
})
In html part I am just defining the ID's of input box.
HTML:-
<body>
<form action="reg2.php" method="post">
<div id="formWrap">
<div class="row">
<div class="label1" style="color:#0000CC; text-align:center; font-size:30px">B.E. Degree Course Registration</div>
</div> <!-- end of 0th row -->
<div id="form">
<div class="row">
<div class="labelusn1">USN</div>
<div class="inputusn">
<input type="text" id="usn" required="required" class="usndetail" name="usn"/>
</div>
</div> <!-- end of 1st row -->
<h1 style="color:#FF0000; font-style:italic; margin-left:55px; font-size:18px">Courses Dropped/Withdrawn/Failed in Previous Year:</h1>
<div class="row>
<div class="inputradio1" style="margin-left:50px">
<input type="radio" id="radio" required="required" class="detailradio1" name="sex" Value="Yes" />Yes, I have course(s) dropped/withdrawn/failed in previous year<br/>
<input type="radio" id="sex" required="required" class="detailradio1" name="sex" value="No"/>No, I don't have course(s) dropped/withdrawn/failed in previous year<br/></div>
</div> <!-- end of row -->
<table width="719" border="1" align="center" style="margin-top:10px">
<tr bgcolor="#A7A7A7">
<td width="87"><div align="center" class="style1"> Course Code </div></td>
<td width="50"><div align="center" class="style2"> Credits</div></td>
<td width="87"><div align="center" class="style3"> Status(D/W/F)</div></td>
<td width="467"><div align="center" class="style4"> Remarks</div></td>
</tr>
<tr>
<td><input type="text" id="course_code" name="cc1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="credits" name="c1" style="width:48px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="status" name="s1" style="width:85px;outline:none; border:hidden;margin:1px"/></td>
<td><input type="text" id="remarks" name="r1" style="width:465px;outline:none; border:hidden;margin:1px"/></td>
and jquery for this is :-
$('#radio').click(function()
{
$('#course_code').removeAttr("disabled");
$('#credits').removeAttr("disabled");
$('#status').removeAttr("disabled");
$('#remarks').removeAttr("disabled");
});
$('#sex').click(function()
{
$('#course_code').attr("disabled","disabled");
$('#credits').attr("disabled","disabled");
$('#status').attr("disabled","disabled");
$('#remarks').attr("disabled","disabled");
});
If you want that all input box to be disabled on initial page load then you have to mention disabled="disabled" in all input box like this:-
rest all is same ....
You could use CSS if you just want the whole section hidden.
If you have the radio(s) on the same DOM level as a container element like a div for example:
div.formContainer {
display: none;
}
input[type=radio]#yes:checked ~ div.formContainer {
display: block;
}
The HTML would basically have something along the lines of:
<input type="radio" name="yesno" id="yes" /><label for="yes">Yes</label>
<input type="radio" name="yesno" id="no" /><label for="no">No</label>
<div class="formContainer">
<input type="text" id="input1" name="input1" value="Hello World!" />
</div>
This SHOULD mean that if "yes" is the current choice then the text input field should be visible and if yes is not the current choice then the field will be invisible.
I have this div that is showing the products for an e-commerce site.
I have it well alligned with css and a table inside it, but using tables for content seems to be frowned upon/not the best so I'm trying to do it correctly, hasn't worked out so far. The products div looks like this:
Crude unedited screenshot : http://img255.imageshack.us/img255/6832/printt.png
That is the look I want. I tried nesting 2 divs in the products div, one floating right with the image, title and description, the other one floating right with the table elements.
Thought I had worked it out to a decent look on some pages, but on others (displaying other products) it looks different and messed up. I'm thinking this is due to the fact the links were taking on the width of the whole products div, ending up over the right div.
How do I stop that behavior, I want the links to wrap around the text maybe the problem would go away then. Or are you suggesting something else?
HTML looks like this :
<div id="products">
<img src="fetch.php?id=4" width="129" height="129" alt="PRC200" />
<h3>PRC200</h3>
<table border="0">
<tr>
<td><h4>100,00 RON</h4></td>
</tr>
<tr>
<td class="out">Indisponibil</td>
</tr>
<form action="" method="post">
<tr>
<td><input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /></td>
</tr>
</form>
<form action="detalii.php" method="get">
<tr>
<td>
<input type="hidden" name="id_produs" value="4" />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</td>
</tr>
</form>
</table>
<p>M-am saturat de atatea litere si numere</p>
</div>
Here is a tableless solution. Keep in mind take the tags and place them in an external CSS file. By using a tableless structure you'll see how much more condensed the code is.
<style>
.product { border:1px solid red; padding:10px; }
.productimg { float:left; padding-right:15px; }
.purchasedetails { float:right; padding-left:15px; }
</style>
<div id="products">
<div class="product">
<div class="purchasedetails">
<h4>100,00 RON</h4>
<p>Indisponibil</p>
<input type="image" src="images/button_basket.jpg" name="submit_cos" width="118" height="25" /><br />
<input type="image" src="images/button_details.jpg" name="submit_detalii" width="118" height="25" />
</div>
<div class="productimg"><img src="fetch.php?id=4" width="129" height="129" alt="PRC200" /></div>
<h3>PRC200</h3>
<p class="description">Insert Description Here</p>
<div style="clear:both;"></div>
</div>
</div>
I only have this nexted inside the <div id="products"> because it was listed in your code. The inside products div would essentailly fill whatever content area it is placed in whether it is a <td> or<div>