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>
Related
Problem: I am creating a testimonials page and one of the replies is by an admin, who have a red "ADMIN" tag where the normal stars would go. I have tested the waters by removing the ending p tag, putting quotes on both the red and color tags. Nothing seems to work.
Expected Result: Testimonial profile with a red ADMIN tag on the top right corner of the box
Code:
<div class="container">
<p test-align: right; color="red";>ADMIN<p>
<img src="pic-3.jpg" alt="Avatar" style="width:90px">
<p><span>Someone.</span> TRAVEL Travel CEO.</p>
<p>We are glad you enjoyed are service. We hope to see you again!</p>
</div>
You have to place inline styles inside the style attribute:
<p style="text-align: right; color:red;">
Also: don't use equal signs (=) to specify styles ;-)
It will work with just that!
Try playing around with the CSS using inspect element.
you must use style, and you should learn CSS again.
<p style='test-align:right;color:red';>ADMIN<p>
I have a <a> link with items inside. When I put a <p> tag around it, to simulate drupal's line break and paragraph filters that will be applied to my code automatically, The link becomes two links. One link is inside the <p> with no children the other is outside with one of the child elements. Why is this happening and how can I prevent it?
<div class="notDrupal srvTileGroup">
<p>
<a href="http://www.airforcemedicine.af.mil/" class="notDrupal srvTile shadow2 shadow6h">
<div class="notDrupal srvTileTxt bAirforce"><!-- <p class="notDrupal">AIR FORCE</p> --></div>
<img class="notDrupal srvTilePic" src="https://openclipart.org/image/2400px/svg_to_png/256723/BackgroundPattern126Colour.png" alt="air force"></img>
</a>
</p>
</div>
Codepen
The issue is not related with Drupal. You had placed a div element inside an anchor. Replace that div with span and you can see your code start working perfect.
For Info please see Fiddle
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>
<div style="color:#FFFFFF !important;">
<!-- A Dynamic content comes from from third party. -->
<p style="color:red;"> This should be white instead of red. </p>
<p>Test is test. This should also be white. </p>
<span> Check is check. This should also be white. </span>
<!-- Dynamic Content ends -->
</div>
HOW do I make all the texts to be white inside the div given above. Is it possible by using any jquery or other similar language??
Using Jquery children() and css() function to override the style , check my FIDDLE for the demo
Finally Found answer.
$(div p).css('color':'white');
$(div span).css('color':'white');
This was what I exactly wanted. It overrided the inline css of all the p tag as well.
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...