I'm trying to get the second textbox to be across from the first one. Right it is at the bottom righthand side.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div>
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
One way is adding float: left; to the first container div, as this shrinks its width to the width of its content, allowing both inputs to appear side by side.
http://jsfiddle.net/uwFyp/
Just float the first one left
<div style="float:left;">
fiddle
You basically just need to float both of the divs containing your h2 and input elements. You can either float both left or float the first one left and the second one right (as in this example from your code above):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div>
<h2>Top</h2>
<div style="float:left;">
<h2>TextBox 1</h2>
<div>
<input type="text" />
</div>
</div>
<div style="float:right;">
<h2>textbox2</h2>
<div>
<input type="text" />
</div>
</div>
</div>
</body>
</html>
Floating both div's left would position the second div right after the first one.
You might also find you need to put a clearing div <div style="clear:both;"></div> immediately after your second floating div. This will prevent elements following these two from being positioned immediately after the last floated element.
floating divs for alignment of inputs gets tricky messy with lots of extra code try this cleaner approach that can be styled via CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
.horz-inputs label, .horz-inputs input {display: inline-block;}
/*add any css you want to the inputs and labels from this point forward
</style>
<body>
<div class="horz-inputs">
<h2>Top</h2>
<label>TextBox 1</label>
<input type="text" />
<label>TextBox 2</label>
<input type="text" />
</div>
</body>
</html>
Related
this is what it looks like nowHow do you edit two labels for the same input field in CSS separately? I want to have a label above an input field that says "Nickname" and then a lower label that says "(press enter to spawn)" but I don't know how to position them like that and I also don't know how to change the size so that I can make the bottom one smaller. Any suggestions?
Something along these lines?
<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>
.wrapper { width: 20em; }
</style>
</head><body>
<div class='wrapper'>
<div> Nickname: </div>
<input type="text" id="nickname" placeholder='Nickname'>
<div> (press enter to spawn) </div>
</div>
</body></html>
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
I want to create a page with a black box in the middle, which has 30px of padding on the left and right hand side.
The following code works on desktop browsers without having a horizontal scroll, but on mobile safari you can scroll left and right. How do I prevent this horizontal scroll?
I have tried adding overflow: hidden to the body, the outer div and the inner div, this doesn't seem to help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>hello world</title>
</head>
<body style="margin:0;padding:0;">
<div style="padding:0 30px">
<div style="background-color:#000;height: 50px;">
</div>
</div>
</body>
</html>
OK, the answer was to wrap the div with the padding on it with another div.
<body style="margin:0;padding:0;">
<div>
<div style="padding:0 30px">
<div style="background-color:#000;height: 50px;">
</div>
</div>
</div>
</body>
I need to position a textfield and a button side by side always.The logic is something like this-The button will always be in the right side of the screen.The textfield should occupy the rest of the width in the left side.I tried giving a specific % width for the textfield.But I have to support both android and iOS devices.So there is a problem of varying screen sizes among them and that solution did not work well with all the screen sizes.This is the code I have used
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div style="display:inline;">
<input type="text" placeholder="Enter your user name"></input>
Check
</div>
</div>
</div>
</body>
</html>
Demo here - http://jsfiddle.net/d7T4E/
I am not sure but you can try with this:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div style="display:inline;">
<input type="text" style="width:50% !important; float:left;" placeholder="Enter your user name"></input>Check
</div>
</div>
</div>
</body>
</html>
I am a php programmer.
I am not able to decrease the size of a few text boxes in my html form, they are in the same .
Read these examples - http://www.w3schools.com/css/css_reference.asp#dimension
<html>
<head>
<style type="text/css">
input {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" />
</body>
In this case all html "input types" would have height 100x and width 200px. Instead if you use a "class" you style only those elements which are assigned that specific class.
<html>
<head>
<style type="text/css">
.tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" class="tb"/>
<br />
<input type="text" />
</body>
You can also use an "id" for that specific html element. Ids should be unique in an html page
<html>
<head>
<style type="text/css">
#tb {height:100px; width:200px; }
</style>
</head>
<body>
<input type="text" id="tb"/>
<br />
<input type="text" />
</body>
If you are using CSS, a simple width and height property work just fine.
textarea {height:100px; width:100px; }
You also can write this way,
<html>
<head>
<style type="text/css">
input[type=text] {height:50px;width:200px;}
</style>
</head>
<body>
<input type="text" />
</body>
You can also specify the rows and cols attributes of the textareas to control their size. Rows are the horizontal lines and cols is the number of characters wide you want the texarea to be
<textarea name="myText" rows="10" cols="80">Enter some text</textarea>
Provides a fairly short and wide textarea.