I've created JSFiddle here: https://jsfiddle.net/fpqwruyd/
html:
<body>
<table style="width:100%">
<tr>
<td colspan=1>Jill</td>
<td colspan=2>Smith</td>
</tr>
<tr>
<td colspan=1>Eve</td>
<td colspan=2>Jackson</td>
</tr>
<tr>
<td colspan=1>John</td>
<td colspan=1>Doe</td>
<td colspan=1>
<input type="text"></input>
</td>
</tr>
</table>
</body>
css:
input[type=text] {
width: 100% ;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
min-height:35px;
padding: 0px !important;
margin: 0px !important;
border-color: white !important;
border: 0px !important;
}
I want to apply different CSS to the input text in my html. The existing input[type=text] should apply to other input texts in my html (not shown). How can I do that? I defined a new class but it's not being applied. Thanks in advance.
try this input[type="text"]{} or if it fails use !important in your styles to try.
You might look at http://www.w3schools.com/css/css_attribute_selectors.asp
Check out this JSFiddle I created: https://jsfiddle.net/sks9bo5u/1/
It demonstrates a few scenarios of combining classes with TYPE attributes to select different elements.
<body>
<input type="text" class="red" value="This is RED"></input><p>
<input type="text" class="blue" value="This is NOT Blue"></input><p>
<input type="text" class="green" value="This is GREEN"</input><p>
<br>
<input type="button" class="red" value="This is NOT RED" /><p>
<input type="button" class="blue" value="This is BLUE" /><p>
<input type="button" class="green" value="This is ALSO GREEN" /><p>
</body>
.red[type=text]
{
/* This class turns input tags of ONLY type "text" RED */
border:1px red solid;
color:red;
}
.blue[type=button]
{
/* This class turns input tags of ONLY type "button" BLUE */
border:1px blue solid;
color:blue;
}
.green
{
/* This class turns any input type GREEN */
border:1px green solid;
color:green;
}
Related
I cant remove the extra padding above and below the textarea in google chrome
https://jsfiddle.net/y4fe39mr/1/
<td rowspan="3" class="biginputcell">
<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
</td>
I cannot figure out where the extra 15px padding is comming from in chrome.
.biginput{
width:230px;
height:150px;
font-size:0px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
resize: none;
display: block
}
.biginputcell{
background-color:blue;
vertical-align:middle;
height:160px;
}
I have accepted the answer pointing out the issue with rowspan because it was the direct fix to the issue.
However as one of the answers pointed out divs are the better way to make my form, I will be changing the form to div tags rather than an overly complicated table.
The problem is that your column is middle aligned. If you align your textarea to the top, this won't happen.
I personally think there are too many unnecessary classes in your code. You should consider simplifying it. Also, I wouldn't recommend using table for structuring your forms. It can get quite confusing.
Here a suggestion for you.
*{
margin:0;
padding:0;
border: 0;
font-family:sans-serif;
}
.form {
display: table;
padding: 10px;
background-color: blue;
}
.column {
display: table-cell;
vertical-align: top;
}
.column + .column {
padding-left: 10px;
}
.form-group {
display: table;
}
.form-group > * {
display: table-cell;
}
.form-group + .form-group {
margin-top: 10px;
}
.label {
color: white;
font-size:15px;
min-width: 60px;
line-height: 30px;
vertical-align: middle;
text-align: right;
padding-right: 10px;
}
.input{
width:230px;
height:30px;
resize: none;
}
.input.small {
width: 90px;
}
.input.big {
height: 150px;
}
.button{
font-size:15px;
height:90px;
width:90px;
}
<form action="edit.php" method="POST" class="form">
<div class="column">
<div class="form-group">
<label class="label" for="time">Time:</label>
<input class="input" type="text" name="time" id="time" value="" />
</div>
<div class="form-group">
<label class="label" for="events">Event:</label>
<input class="input" type="text" name="events" id="events" value=""/>
</div>
<div class="form-group">
<label class="label" for="notes">Notes:</label>
<textarea class="input big" type="textarea" name="notes" id="notes" value=""></textarea>
</div>
</div>
<div class="column">
<div class="form-group">
<select class="input small" id="preset" onchange="fillpreset(value)">
<option value="0">PRESET</option>
<option value="1">Pre Service</option>
<option value="2">Worship</option>
<option value="3">MC Bridge</option>
<option value="4">Message AM</option>
<option value="5">Message PM</option>
</select>
</div>
<div class="form-group">
<input class="button" type="submit" name="task" value="Go" />
</div>
<div class="form-group">
<input class="button" type="submit" name="task" value="Clear" />
</div>
</div>
Change the rowspan=3 to rowspan=4 in your markup for the elements with classes biglabelcell and biglabelinput
check the following code snippet
*{
margin:0;
padding:0;
}
textarea {
overflow: hidden;
}
.edittable{
height:240px;
width:400px;
border-collapse:collapse;
overflow:hidden;
table-layout: fixed;
}
.labelcell{
width:60px;
height:40px;
font-family:sans-serif;
background-color:blue;
}
.label{
width:50px;
height:30px;
font-size:20px;
font-family:sans-serif;
}
.biglabel{
width:50px;
font-size:20px;
font-family:sans-serif;
}
.biglabelcell{
background-color:blue;
}
.inputcell{
width:240px;
background-color:blue;
}
.input{
width:230px;
height:30px;
font-size:15px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
}
.biginput{
width:230px;
height:150px;
font-size:0px;
font-family:sans-serif;
margin:0;
padding:0;
border:0px;
resize: none;
display: block
}
.biginputcell{
background-color:blue;
vertical-align:middle;
height:160px;
}
.selectcell{
width:100px;
height:40px;
font-size:15px;
font-family:sans-serif;
background-color:blue;
}
.select{
width:90px;
height:30px;
border:0px;
}
.buttoncell{
height:100px;
width:100px;
background-color:blue;
}
.button{
height:90px;
width:90px;
border:0px;
}
<form action="edit.php" method="POST">
<table class="edittable">
<tr>
<td class="labelcell">
<label class="label" for="time">Time:</label>
</td>
<td class="inputcell">
<input class="input" type="text" name="time" id="time" value="" />
</td>
<td class="selectcell">
<select class="select" id="preset" onchange="fillpreset(value)">
<option value="0">PRESET</option>
<option value="1">Pre Service</option>
<option value="2">Worship</option>
<option value="3">MC Bridge</option>
<option value="4">Message AM</option>
<option value="5">Message PM</option>
</select>
</td>
</tr>
<tr>
<td class="labelcell">
<label class="label" for="events">Event:</label>
</td>
<td class="inputcell">
<input class="input" type="text" name="events" id="events" value=""/>
</td>
<td rowspan="2" class="buttoncell">
<input class="button" type="submit" name="task" value="Go" />
</td>
</tr>
<tr>
<td rowspan="4" class="biglabelcell">
<label class="biglabel" for="notes">Notes:</label>
</td>
<td rowspan="4" class="biginputcell">
<textarea class="biginput" type="textarea" name="notes" id="notes" value=""></textarea>
</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="2" class="buttoncell">
<input class="button" type="submit" name="task" value="Clear" />
</td>
</tr>
Hope this helps. If not can you please explain how the page should look like a snapshot would be helpful
body
{
background-image:url("images/Wheat.jpg");
}
p
{
font-family: "Sans-serif";
font-size: 20px;
text-align: justify;
}
/* unvisited link */
a:link {
color: #000000;
text-decoration: none;
font-size:150%;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #000000;
}
{color:#996633;
font-family:Arial;
text-align: center;
font-size: 200%;
}
h3
{
color:#996633;
font-family:Arial;
font-style: italic;
text-align:left;
font-size: 200%;
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- specify link to external layout file -->
<link rel="stylesheet" type="text/css" href="CSS/Testimonials.css"/>
<title>Sandwich Express</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table img-src="images/sanex.jpg" width="100%" style="height: 50%;" cellpadding="10" cellspacing="0" border="0">
<tr>
<!-- HEADER SECTION -->
<td colspan="2" style="height: 80px;" bgcolor="#FFFFFF"><h1><img src="CSS/images/sanex.jpg" alt="Sandwich Express" style="width:100%;height:150px"> </h1></td></tr>
<!-- NAVIGATION BAR SECTION -->
<tr><b><td colspan="5" valign="middle" height="40" bgcolor="#ECE5B6">Home</b></td></tr>
<tr>
<!-- LEFT COLUMN (MENU) -->
<td width="10%" valign="top" bgcolor="#DEB887">
Menu<br>
<br></br>
Delivery<br>
<br></br>
Testimonials<br>
<br></br>
Contact information<br>
</td>
<!-- top right column-->
<td img src="images/flower.jpg">
<h2>
<h2>Contact us</h2><br><br>
<h3>How to contact us? </h3>
<p>Please call us on 0000000000 </p>
<p> Or feel free to use our web-form</p>
<form action="#" method="post">
<p>
<label for="name">Name</label>
<input name="name" id="name" type="text" required/>
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required/>
</p>
<p>
<label for="Contact">Contact Number</label>
<input name="website" id="website" type="url"/>
</p>
<p>
<label for="Inquiry">Inquiry</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p> <input type="submit" value="Post comment"/></p>
</form>
<br>
<h3>Our address is</h3>
<p>Sandwich Express</p>
<p>Some Back Alley</p>
<p>Middle of Lincoln</p>
<p>Great Britian</p>
<tr><td colspan="2" height="20" bgcolor="#ECE5B6">Copyright Keeley Wainman, University of Lincoln ©</td></tr></div>
<div id="map-canvas"></div>
<body>
<style>
#map-canvas {
width: 500px;
height: 400px;
background-color: #CCC;
position: bottom;
}
</style>
</body>
</table>
</body>
Hey, so after I've finally got something going I've gone to place a google map (not fully implemented yet), just trying to get the right placement for it. It seems tho I can't get the google map to move to the bottom of the page where I'd like it? Or even how do I get the image to move? It seems to have gone above the border at the top, this is really poor positioning and I have to move it to the bottom. Any help to whats going wrong here would be greatly appreciated!
use the following:
<tr><td><div id="map-canvas"></div></td></tr>
at the end of your page, instead of:
<div id="map-canvas"></div>
it will place your map at the bottom of the page, it was at the top because you didn't assign a <tr> and <td> to it
good luck coding! ^^
edit: http://jsfiddle.net/h261cgc9/ Here's a fiddle to see the change i've made in action
But as I've mentioned in my comment, it's much better to create a website without the use of tables, only use tables when you actually want to put something in one, putting a whole body in the table is a bad idea, see: http://blog.silktide.com/2011/04/why-you-shouldnt-use-tables-for-layout-ever/
In the fiddle I removed the which contained the styles, as there is no need for it, you could just put the styles at the top of the page in between the <head> and <body>
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
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.
I am trying to get a very thin border for my table (table rendered from a GridView). I have set the BorderWidth="0" for the GridView and then through CSS I am creating the border for the rows that I need. Here I don't want any border around the grid header. HTML code for grid renders to table and TRs. So I ahave the following css:
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
This makes the grid look like what I need witn no border in the header. But, the width of the border on other rows is too thick in IE6 but in FF it looks great. Is there a way to make the border extra thin in IE?
Here is the working HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<style type="text/css">
tr.top td { border-top: thin solid black; border-left: thin solid black; border-right: thin solid black; }
tr.bottom td { border-bottom: thin solid black; }
</style
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<div>
<br />
<div>
<table cellspacing="0" rules="all" border="0" id="GridView1" style="border-width:0px;border-collapse:collapse;">
<tr>
<th align="left" colspan="5" style="font-weight:normal;"><a id="GridView1_ctl08_{0}_HeaderLink1" href="javascript: SelectAll(true)">Select All</a><span> | </span><a id="GridView1_ctl08_{0}_HeaderLink2" href="javascript: SelectAll(false)">Clear All</a></th>
</tr><tr class="top row">
<td><input id="GridView1_ctl02_CheckBoxButton" type="checkbox" name="GridView1$ctl02$CheckBoxButton" /></td><td>10-000000-001</td><td>The Iliad and The Odyssey</td><td>12.95</td><td>Mike Loyid</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl03_CheckBoxButton" type="checkbox" name="GridView1$ctl03$CheckBoxButton" /></td><td>10-000000-999</td><td>Anthology of World Literature</td><td>24.95</td><td>Jessica Freclih</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl04_CheckBoxButton" type="checkbox" name="GridView1$ctl04$CheckBoxButton" /></td><td>11-000000-002</td><td>Computer Dictionary</td><td>24.95</td><td>Roger Butt</td>
</tr><tr class="top row">
<td><input id="GridView1_ctl05_CheckBoxButton" type="checkbox" name="GridView1$ctl05$CheckBoxButton" /></td><td>11-000000-003</td><td>Cooking on a Budget</td><td>23.95</td><td>Leena Reebeca</td>
</tr><tr class="top bottom row">
<td><input id="GridView1_ctl06_CheckBoxButton" type="checkbox" name="GridView1$ctl06$CheckBoxButton" /></td><td>11-000000-004</td><td>Great Works of Art</td><td>29.95</td><td>Luke Killey</td>
</tr>
</table>
</div>
<input type="submit" name="Button1" value="Button" id="Button1" /></div>
<span id="Results"></span>
</form>
</body>
</html>
Use "1px" instead of "thin".