How to move one HTML element below another with CSS - html

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

Related

Exclude Element From CSS Class In Div

Is it possible to not apply a css class to a specific element in the class?
For example:
<div className="container-fluid bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href= {"https://www.linkedin.com"}><img src={linkedin} className={"linkedin"}/></a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!</p>
</div>
In this code I would like to exclude the img tag from the container class so the CSS isn't applied to that element. I know I could just make two separate divs of the same class and put the anchor tag in the middle but I want to know if I can do this programmatically.
div.dummy :not(a):not(img) {
background: black;
color: white;
font - size: 20 px;
width:100%;
height:50px;
position:relative;
}
<div class="container-fluid dummy bg-2 text-center">
<h3>LinkedIn</h3>
<a target="_blank" href={ "https://www.linkedin.com"}>
<img src={linkedin} class={ "linkedin"}/>
</a>
<p>Please follow my LinkedIn account to get updated on my experiences and skills and join my network!
</p>
</div>
You can see in the above demo that except img tag, all are getting affected.
Try using :not selector
Read here consulting can i use
else have a particular css for the img overriding any css you want.
The`:not(selector) selector matches every element that is NOT the specified element/selector.
:not(.container>img) {
background-color: blue;
//your css here
}

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

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

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").

Having trouble styling a span within an anchor tag in IE6 CSS

The company I work for still uses IE6 therefore I am required to make sure that my site works in IE6 browsers. I'm having trouble styling due to the constraints of the code design done through SharePoint 2007.
When you hover over a non-active tab, the text should change color from blue to orange.
<div class="webpartBody">
<div class="tabsWrapper">
<a class="quickLinkTabs activeTab" href="#">
<span class="tab0">Clinical</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab1">Business Services</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab2">Employees</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab3">Projects</span>
</a>
<a class="quickLinkTabs" href="#">
<span class="tab4">Web Links</span>
</a>
</div>
<!-- links -->
</div>
jQuery is utilized to create classes for the quickLinkTabs so that the firstTab and lastTab are labeled as such and that the tab that is currently selected is the activeTab.
Using just this code outside of the SharePoint environment, I apply the following CSS to achieve the effect I'm looking for.
.quickLinkTabs:hover
{
color: #ff6600;
}
.quickLinkTabs span:hover
{
color: #ff6600;
}
As soon as I apply this to the development environment and try this on SharePoint generated code, it no longer works. I cannot figure out what the hindrance is - is it SharePoint? is it my CSS?
There is no purpose for the SPAN to be there in the first place. You should adjust the styling of the A-tag to perform the same functionality.
then use:
.tabsWrapper a { .... }
.tabsWrapper a:hover { ... }

CSS link to cover div block [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Link into full div - html and css
I'm trying to construct CSS where the <a> tag covers an entire <div> block, so that anywhere on the <div> can be clicked.
Here's how the final div should look (image is 64×64px):
Here's the HTML:
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
Any CSS guru's help?
May be you can write like this:
<a href="#">
<img src="" alt=""/>
<h3><span>On The Beach</span> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
CSS
a{
display:block;
}
Note: as per html5 you can define block elements inside <a> tag
If you want have to anchor cover the whole block, your HTML should reflect that. While block-level anchors are a fresh idea from XHTML2/HTML5, they are working in nearly all modern browsers (even IE 7).
Just enclose all the DIV's contents with the anchor:
<div>
<a href="#nohref">
<img src="" alt="" />
<h3>On The Beach <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</a>
</div>
div a {
display: block;
}
See also: http://html5doctor.com/block-level-links-in-html-5/
Shiny, but not new
What’s also very interesting about this technique is that actually this isn’t new: you can do it now. […] That’s one of the interesting things about HTML 5—it documents existing browser behaviour. As the browsers already handle wrapping links around block-level elements, and there is an obvious use-case, there was no reason to artificially keep the structure as invalid.
Wrap with anchor tag
<div>
<a href="#" class="cont-wrap-link">
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
<a>
</div>
CSS
div a.cont-wrap-link
{padding:0px; margin:0px;
display:block;
text-decoration:none;
}
Seeing as your doctype is HTML5 you can wrap the entire block in an anchor:
<a href="yourURL">
<div>
<img src="" alt=""/>
<h3><a>On The Beach</a> <span class="exclusive">Exclusive</span></h3>
<span class="details">Save 10% off all package holidays</span>
</div>
</a>
No need for any JS :)
Check out this Post
Remember: Ensure that the structure of the document still makes sense when CSS is not present.
Update
You can Achieve this using HTML5. Check this
While this probably could be done with somewhat hacky CSS I believe JS (jQuery) is easier in this case:
$('#the-div').click(function () {
$(this).find('a').eq(0).click();
});
Or something like:
var theDiv = document.getElementByID('the-div');
theDiv.onclick = function () {
window.location = theDiv.getElementsByTagName('a')[0].href;
};
I would suggest to add onclick="location.href='http://google.com';" style="cursor:pointer;" to your div tag.