I am looking to change the position of a div that is inside a div class. My only option is to add CSS, I cannot edit the HTML. The current code looks like this:
<div class="additional-information">
<div>
<strong> Name </strong>
<strong> Address </strong>
</div>
What I managed to do is to change the position of the entire 'additional-information' class with the following code:
.additional-information {
position: absolute;
left: 250px;
bottom: -230px;
}
Would it be possible to move individual divs inside this class that have no tag?
You could work with CSS Child Selector.
Something like this:
.additional-information > div:nth-of-type(1) {
position: absolute;
left: 250px;
bottom: -230px;
background-color: lightblue;
}
<div class="additional-information">
I am a parent
<div>
<strong>name</strong>
<strong>address</strong>
</div>
</div>
For more info look at this article.
Related
I have the following HTML and CSS, which is generated by Vaadin framework:
<div class="v-slot">
<div class="v-splitpanel-horizontal v-widget v-has-width" style="width: 100%;">
<div style="position: relative; width: 100%; height: 100%;">
<div class="v-splitpanel-first-container v-scrollable" style="height: 100%; width: 90px;">
<div tabindex="0" class="v-menubar v-widget v-has-width" style="width: 90px;">
<span class="v-menubar-menuitem v-menubar-menuitem-menulevel0 v-menubar-menuitem-selected" style="color: transparent;">
::before
<span class="v-menubar-submenu-indicator" style="color: yellow;">►</span>
<span class="v-menubar-menuitem-caption" style="color: red;">
<span class="v-icon Vaadin-Icons"></span></span>
</span>
</div>
</div>
</div>
</div>
.v-menubar > .v-menubar-menuitem:before {
content: ">";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: inherit;
}
The :before adds an Indicator which I want to remove or hide.
It seems impossible for me to select just the element in :before so I can keep the Menu text but remove the indicator.
How can I modify or remove something in a :before using CSS?
you can remove the content by setting it to "", like so:
.v-menubar > .v-menubar-menuitem:before {
content: "";
}
this will remove the ">" Icon from your menu.
For reasons I don't understand, :before doesn't work, but :after does. It makes sense since the indicator is displayed after the icon.
.v-menubar > .v-menubar-menuitem-menulevel0 .v-menubar-menuitem-caption:after {
content: "";
}
I have referred to many options but still I am not able to apply CSS to my parent container. My table structure is like:
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
Now according to above structure if div2 has class colorMe then I want to color the entire td background in yellow.
I have used CSS like this but not working:
td > div> div.colorMe {
background-color:yellow;
}
Can you please tell me how I can color my td using css?
There is currently no possibility to apply CSS Rules to a parent element. There is in fact the :has Pseudoclass, which is exactly for this kind of issues, but at the moment (Nov 2017) it is not supported by any browser. The only way to achieve this would be with Javascript.
I know that you mentioned only using css but adding some javascript event to change a class is a very well documented approach. There are dozens of examples online and including the the script in your file takes no extra work if you use vanilla.
Here is a small example of changing a parent div's color on a click event
var box2 = document.querySelector('.color2');
box2.addEventListener("click", function() {
this.parentNode.style.backgroundColor = "white";
});
div {
width: 100px;
height: 100px;
border: 2px solid black;
}
.color1 {
background-color: red;
}
.color2 {
background-color: rebeccapurple;
width: 50px;
height: 20px;
}
<div class="color1">
<div class="color2"></div>
</div>
You can kind of emulate the behavior you need with the following trick:
td {
position: relative; /* make the cell a container for positioned children */
}
.colorMe::before { /* cover this container with colored pseudo element */
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color:yellow;
z-index: -1;
}
table { /* just to make the example prettier :) */
width: 100%;
height: 100px;
table-layout: fixed;
}
<table>
<tr>
<td>
Just a TD
</td>
<td>
<div id="div1">
<div id="div2" class="colorMe"></div>
</div>
</td>
<td>
Just a TD again
</td>
</tr>
</table>
It won't work, however, if you need to position something absolutely from the .colorMe element itself.
I have two Spans I want span1 to be exactly below span2, even if span1 changes height dynamically.
<span id="Div3" style="Z-INDEX: 126; LEFT: 8px; WIDTH: 99.06%; TOP: 5px; visibility: visible;"
runat="server" ><asp:image id="Image1"
style="Z-INDEX: 127; LEFT: 16px; right: 709px;" runat="server"
tabIndex="10"></asp:image></span>
The above Span has an image, whose height can change dynamically.
I want this span
<span>Exactly below the image</span>
to be exactly below the span in which image is placed.
Could anyone help ??
I've created 2 spans. One with a img in it, and one with h1 in it.
<span class="span1">
<img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" alt="">
</span>
<span class="span2">
<h1>I'm span #2!</h1>
</span>
Both of the spans i have given the display property of block. This will make them stack under each other.
span {
display: block;
}
And gave the img some widthand height.
.span1 > img {
height: 200px;
width: 200px;
}
Demo here
you forgetting about setting: position: absolute and top: on both spans. ...if you want to positioning them absolutely.
if you just want them in the document flow then remove top/left/z-index from your styles - they doesn't have any result on the outcome until you add position:absolute; or position:relative;.
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.
The following code is injected into the page via jQuery. I can't change that, but I can change the css:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a id="prev" class="left" href="#"><span class="invisible">Prev</span></a>
<a id="next" class="right" href="#"><span class="invisible">Next</span></a>
</div>
I want the three
appear on the left of and the two ("Prev" and "Next") on the right.
How can I do it? I tried float:left but does not work.
Edit: CSS is too long to post. Development site is here at : http://site2.ewart.library.ubc.ca/
The most basic answer:
a.left, a.right { float: right;}
a.dot { float: left;}
In addition, it looks like the stylesheet '/profiles/ubc_clf/themes/logie/style.css' line 37 is trumping your float:
#slideshow-prevnext .left {
background: url(http://site2.ewart.library.ubc.ca/profiles/ubc_clf/themes/logie/images/controller/controller_left_button_on.gif) no-repeat;
**float: left;**
height: 30px;
margin-top: 8px;
text-decoration: none;
width: 29px;
}
If that is to be on the right, it will need to read:
float: right;
In order to accomplish this, you'll need to provide a CSS style which is more specific than the #slideshow-next .left rule. For example, place this in the page <head> tag:
<style type="text/css">
#slideshow-prevnext .left, #slideshow-prevnext .right {
float: right;
}
</style>
Because the <style> tag on the page has a higher precedence than those loaded before it, the rule should override the float value.
I'm not particularly happy with this way of doing things - ideally you should just change the Javascript.
On #slideshow-prevnext add position: relative.
On #slideshow-prevnext .left and #slideshow-prevnext .right remove float: left and add position: absolute.
On #slideshow-prevnext .left add right: 29px and top: 0.
On #slideshow-prevnext .right add right: 0 and top: 0.
On #slideshow-prevnext a.dot add float: left.
It looks like this when you're done:
you can do it by this example.
<div class="wrapper">
<div style="float:left"> </div>
<div style="float:right;">Prev | Next</div>
<div style="clear:both;"></div>
</div>
i have used Inline Css. You can do it by classes or external Css also.
Without seeing your CSS it makes it hard to guess how you have this working.
Assuming left and right are css classes for floating left/right, just remove them and move the links down like so:
<div id="slideshow-prevnext" class="slideshow-prevnext">
<a id="prev" href="#"><span class="invisible">Prev</span></a>
<a id="next" href="#"><span class="invisible">Next</span></a>
</div>
You'll have to post your CSS if you want a better example.