I'm trying to achieve a layourt like: Search (gif) : TextBox : AjaxLoader (gif) on one line.
I have the following style:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<div id="LoadingGif" style="float:left;"></div>
<div style="clear:both;"></div>
</div>
The search image is on one line and the textbox and loading gif appear on the next line.
Can anyone help please?
Thanks in advance
The last two elements are floated left, but the search gif isn't.
I removed the outer div and floated all elemets left - this works. Thanks for all your help + 1 to all.
An <img /> and <input type="text" /> will be display:inline by default so shouldn't need float:left.
And you might be better off replacing your <div id="LoadingGif" style="float:left;"></div> with either a tag or an tag: then you'll have 3 inline elements meaning you can remove the surplus <div style="clear:both;"></div> from your HTML :-)
Replacing divs by spans as such:
<div>
<img src='<%= VirtualPathUtility.ToAbsolute("~/Content/Images/search.gif")%>' alt="Search"/> 
<%= Html.TextBox("SearchTextBox", string.Empty, new { style = "float:left;" })%>
<span id="LoadingGif" style="float:left;"></span>
<span style="clear:both;"></span>
</div>
would work...
Related
This is my code
<div className='product'>
<img className='productImg' src={this.props.image} alt='of person'></img>
<div style={{float:'left'}}>{this.props.name}</div>
<br />
<div style={{float: 'left'}}>${this.props.price}</div>
<br />
<div style={{color: this.pickRatingColor(this.props.rating), float:'right'}}>{this.props.rating}/5</div>
</div>
This is the result
(I just used a random screenshot i had for the picture so don't judge)
The thing that I simply can't wrap my head around is why the price doesn't go below the name even though I added a break. I would appreciate it if someone could explain why this happens and how I can fix it.
Thank you!
I could not understand why you are using float ;
it will be fixed if you delete your styles that added in name and price div;
I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.
I have tried adding <div id="bottom">
</div> but nothing is working. It appears to skew the entire section when I add this syntax.
I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.
Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.
Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!
You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/
<div id="bottom">
SHOP NOW
<div id="price">$70.00</div>
</div>
You can wrap the div element in an anchor element to have it link to your chosen url / file.
i.e.
<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>
This should be the code:
https://jsfiddle.net/RreTH/
Edit:
This will make the whole div element link to google for linking just the text the should be enough to link only the text.
Simply change the basket div to <a>:
<a id="basket" href="http://www.google.com">SHOP NOW</a>
<span><img src="1.png" style="padding-left:10px;float:left;">
<img src="2.png" style="margin-left:10px;float:left;"></span>
This puts the two images right next to each other, I want to insert a text that says " into... " in the middle. If I try to add the text, it will start a new line for the image.
You could set both as 'display: inline-block' instead of 'float:left'
"<span><img src="1.png" style="padding-left:10px;display:inline-block;"> into...
<img src="2.png" style="margin-left:10px;display:inline-block;"></span>"
but be aware of vertical-alignment, because you might have to set 'vertical-align: middle' or even 'vertical-align: top' on both images and on the wrapper, in this case the 'span' tag
You can easily do it like this:
<span>
<img src="1.png" style="padding-left:10px;float:left;">
<i style="float:left; padding-left:10px;"> into... </i>
<img src="2.png" style="margin-left:10px;float:left;">
here is working example JSFiddle
try style="float:left" for every of your tags. it will make them stick to the left side. if you want them to have space between, set margin
(if you don't understand what i'm saying, you should google css tutorial. it will help you style your websites
I have this simple html markup:
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<p class="zumba">
1996-03-14
</p>
</div>
.....
So my aim is to have the <p> with the class="zumba" in the same line like the text Daddy, Yankee but on the right site:
I added float-right to align it a the right site, what worked out. But somehow its displayed in a new row!
Then i added:
.zumba {float:right; display:inline}
But the problem stays! Why? Thanks and here you can test you ideas:
http://jsfiddle.net/kMuA6/
Change yout <p> to span
HTML
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee <span class="zumba"> 1996-03-14 </span>
</div>
CSS
.zumba {float:right;}
Fiddle : http://jsfiddle.net/logintomyk/drLbx/
General Tip: If its not much of a text, <span> is always a better option to show in same line (and different style)!! :)
They have top and bottom margin. This works:
.zumba {float:right; display:inline; margin:0;}
You could do this whitout using any float.
It will work with < P > and < SPAN >.
<div class="autocomplete-suggestion" data-index="0">
Daddy, Yankee
<span class="zumba">
1996-03-14
</span>
</div>
I've add some color to identify.
Fiddle: http://jsfiddle.net/kMuA6/2/
Floating elements always make them display:block, no matter what you define. (check firebug or any other developer tools for the value of display) Do you have control over the markup? Then wrap the "Daddy, Yankee"-text in an extra element and let it float left.
try this fiddle:
http://jsfiddle.net/kMuA6/1/
I just used <span> instead of <p>
I got this html
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
When in firefox I am unable to remove the a.tgt using backspace. Gets removed in all other browser except firefox
Whats the problem?
This may be helpful for some. I ran into the same problem.
Instead of this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
You can have this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a><span class="remove"></span> great </div>
You can use javascript (using jquery in this case) to detect the deletion of .remove and remove your uneditable div at the same time:
// you can wrap this in an if statement and only execute in firefox
$('.remove').on("DOMNodeRemoved", function() {
$(this).prev(".tgt").remove();
});
Hope this helps!
try to wrap <a> html into span tag with attribute contenteditable=true
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false"> <span contentEditable="true">harry</span></a> great</div>