I am utilizing the 960 CSS grid system. I was making a really quick mock up of a website and noticed that my line breaks were rendering quite differently in chrome than they were in IE8.
The following link has screenshots of both browsers. The first image is IE8 and the second is Chrome: http://imgur.com/YLgcsl&kIeTn
What can I do to rid my code of inconsistencies
Here is the code I am using.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>The 1Kb Grid Demo – 16 columns, 60 pixels each, with 20 pixel gutter</title>
<link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css" media="screen">
body { margin: 20px 0 0 0; }
p {
font:60px/100px Helvetica;
color: #000;
text-align: center;
border: 1px solid #000;
margin: 0 0 20px 0;
}
label {
float:left;
}
</style>
</head>
<body>
<div class="row">
<div class="column grid_16"><p>16</p></div>
</div>
<div class="row">
<div class="column grid_8">
<label>First name: </label><br /> <input type="text" name="firstname" /><br />
<label>Last name: </label><br /> <input type="text" name="lastname" /><br />
<label>ID: </label><br /> <input type="text" name="employnum"/>
<br />
<label>Observer</label><br />
<select style="width:150px" name="observer">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Observed</label>
<form action="">
<select style="width:150px" name="observed">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="other">Other</option>
</select><br />
<label>Operation Code</label><br />
<select style="width:150px" name="opcode">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Center</label><br /><br />
<select style="width:150px" name="cost">
<option value="Zone 1"> Zone 1 </option>
<option value="Zone 2"> Zone 2 </option>
<option value="Zone 3"> Zone 3 </option>
</select>
</form>
<div class="row">
<div class="column grid_4"><p>4</p></div>
<div class="column grid_4"><p>4</p></div>
</div>
</div>
<div class="column grid_8"><p style="line-height: 222px;">8</p></div>
</div>
</body>
</html>
Use CSS reset.
Browsers (User Agents in general) apply a predefined style on HTML elements. To cancel those predefined styles, designers and developers are encouraged to use resets.
What is your question? The only difference I see at a glance is the width of of the dropdown lists are different. Try setting a fixed width on your select elements via css.
Related
I know the question has been asked a lot here, but I'm very new to programming and very new to HTML in general. Therefore, the questions already asked did not help me, I would rather need a short code fix. I have these two HTML files and all I want to do is to display the input from the input HTML in the text field of the output HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress">a</option>
<option value="in progress">b</option>
</select>
</div>
</form>
</div>
<a href="link_to_testOutput.html">
<button type="button" id="ok-button">OK</button> </a>
<button form="formOverlay" type="reset" id="reset-button">Reset</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50">Number:
Value: </textarea>
</div>
<a href="link_to_testIput.html">
<button type="button" id="back-button">Back</button> </a>
</body>
</html>
Just submit the form to the next page:
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay" method="get" action="link_to_testOutput.html">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress A">a</option>
<option value="in progress B">b</option>
</select>
</div>
<button id="ok-button">OK</button>
<button type="reset" id="reset-button">Reset</button>
</form>
</div>
Page 2
window.addEventListener("load", function() {
const url = new URL("https://yourserver.com/link_to_testOutput.html?dropSelectBlock=in%20progress B&numberOption=9") // new URL(location.href)
document.getElementById("currentInputBox").value = `Number:${url.searchParams.get("numberOption")}\nValue: ${url.searchParams.get("dropSelectBlock")}`
})
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50"></textarea>
</div>
When tested change
const url = new URL("https://....") // new URL(location.href)
to
const url = new URL(location.href);
On my website Website I can't seem to get these drop down menus right next to each other, how would I do that?
This is the code I have...
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$MODULE_NAME$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
$GLOBAL_AHEADER$
<!-- <middle> -->
<div id="maincol">
$MODULE_SEARCH_FORM$
<!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><!--<s5176>-->MAIN<!--</s>--> » <!--<s5208>-->MOVIES<!--</s>--></td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <!--<s5202>-->Add new entry<!--</s>--> ]<?endif?></td>
</tr>
</table>
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<div>
<form name="yearselect">FILTER BY:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</form>
</div><div>
<form name="genreselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</form>
</div>
<td align="right"><?if($PAGE_SELECTOR$)?><!--<s3015>-->Pages<!--</s>-->: $PAGE_SELECTOR$<?endif?></td>
</tr>
</table>
<hr />
$BODY$
<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?> <!-- </body> -->
</div>
<div id="sidebar">
<div id="soc">
<?if($RSS_LINK$)?> <?endif?>
</div>
$GLOBAL_CLEFTER$
</div>
<div class="clear"></div>
<!-- </middle> -->
</div>
</div>
$GLOBAL_BFOOTER$
</div>
</div>
</div>
</body>
</html>
That is the full source of the code but, I only need help with part..
Here's a valid HTML5 solution to your problem, fiddle
<form>
<table>
<tr>
<td>FILTER BY:
<select name="yearselect">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</td>
<td>
<select name="genreselect">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</td>
</tr>
</table>
</form>
Avoid table!! Refer this fiddle
Markup:
<div>
<form name="yearselect">FILTER BY:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</form>
</div><div>
<form name="genreselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</form>
</div>
CSS:
div {
display: inline-block;
width: 50%;
}
So you have the table stretching all the way across the div, and each drop down centered in each column. You need to set a max width on the table's div so that it will only spread a certain width and then the drop downs will not spread further apart from that. Or, you could put them in the same column (so basically no table) and justify them to one side.
I have a sample html page as shown below
But when i add a row underneath the row which encompasses a div block and form in itself, i encounter a behaviour where the td tag of the first row increases in its width as shown in the image below
The source code for the page is below
<html>
<body>
<div style="left: 100px; position: relative; width: 400px;">
<table>
<tr>
<td><label style="font-size:17px;"> Select the operation:</label>
</td>
<td><select style="font-size:15px" property="" id="operation" name="operationSelection" onchange="categorySelector()">
<option value="addOp"> Addition </option>
<option value="searchOp"> Search </option>
<option value="listOp"> List </option>
<option value="updateOp"> Update </option>
<option value="deleteOp"> Delete </option>
</select></td>
</tr>
<tr>
<td>
<div id="add" style="position: relative; width: 200px;">
<form name="addForm" action="udm_2.jsp" method="POST">
<table>
<tr>
<td>
<label style="font-size:17px;"> Select the Gender:</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="addCategory" value="male" checked="checked">Male<br>
<input type="radio" name="addCategory" value="female">Female<br>
</td>
</tr>
<tr>
<td>
<input type="submit"/>
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
I tried changing width of the td but in vain
so can someone please explain the reason for the behaviour?
This is because you have width: 200px; set to the div that is a child of your first td element inside your second tr element.
Table cells(td) always have the same width as the longest cell in that column.
this means that your first td elment(and all other elements in that column) will have a width of 200px.
To solve this either remove the 200px width from the div or move the select box to within the same td element as its label like so:
<td>
<label style="font-size:17px;"> Select the operation:</label>
<select style="font-size:15px" property="" id="operation" name="operationSelection" onchange="categorySelector()">
<option value="addOp"> Addition </option>
<option value="searchOp"> Search </option>
<option value="listOp"> List </option>
<option value="updateOp"> Update </option>
<option value="deleteOp"> Delete </option>
</select></label>
</td>
If it's not necessary to use tables in this instance I would recommend switching to divs instead. Using tables is great if you actually need to show your content in a tabular format. If this is not the case then tables aren't the way to go.
Using HTML table elements for styling purposes is considered a bad practice. You should really think about using other elements, divs for example. Much better then divs would be elements with a semantic value. I would also recommend to place your CSS in a separate CSS file. Think also about em units in your CSS instead of px.
Here you have a demo with divs.
The HTML code with divs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="path/to/your/css/styles.css">
</head>
<body>
<div class="wrapper">
<div>
<label class="label"> Select the operation:</label>
<select id="operation" name="operationSelection" onchange="categorySelector()">
<option value="addOp"> Addition</option>
<option value="searchOp"> Search</option>
<option value="listOp"> List</option>
<option value="updateOp"> Update</option>
<option value="deleteOp"> Delete</option>
</select>
</div>
<div id="add" class="form-wrapper">
<form name="addForm" action="udm_2.jsp" method="POST">
<div class="label"> Select the Gender:</div>
<div>
<input type="radio" name="addCategory" value="male" checked="checked" id="male">
<label for="male">Male</label>
</div>
<div>
<input type="radio" name="addCategory" value="female" id="female">
<label for="female">Female</label>
</div>
<input type="submit" value="send"/>
</form>
</div>
</div>
</body>
</html>
The CSS in your styles.css:
.wrapper {
left: 100px;
position: relative;
width: 400px;
}
.form-wrapper {
position: relative;
width: 200px;
}
.label {
font-size: 1.1em;
}
select {
font-size: .9em;
}
<html>
<body>
<form name="orderform" action="order.php" method="POST">
<label>Username</label><br>
<input name="user" type="text" value="" size="10" maxlength="22">
<br>
<label>Items</label>
<div align="left">
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
</div>
<label>Quantity</label>
<div align="left">
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
</div>
<input name="Order" type="submit" value="Order">
</form>
<form name="orderform" action="addtocart.php" method="POST">
<input name="Cart" type="submit" value="Add to Cart">
</form>
</body>
</html>
after executing this code all output is in vertical form i just wanted to make it in a line.please give me a solution i am new in php.
Try this
<!doctype html>
<html>
<head>
<style type="text/css" media="screen">
form div {
display: inline-block;
}
</style>
</head>
<body>
<form name="orderform" action="order.php" method="POST">
<div>
<label>Username</label>
<input name="user" type="text" value="" size="10" maxlength="22">
</div>
<div align="left">
<label>Items</label>
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
</div>
<div align="left">
<label>Quantity</label>
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
</div>
<div>
<input name="Order" type="submit" value="Order">
</div>
<div>
<input name="Cart" type="submit" value="Add to Cart">
</div>
</form>
</body>
</html>
It would be easy to put it all on one line using CSS. You would just remove the default line breaking effects of some elements:
form, form div { display: inline }
form br { display: none }
To do the same in HTML requires modification of the HTML markup, of course. You just remove the div and br tags, but the forms require special treatment: the way to put two forms on one line in HTML is to put them in a table:
<html>
<body>
<table cellpadding=0 cellspacing=0>
<tr><td>
<form name="orderform" action="order.php" method="POST">
<label>Username</label>
<input name="user" type="text" value="" size="10" maxlength="22">
<label>Items</label>
<select name="mydropdown">
<option value="macbook">Macbook</option>
<option value="sony">Sony</option>
<option value="micromax">Micromax</option>
<option value="napolean">Napolean</option>
<option value="motorola">Motorola</option>
</select>
<label>Quantity</label>
<select name="mydropdown">
<option value="quantity1">1</option>
<option value="quantity2">2</option>
<option value="quantity3">3</option>
<option value="quantity4">4</option>
<option value="quantity5">5</option>
</select>
<input name="Order" type="submit" value="Order">
</form>
<td>
<form name="orderform" action="addtocart.php" method="POST">
<input name="Cart" type="submit" value="Add to Cart">
</form>
</table>
</body>
</html>
This question already has answers here:
Align <div> elements side by side
(4 answers)
Closed 4 years ago.
I need to align two divs next to each other, so that each contains a title and a list of items, similar to:
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
It's remarkably easy to do with tables, but I don't want to use tables. How can I achieve this?
Float the divs in a parent container, and style it like so:
.aParent div {
float: left;
clear: none;
}
<div class="aParent">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
Nowadays, we could use some flexbox to align those divs.
.container {
display: flex;
}
<div class="container">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
<div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
Clear must be used so as to prevent the float bug (height warping of outer Div).
style="clear:both; font-size:1px;
You need to float the divs in required direction eg left or right.
Wrap them both in a container like so:
.container{
float:left;
width:100%;
}
.container div{
float:left;
}
<div class='container'>
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>
Add a class to each of the divs:
.source, .destination {
float: left;
width: 48%;
margin: 0;
padding: 0;
}
.source {
margin-right: 4%;
}
<div class="source">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div class="destination">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
That's a generic percentages solution - using pixel-based widths is usually much more reliable. You'll probably want to change the various margin/padding sizes too.
You can also optionally wrap the HTML in a container div, and use this CSS:
.container {
overflow: hidden;
}
This will ensure subsequent content does not wrap around the floated elements.
float is obsolete, better use display: flex;:
example :
.parent-div{ display: flex; }
indicate the direction by flex-direction: row/column;.
go down if no space by flex-wrap: wrap/nowrap;
more properties here.
if you have two divs, you can use this to align the divs next to each other in the same row:
#keyword {
float:left;
margin-left:250px;
position:absolute;
}
#bar {
text-align:center;
}
<div id="keyword">
Keywords:
</div>
<div id="bar">
<input type = textbox name ="keywords" value="" onSubmit="search()" maxlength=40>
<input type = button name="go" Value="Go ahead and find" onClick="search()">
</div>
<html>
<head>
<style type="text/css">
#floatingDivs{float:left;}
</style>
</head>
<body>
<div id="floatingDivs">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div id="floatingDivs">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</body>
</html>
For your purpose, I'd prefer using position instead of floating:
http://jsfiddle.net/aas7w0tw/1/
Use a parent with relative position:
position: relative;
And children in absolute position:
position: absolute;
In bonus, you can better drive the dimensions of your components.