I have a simple situation as shown below:
<body>
<iframe id='my_iframe' name='my_iframe' style='display:none;'></iframe>
<form id="fileupload" method="POST" enctype="multipart/form-data" action="upload_test.php" target='my_iframe'>
<input name="theText1" id="theText1" type="text" />
<input name="theFile1" id="theFile1" type="file" />
<button style="width:40px;height:10px;" name="button1" id="submit" type="submit" />
</form>
<div style='width:100px;height:100px;' id='target_div'>Test Text</div>
</body>
Problem: The Div is not visible. It does show if I move it above the iframe. I have never used an iframe before. Can't figure this one out. Any suggestions?
After some fiddling with JSFiddle (pun intended), it appears that the button tag is not self-closing. Changing <button ...... /> to <button ....></button> seemed to have made the div tag appear correctly ("Test Text" was being placed inside of the button, which makes me conclude that the button tag is not self-closing).
JSFiddle
Related
Basically when I want to move "About me" button Contact button moves but About me button doesn't move at all.
Here's html
<div id="damn">
<img src="illtrythis.jpg" alter=" ">
</div>
</head>
<form>
<input type="submit" class="aboutme" value="About me" >
<input type="submit" class ="contact" value="Contact">
</form>
</html>
Sorry for bad code,
I'm having problem with putting CSS into "code here so heres a screenshot.
I need help in HTML styling
here is the case:
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
<input type="button" id="button2" value="Update"/> <br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';" size="25"/>
as we can see all the elements inside
<div></div>
will be displayed on clicking button1(they will hidden initially).When all the fields appear the another button inside div(button2) is unaligned to button1.
What i want is when i click button1 both button1 and button2 should be aligned..
how can i do this??
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/><br/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = '';document.getElementById('button2').style.display=''" size="25"/>
<input type="button" id="button2" value="Update" style="display:none"/>
If you want the two buttons next to each other, but the second one can only be displayed upon clicking the other button, then you'll need to include script to show the button onclick.
What do you mean "aligned"? Are they supposed to be aligned horizontally, that-is, they should appear on the same line? If so, you need to remove your <br /> tags that force line-breaks, and set the display of your div not to blank, but to inline (as divs are displayed as block by default):
<div id="hidden" style="display: none;">
<label>URL:</label>
<input type="text" name="url" size="50"/>
<input type="button" id="button2" value="Update"/>
</div>
<input type="button" id="button1" value ="Get Info" onclick="document.getElementById('hidden').style.display = 'inline';" size="25" />
This produces the following when you click on the "Get Info" button:
Note that the text input, update and get info are all on one line!
If you want them all to appear left-aligned, the code that you provided looked just fine when I tested it. Upon clicking the get info button, I get a display that looks like this:
[INPUT "URL" AREA]
[Update Button]
[Get Info]
If you aren't trying to get your display horizontally aligned or left-aligned, then what type of alignment are you looking for? Can you provide a diagram or screen shot if this is not the answer you're looking for?
I generally agree with what Kiley mentioned a moment ago. If you must maintain that exact structure and want the buttons horizontally aligned, adding float:left; styles to the <div></div> and to button1 would solve your issue.
<div id="hidden" style="display:none; float:left;">
<label>Url:</label>
<input type="text" name="url" size="50" />
<input type="button" id="button2" value="Update" />
</div>
<input type="button" id="button1" value="Get Info" onClick="document.getElementById('hidden').style.display = '';" style="float:left;" size="25" />
Hope that helps!
They shouldn't be unaligned, there's probably an style on that div.
try this css
#hidden {
margin:0;
padding:0;
}
For some reason my Submit and Cancel buttons are not being wrapped in the form tag like I expect them to be (based on their position with in the form tag in the HTML) when I have their float property set to right and left respectively. The two buttons are positioned just outside & below the form div to the far right & left sides.
Link to the HTML & embedded CSS
alt text http://lh5.ggpht.com/_rNlSpSUBkYo/TFLpNgv4XkI/AAAAAAAAAE8/ocwa0uSzwX4/reply-float-form.png
How can I make it so the form div wraps the two buttons so they do not appear outside & below the form div?
Thank you
Adam
Remove .cancels float rule:
.cancel{/* no float */}
*tested on Chrome
Looks like you need to clear the floats. Give this a try.
<form action="#" method="get">
<textarea name="Reply Textarea" type="text" rows="2" cols="40" wrap="soft"></textarea>
<input id="buttons" class="submit" type="submit" value="Submit" />
<input id="buttons" class="cancel" type="button" value="Cancel">
<br style="clear: both;" />
</form>
My navbar doesn't line up in IE... how can I fix this without using Javascript...
http://opentech.durhamcollege.ca/~intn2201/brittains/labs/index2.php
Also it has to be able to work on all resolutions.
And it has to validate in strict.
You don't need to put absolute position to every single button, just position:aboslute to the parent element (navbar) and for the forms (no need of a separate style for every form) just put float:left
Put all the buttons inside a div, instead of using position relative on each button.
Then each button should be next to each other.
Put all the buttons inside one div.
You have:
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<div><input type="submit" value="Home" /></div>
</form>
Remove the nested divs. And also you're missing a closing div after your last form close.
<div id="navbar">
<form class="navbarForm1" method="get" action="index2.php">
<input type="submit" value="Home" />
</form>
<form class="navbarForm2" method="get" action="lab1noscript.php">
<input type="submit" value="Lab1" />
</form>
</div>
I have a Pictures section on my website and allow users to enter comments on the pictures. Each Picture page has a form with a textarea for entering their comment. Strangely, word-wrap doesn't work in the text area and hitting Enter results in the form being posted rather than a carriage return. Additionally, there's no scroll bar when the text goes outside the size of the text area. I've tried adding wrap="soft" to the text area (which shouldn't matter anyway...that's the default) but I get the same result.
Here is my HTML:
<form action="#" method="post" onSubmit="javascript:urchinTracker ('/comment/5334656267047432002')">
<input type="hidden" name="albumid" value="5334655700200924193" />
<input type="hidden" name="imageid" value="5334656267047432002" />
<div id="labelContainer">
<div id="nameLabel">NAME</div>
<input class="inputName" type="text" name="name" />
<div class="clear"></div>
</div>
<div id="inputContainer">
<div id="contentLabel">COMMENT</div>
<input class="inputContent" type="textarea" name="commentcontent" />
<div class="clear"></div>
</div>
<div class="clear"></div>
<input class="inputSubmit" type="submit" name="submit" value="Post" />
</form>
And here's the link: http://www.cameronhinkle.com/pictures/album/5334655700200924193/image/5334656267047432002
Thanks in advance.
You are doing it wrong - textarea is an invalid value for the type attribute of an <input> element.
What you actually want is the <textarea> element:
<textarea name="commentcomment">contents</textarea>
Otherwise all you have is a one-line input field styled to look like a textarea.
For more: HTML <textarea> tag.