This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Parent div ingnores height of child because of its float
(5 answers)
Closed 1 year ago.
I would like to place the image next to the paragraph. Unfortunately the background disappears.
My code looks like this:
<figure class="fig">
<label>
<div class="order">23</div>
<p>Suggested Location for RTD & Basement Box<span class="asterisk">*</span></p>
<img src="../images/basement_box.png" width="30%"></img>
<div style="clear:both;"></div>
</label>
<br>
<input type="text" placeholder="Enter your answer">
<br>
</figure>
label {
background-color: #E6EDF2;
padding: 5px;
}
label img {
display: inline;
float:left;
}
The image shows my problem.
I want the image next to the paragraph without losing the background.
If I put float:left or float:right image is placed quite well, but the background is rolled up to the paragraph only.
The clear:both; option doesn't work either, bringing back everything to the beginning.
How can I place my image, as shown in "good" example?
it's happen because u give your img element display:inline,that makes your image acted like a text,so it's move down,try:
img { display: block; position: absolute; right: 0; }
that's make your image one layer above your text
Basing on the hints provided in the comments I've solved finally this issue.
I used the overflow:hidden feature and placed clear:both; at the bottom of my label
<figure class="fig">
<label>
<img src="../images/basement_box.png" width="30%"></img>
<div class="order">23</div>
<p>Suggested Location for RTD & Basement Box<span class="asterisk">*
</span></p>
<div style="clear:both;"></div>
</label>
<br>
<input type="text" placeholder="Enter your answer">
<br>
</figure>
And CSS
label img {
float:right;
overflow: hidden;
}
Related
This question already has an answer here:
List of HTML5 elements that can be nested inside P element?
(1 answer)
Closed 2 years ago.
I want to offer a selection by radio buttons. Upon hovering over the label for the button, I want there to appear an explanation for that option.
I can achieve this by putting the explanation text into a span-element, but not in a p-element...and I fail to understand the difference:
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<p class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</p>
</div>
</fieldset>
with the style sheet
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
The text in the p-element is hidden by "display:none", but it does not appear upon hovering over the text in the label-element.
If I change the p-element into a span-element, the text is also hidden by "display:none", but it does appear upon hovering over the text in the label-element.
I think that the different behavior might be the result of nesting a p-element within a p-element...but even so I don't quite understand why it is "partially working", as I would call it.
You should use div as a row element:
<div class="row">
The reason why nested p tags does not work in your code is that it is not valid HTML. It is corrected by the browser. So the sibling of label is no longer p then.
.hidden{
display: none;
}
.show:hover + .hidden{
display: block;
}
<fieldset>
<h2>Select player</h2>
<div clas="radios">
<legend>Select character class:</legend>
<div class="row">
<input type="radio" id="character-ninja" name="character" value="ninja">
<label for="character-ninja" class="show">Ninja</label>
<p class="hidden">The ninja class....</p>
</div>
</div>
</fieldset>
Is it possible to put a checkbox over an image without using 'top' and 'position:absolute' ?
<div class="main">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image"/>
<input class="checkbox" type="checkbox" value="1" />
</div>
JSFIDDLE
There's a few possible ways. If you want to avoid top and absolute you could position it using negative margins. Or if you simply want checkbox to be checked when the image is clicked you could wrap the image in a label and tie the label to the checkbox. I've done both here.
HTML:
<div class="main">
<label for="checkbox">
<img src="http://www.standard.co.uk/incoming/article9760552.ece/binary/original/Rooney.jpg" class="image" />
</label>
<input id="checkbox" type="checkbox" value="1" />
</div>
CSS:
.image {
height: 200px;
width: 250px;
}
input {
display: block;
margin-top: -200px;
position: relative;
}
A quick explanation: position: relative allows the checkbox to sit on top of the image (z-index won't cut it here), the negative margin-top pulls it up onto the image, and display: block makes it so that the top margin can be applied (I'm not sure why it doesn't work on inline elements.) I expected to have to use negative margins on margin-left as well, but it seems to naturally move to the left on it's own. I'm not sure why for that either. But it does work and it does not need position: absolute or top.
I do not want to know How to use image as an input text.
I want to know How do I put the text input on the Image
login.html
<div id = "background">
<img class="stretch" alt="" src="C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png">
<div class = "text">
<input type="text" >
<input type="text" >
</div>
</div>
login.css
#background{
margin-left:30%;
width:400px;
height:400px;
}
.stretch{
width:100%;
height:100%;
}
.text{
}
What am I trying to do now is imitating the Google "Sign in" page
You have 2 options
Set background image for the #backkground. Use margin, padding, or other background css for positioning. This option won't need any img tag.
Use position: relative on the #background, and position: absolute on the .text. Use left, top, right, bottom css on #text for any kind of positioning you want.
I would recommend going with the 1st option. But if you feel the need to keep the img tag for some reasons, then the second option is good enough for you.
Be sure to close your text input tags. Also try this.
CSS:
#background {
margin-left: 30%;
width: 400px;
height: 400px;
background-image: url(C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png);
background-size: contain;
}
HTML:
<div id = "background">
<div class = "text">
<input type="text" />
<input type="text" />
</div>
</div>
Use CSS to position your text inputs where you'd like inside the div.
How to display a a href and a img src inside a input box (text box). ex: i want to display this inside a text box ( <input id=link )
<img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com">
thanks in advance.
Based on the comments, I would guess that you want an input field that has that HTML code as the default text. You must use character reference codes for quotes and less/greater than signs.
<input type="text" value="<a href="http://www.mysite.com/link" target="_blank"><img src="http://www.mysite.com/img.jpg" border="0" alt="mysite.com"></a>" />
(By the way, you mentioned "like in Photobucket" -- you can just look at the site's HTML to see how they do it.)
You have two options.
Place the image as a background of the input, but this won't be clickable.
Absolutely position the element over an input.
1:
.myInput { background:url(path/to/img.jpg) 5px 5px no-repeat; }
2:
HTML
<div class="inputContainer">
<input class="myInput" type="text" name="myInput" id="myInput" />
<img src="#" />
</div>
CSS
.inputContainer { position:relative; }
.myInput { padding-left:25px; /* This will move the text from under the image */ }
.inputImg { left:5px; position:absolute; top:5px; z-index:5; }
You'll need to play with the position and values depending on your input size, image size and general placement, but that should do what you want.
As comments mention, you can't literally put a link in an input text box (although you could simulate one with JavaScript).
For the background image, use CSS background-image.
I have a 50x50 image and an <input type="text" /> field that I want to be on the right side of the image. I've tried this:
<img src="missing-image.png" />
<div name="image_input">
<input type="text" />
</div>
And with this CSS:
#image_input {
position: absolute;
top: 10px;
}
But the text input won't go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won't work too. How I can correct this?
PS: All that is inside a <form>
Position absolute gives you more control:
HTML
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
CSS
div {
position:relative;
}
input{
position:absolute;
right:10px;
bottom:20px;
}
Try this:
<div id="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
and the CSS:
#image_input img {
float: left;
clear: none;
}
Note that I changed the div's "name" attribute to an "id" attribute.
there are a couple of ways to center align text next to an image. you can put it in a list and make the image the list style type. The other thing you can do it properly pad the element to center align it.
Try changing to this:
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
And the CSS:
.img {
display: inline-block;
}
To center the height, you might want to use one of the vertical-align options on the input tag.
such as:
input {
vertical-align: middle;
}
I don't use vertical-align very much, so you might have to tweak it a little to get it to work, but see here: http://www.w3schools.com/css/pr_pos_vertical-align.asp