I'm doing some kinds of form and I have this problem.
I'm planning to divided my page into 3 columns (2 aside with pic and the middle will have a little form. So I put the textarea in the form and but the column and row number in the HTML file. However, when I try to format the scale of the column, the problem pops up. The size of the column is not the size of textarea. Anyway for me to make the textarea full size, compatible with the column?
#left,
#right,
#form {
width: 31%;
float: right;
}
<section id="left">
<img src="./image/left.JPG" />
</section>
<section id="form">
<form>
<textarea id="message" rows="4" width="120"></textarea>
</form>
</section>
<section id="right">
<img src="./image/right.JPG" />
</section>
#left, #right, #form
{
width: 31%;
float: right;
}
<section id="left"><img src="./image/left.JPG"/></section>
<section id="form">
<form>
<textarea id="message" rows="4" style="width:100%;" ></textarea>
</form>
</section>
<section id="right"><img src="./image/right.JPG"/></section>
If you set the width to 100% for your text area then it will fill the area that it is in.
Related
For a school project a need to make a website. I have a contact form page and to the right I want three images. See picture for how it looks now. The images float under the form and not on the right of it. Here is some html and css code:
#contact-img1,
#contact-img2,
#contact-img3 {
width: 20%;
height: auto;
float: right;
}
#contactform {
width: 70%;
height: 500px;
float: left;
}
.shoes {
float: right;
}
<fieldset id="contactform">
<legend>If you have a question you can ask it here:</legend>
<p> <label for="name">Name:</label> </p>
<input type="text" name="name">
<p> <label for="email">Email:</label> </p>
<input type="text" value="placeholder#gmail.com" name="email">
<p> <label for="message">Message:</label> </p>
<input type="text" name="message">
<p>
<form action="contact.html">
</p>
<input type="submit" value="send question!" />
</form>
</fieldset>
<section class="shoes">
<aside class="img-inno1">
<img id="contact-img1" src="images/inno-img1.webp" alt="first sport image">
</aside>
<aside class="img-inno2">
<img id="contact-img2" src="images/inno-img2.webp" alt="second sport image">
</aside>
<aside class="img-inno3">
<img id="contact-img3" src="images/inno-img3.webp" alt="third sport image">
</aside>
</section>
Floating an element allows content that follows it to bubble up beside it.
It does not cause the floated element to bubble up beside content before it.
To get the form next to the images using floats you would need to either:
Change the source order
Float the form instead of the images
That said. The point of float is to achieve this sort of effect (as shown in the CSS specification):
Using them to make blocks of content site beside each other is a hack.
We have Flexbox for that type of layout now.
Try this
.shoes {
float:right;
width:20%;
}
.shoes aside {
display: inline-block:
}
.shoes img {
max-width: 100%;
}
My work seems like above. The width of left one (img) and right one (button) is fixed, and that of middle one (textarea) should be flexible.
It has to work like max-width property is given to it.
When the size of the window shrinks, the size of the textarea should also be shrunk.
But max-width property doesn't work well in this case.
When the size of the window reaches the length of A, width of the textarea should be start shrinking, but it doesn't.
Instead, it starts shrinking when the width of the window reaches the length of B.
Below shows what happens when the window shrinks.
What should I do for this problem with css? Or do I need to use javascript?
html
<div id="div_target">
<p>
<img src="~~~"/>
</p>
<p>
<textarea id="target" cols="40"></textarea>
</p>
<p>
<input type="submit" value="등록"/>
</p>
</div>
css
#div_target{
width:60%;
}
#target{
max-width:60%;
}
If I understand correctly your problem is shrinking the width of textarea in the small size devices.
Try below structure:
<div class="col-xs-12 target">
<div >
<img src="~~~"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
.target{
text-align: center;
display: inline-block;
}
textarea{
width: 60%;
}
I believe you want to have the element inline in the "md" and "lg" so you can define:
display: inline-block;
for the elements in the large devices.
Here's one method using CSS flexbox:
#div_target{
display: flex;
width: 60%;
}
#div_target > * {
margin: 5px;
}
<div id="div_target">
<img src="http://placekitten.com/g/50/50">
<textarea id="target" cols="40"></textarea>
<input type="submit" value="등록" />
</div>
jsFiddle
.target{
text-align: center;
display:block;
}
textarea{
width: 60%;
}
<div class="col-xs-12 target">
<div >
<img src="http://orig05.deviantart.net/8ac4/f/2011/297/5/6/hammer_bro__by_yoshigo99-d4duynn.png"style="width:50px;height:50px;"/>
</div>
<div>
<textarea></textarea>
</div>
<div>
<input type="submit" value="등록"/>
</div>
</div>
I'm newbie with HTML and CSS. I'm struggling with (horizontal) element alignement and I would appreciate any help provided.
This is what I got so far:
http://jsfiddle.net/vayacondios2015/umpk0xht/
HTML
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea><br>
<label for="textarea"><span>Note</span>: You can only use <span>this</span> word in textarea!</label><br>
<input type="submit" value="Send"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
CSS in a link jsfiddle above (couldn't attach it properly).
This is how I would like it to be:
http://i.stack.imgur.com/VCWcL.jpg + centered on the page.
I'm looking forward for HTML semantic correction also, if you have some extra time and will.
Try these css. I will help you check this link https://jsfiddle.net/35sgma83/
.middle {
text-align: center;
}
div.mainbody {
text-align: center;
}
I would highly recommend getting to grips with HTML and CSS. I won't add specific links as there are thousands upon thousands of excellent resources all over the web.
However to help you I have modified the HTML so it's a little more structured:
<div class="mainbody">
<h2>This is uppercase title</h2>
<div class="right">
Link1
Link2
</div>
<div class="left">
<form>
<label for="textarea" class="form-label">This is a comment about textarea</label><br>
<textarea rows="10" cols="80" placeholder="Example" autofocus required></textarea>
<span class="note"><strong>Note</strong>: You can only use <strong>this</strong> word in textarea!</span><br>
<input type="submit" value="Send" class="submit"><br><br>
</form>
</div>
<div class="middle">
Link3
<select><option>Select1</option></select>
<select><option>Select2</option></select><br><br>
</div>
</div>
<div class="mainbody">
TOP
<img> Home<br>
©Company
</div>
You'll notice that the text area has a class, the note that appears under it also has been put into a span. I felt it better to use the <strong> tag when highlighting the bold text. You could go one step further and add a class in your CSS just for bold text. That will allow for re-usability.
I altered the CSS so that the container div which has .mainbody has the text aligned in the center. The rest of the changes are:
div.mainbody
{
text-align: center;
}
div.mainbody h2{
text-transform: uppercase;
text-align: center;
}
div div.right{
text-align: right;
float: right;
}
div div.left form label{
text-align: left;
}
.form-label, .note
{
float: left;
}
textarea {
width: 100%;
}
.submit {
clear: both;
display: block;
}
I think that satisfies your picture. Check out the fiddle here: http://jsfiddle.net/phyjauhc/1/
HTML semantic correction
Can be done via the w3c Markup Validation Service
Add below css
div.middle {
text-align: center;
}
div.ft_body {
text-align: center;
}
And change bottom div class name to ft_body and update cols="80" to cols="100%" for textarea
I've tried several combinations but have not found one yet that will display gracefully without adding unneeded scrolls bars.
I have a page that displays a Navigation column and then a content column. In the content column I am displaying a PDF in an IFrame. The left hand column is fixed at say 150px. I need the the right hand column to consume the rest of the width of the page and all of the height of the page. For some reason when the IFrame is put in the right hand div grows by about 5px and it adds an additional scroll bar that just mucks things up. I can make the scroll bar go away using the overflow-y: hidden but that seems to be hack rather than the right thing to do.
I've tried it with both an iframe and object tags and the behavior is the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body
{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color:#808080;
}
div#nav
{
position: absolute;
height: 100%;
width: 150px;
top: 0;
left: 0;
background-color:#C0C0C0;
}
div#content
{
top: 0px;
height: 100%;
margin-left: 150px;
background-color: #2F4F4F;
}
iframe#pdf
{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="06500001-2.pdf"></iframe>
</div>
</body>
</html>
Here's a FIDDLE based on your code.
The PDF seems to fit quite nicely and I don't get an extra scroll bar. The PDF page resizes with I change the size of the page (I'm using IE11).
I didn't change much in the HTML.
<div id="nav">
<fieldset class="lookupFields">
<div>
<label for="book" >Book:</label>
<input type="text" id="book" size="5" />
</div>
<div>
<label for="page">Page:</label>
<input type="text" id="page" size="5" />
</div>
<div>
<input type="button" id="btnViewImage" value="View" />
</div>
</fieldset>
</div>
<div id="content">
<iframe id="pdf" frameborder="0" src="http://www.historytools.org/sources/lincoln-gettysburg.pdf">
</iframe>
</div>
On my page, I need to display 10 boxes across it horizontally. Each box has a min-width of 150px and a max-width of 299px. The page should fit as many boxes as it can across the page without leaving any gaps, with each box having the same width (extending a pixel if needed due to rounding).
Example: If the width of the page is 660px, 4 boxes at 165px width should be used.
If the width of the page is 600px, 4 boxes at 150px width should be used.
If the width is 597px, 3 boxes at 199px should be used, since a box cannot go under 150px.
The remaining boxes on the bottom should have the same width of the ones above.
How can I accomplish the above?
I have a fiddle here: http://jsfiddle.net/CD4f2/1/
Note how the rows of boxes leave a gap to the right.
using the follow code (because I'm forced to)
<body>
<div id="mainPage">
<div id="bar">Width of a row of boxes should match the length of this bar.</div>
<div id="capTable">
<div class="cap" id="cap0">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap2">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap4">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap6">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
<div class="cap" id="cap8">
<img class="capImage">
<input type="text">
</div>
<div class="cap">
<img class="capImage">
<input type="text">
</div>
</div>
</div>
body
{
background-color:black;
}
.cap
{
background-color: red;
float: left;
height: 150px;
max-width: 299px;
min-width: 150px;
}
.capImage
{
background-color:blue;
float: left;
height: 37px;
width: 37px;
}
#bar
{
background-color: orange;
}
#cap0, #cap2, #cap4, #cap6, #cap8
{
background-color: green;
}
#mainPage
{
margin: 0 auto;
max-width: 800px;
min-width: 150px;
}
I've tried this with tables also but ran into the same problems, as well as many different combination of floats, and displays, and overflows.
I believe I might be able to do this by manually specifying different resolutions in the CSS. But A more automatic approach would be preferred if possible.
I only want to use javascript as a last resort. Which I should be able to do myself.
Thanks.
I have changes your .cap divs to use % widths instead of px to make it easier to get a responsive layout.
DEMO
Main CSS Change
.cap
{
background-color: red;
float: left;
height: 150px;
width: 25%;
min-width: 150px;
}
#media only screen and (max-width: 1024px) {
.cap {
width: 50%;
}
}