How do I keep my elements on the same horizontal line? - html

I'm trying to get text and a link to remain on the same line. I thought htis CSS would do the trick
#scenario-title {
display: inline-block;
}
on the following HTML
<div id="scenario-title">
<h3>My Scenario</h3> ( <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a> )
</div>
but nothing's that easy with HTML apparently. Here's the Fiddle -- https://jsfiddle.net/92rv0Lpa/ . How do I keep everything on the same horizontal line?

Instead of giving the div the display of inline-block, give it to the first tag (the h3 tag). Here is a working snippet:
h3 {
display: inline-block;
)
<div id="scenario-title">
<h3>My Scenario</h3> ( <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a> )
</div>
Matt

I have modified a little your code and this way I have achieved what you wanted, but if you want to learn more about how to develop layouts and improve your css positioning knowledge, study flexbox is very useful.
#scenario-title {
display: inline;
}
#scenario-title span, a
{
display:relative;
}
<div id="scenario-title">
<span>My Scenario</span> <a class="name ellipsis" target="_blank" href="/scenarios/18">Download All</a>
</div>
his game can help you understand flexbox game flexbox

Related

Img appearing out of order when placed in between links

I'm trying to create a paginator which inserts an ellipsis in the middle. My issue is the ellipsis ends up at the end of the row instead of in the middle like I'm placing it in the code. What am I doing wrong?
<div>
<div class="pagination">
1
2
3
<img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px">
13
14
15
</div>
<p style="margin-left: 10px;">30 trades</p>
</div>
EDIT:
I also tried setting display: inline and display: inline-block but it still appears at the end
<div class="pagination">
<a href="?page=1" >1</a>
<a href="?page=2" >2</a>
3
<img src="/static/svg/ellipsis-h-solid.svg" style="width: 15px; display: inline;">
<a href="?page=13" >13</a>
<a href="?page=14" >14</a>
<a href="?page=15" >15</a>
</div>
in my computer the img appears in 4th place, I strongly believe your anchor has good previous styling which disturbs the img placement, I beleive your anchor is sorted using either javascript or CSS style
please check that you have any CSS style like this, add the img tag also for that CSS
{
display: flex;
flex-direction: row;
}
may be try to manually give order like this example (optional)
:nth-child(1) { order: 2; }
.pagination,
.pagination img {
float: none;
}
I think you should check the float property.

How to move one HTML element below another with CSS

I am working with a 3rd party support provider and am trying to work around some limitations around what can be customized. I would like to add an HTML element (a) below a label, but only have access to css and footer html. My current idea is to add a hidden anchor in the footer and then try to reposition it via the css. I guess this MIGHT be possible with flexboxes, but my css foo is not that strong. So I figured I would come here and see if there was any way around it.
Concretely, I have a multiline textbox where users will enter their support request, and I need to insert an href to what can be asked right above it. I already have a ::before in place for some basic helper text, but I know that you cannot insert markup using css...thus my current attempt.
Is this even possible without knowing the specific location of each item...only their respective identifiers?
Here is a jsfiddle that reproduces the page as minimized as I can get it.
Again, please note that I ONLY have the ability to add HTML to the bottom of the page (in the footer element), and a global css file (shown in the separate css). That means I cannot edit the html outside the footer - that would be too easy ;)
HTML
<html id="portal_html"><head>
</head>
<body>
<div id="container">
<portal>
<div data-id="ticketForm" id="layoutContainer">
<div>
<div>
<div><h2>Submit a ticket</h2></div>
<div id="field_description">
<label for="description"><!-- react-text: 1235 -->Description<!-- /react-text --></label>
<div>
<div>
<div data-id="description">
<div id="description"><iframe name="deskEditor_New"></iframe></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footerContainer"><div id="footerContainer"><div class="Footer__footerCopyrigt">
<div class="Footer__container2">
<span>Powered by </span>
<a rel="noopener noreferrer" href="supporturl" target="_blank" class="Footer__footerLink">Support Provider</a>
<span> | </span>
<a rel="noopener noreferrer" href="terms" target="_blank" class="Footer__footerLink">Terms of Service</a>
<span> | </span>
<a rel="noopener noreferrer" href="privacy" target="_blank" class="Footer__footerLink">Privacy Policy</a>
<a rel="noopener noreferrer" href="foo">target</a>
</div>
</div>
</div></footer></portal></div></body></html>
and current css:
.ticketDetail .ConversationForm__list+.ConversationForm__list { display:none; }
div[data-id="description"]::before {
content: "Some custom content";
font-size: smaller;
}
label[for="description"], a[href="foo"]{
order:-1;
}
body {
display:flex;
flex-direction:column;
}
UPDATE
I found this SO that sadly shows flexbox will not work because they are not in the same heirarchy :/
....so I believe the answer is that this is not possible :(
Can you use JS?
const textAreaWrapper = document.querySelector('.text')
const linky = document.querySelector('[href=linky]')
document.body.insertBefore(linky, textAreaWrapper)
.someclass {
display: block;
}
.rest {
display: block;
}
.text {
display: block;
}
<span class="someclass">
<label>foo</label>
</span>
<span class="text">
<textarea></textarea>
</span>
<label class="rest">more stuff</label>
<label class="rest">even more stuff</label>
Here is a link I want above the textarea

align two divs based on length of first one

I need to align the second div based on the length of first one. The first div contains some content like article title and user details. The second div contains rating for that title. I have assigned float property for both divs. This works fine if the content inside first div is not too long. But if the title is too long then the title overlaps the rating.
Please let me know if there is some way to fix it.
<div id="result-1095" class="selectedResource">
<div style="float:left;width:67%;">
<p>
<a class="details" id="resource-1095" href="#id:resource1095">
TestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitleTestTitletest tests tests test testst
</a>
</p>
<p class="articleDetails"></p>
<p class="userDetails">Added by username</p>
</div>
<div style="float:right;" class="yui3-widget component rating" id="ResourceRating-1095">
<span class="rating-content">
<span class="rating-label"></span>
<a onclick="return false;" title="one" class="icon-star-empty"></a>
<a onclick="return false;" title="two" class="icon-star-empty"></a>
<a onclick="return false;" title="three" class="icon-star-empty"></a>
<a onclick="return false;" title="four" class="icon-star-empty"></a>
<a onclick="return false;" title="five" class="icon-star-empty"></a>
</span></div>
<p style="clear:both"></p>
</div>
I have added a fiddle snippet. Somehow yui rating is not visible in fiddle (though i have loaded yui on frameworks ) http://jsfiddle.net/wkj926rq/
You can use word-wrap: break-word for class details
.details{
word-wrap: break-word
}
http://www.css3.com/css-word-wrap/
on other way changing mark up-
You can use display:inline-block; for your divs instead of float;
<div>
<div class="first inlineblock">
</div>
<div class="second inlineblock">
</div>
<div>
css
.inlineblock
{
display:inline-block;
vertical-align:top;
}
Please add the same class on markup ex: .same-width and set width property
You could use flexboxes setting container to:
.wrapper , #result-1095{
display: flex;
flex-flow: nowrap;
}
PS: if you paste a fiddle(snippet) it's more testable
Maybe you should try giving width to the the title (class="details").

HTML <a> tag wider than specified width

http://exfluor.com/productsMain.html
I can't seem to get the boundary of the clickable link area to stay within the bounds of the <div> it is making a link(11 buttons linking to product categories). Even with using a class to specify the width, it spans the entire width of the <td> it is in. I've run out of options.
<a href="bycategory.php?cat=anhydrides">
<div class="category" align="center">
Anhydrides<br><img src="images/cat/anhydrides.jpg" alt="">
</div>
</a>
Use block display:
.catTable a {
...
display: block;
}
To set element's witdth it must have block or inline-block display. Also consider setting overflow: hidden.
Add word-wrap: break-word property to your as. It will break your links appropriately. You should pay attention though: You will not get automatic hyphenation from this. For that you would have to look into some library like hypenator
See this fiddle as an example: http://jsfiddle.net/8Lrhr22u/
Your HTML is not valid. You can't put div into a (well you can but it's not reliable). Instead try to improve markup a little (span instead of div):
<a href="bycategory.php?cat=hydrofluorocarbons">
<span class="category" align="center">Hydrofluorocarbons<br>
<img src="images/cat/hydrofluorocarbons.jpg" alt="">
</span>
</a>
However it's not really necessary, since setting a to display: inline-block should fix the issue:
.catTable a {
display: inline-block;
}

Simple HTML/CSS crossbrowser solution to float nested html tag left and parent to the right

I have following html:
<div class="text_right">
<p>Hello World
<a target="_blank" href="/some/url">
<img class="image_right" alt="Fruits" src="http://pad2.whstatic.com/images/thumb/9/91/Get-the-URL-for-Pictures-Step-1.jpg/670px-Get-the-URL-for-Pictures-Step-1.jpg"/>
</a>
</p>
</div>
I want to be able show img as float:left and "Hello World" text as float-right on the same line
Here is jsfiddle
After poking a bit around here is what fixed it:
p{
text-align: right;
}
a {
float: left;
}