I have this HTML CODE, and I want the div with dragHandle class in foreground, up the second div. I try with the z-index but not working...
<div id="containerYoutube"> <!-- ********** Container Youtube ********** -->
<div class="dragHandle">
<i class="fa fa-circle-thin" aria-hidden="true"></i>
</div>
<div class="row">
<div class="col-s12">
<div class="youtubeCard card">
<div class="card-image">
<object
data="http://www.youtube.com/embed/<?= $videos['id']['videoId']?>">
</object>
</div>
</div>
</div>
Any help ?
Thanks
I think you need to set absolute position for this div and relative to the parent one.
#containerYoutube {
position: relative;
}
#dragHandle {
position: absolute;
}
HTML elements layer by default on the order they are nested. Elements that are children are drawn over elements that are parents. You could take advantage of this by making div.dragHandle a child of the element you want it over:
<div id="containerYoutube">
<div class="youtubeCard card">
<div class="dragHandle"></div> <!-- dragHandle is inside youtubeCard -->
<div class="card-image"></div>
</div>
</div>
From the looks of it you are missing some closing tags as well, so be sure that your div.row and div.col-s12 have closing tags.
Related
I am working on my portfolio. I have this page here:
The first picture there is a date on. I would like a text in the bottom, like this:
But I cannot get that text placed. Everytime I add a div tag and set in a text, it is going outside of the picture. I guess it is a div tag there has to be somewhere?
<div class="portfolio logo" data-cat="logo">
<article class="block-thumbnail">
<a href="#" class="block-thumb">
<div class="date">
<span class="day">10</span>
<span class="month">aug</span>
<span class="month">2016</span>
</div>
</a>
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="image-caption">
<div class="col-md-4 col-sm-6 col-xs-12">
<h2>link</h2>
</div>
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
</div>
If we are talking about the h2 element, that html tag sits inside a element that is hidden by default and only appears on hover.
I will move it outside the .image-caption div
<div class="portfolio-wrapper">
<div class="portfolio-hover">
<div class="col-md-4 example col-sm-6 col-xs-12">
<h2>link</h2>
</div>
<div class="image-caption">
</div>
<img src="img/portfolios/logo/5.jpg" alt="" />
</div>
</div>
and give it those styles
.example {
position: absolute;
bottom: 0;
z-index: 1;
text-align: center;
left: 0;
}
Adjust than bottom and left values to match the positioning for your design
You'll have to create a css for your image-caption class, that will be in absolute position, meaning it can clash with other things. This should help you with that: Position absolute but relative to parent . Then just make sure you have your z-index right so it's not behind the image
I have 2 different partial views that I am calling in my main view like this:
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Now my problem is this:
All I have done is put background-color: green in my CSS for the class .next-game (honestly just to see what it looked like.. green is not what I am going to use)... I have gone into Inspect Element on IE and I cannot find the problem as to why the background is so big. I just want the background to be around The Next Game Is:
CSS:
.next-game{
background-color: green;
}
How do I shrink the background? I have tried width: 50%; height: 10px; //etc just to see the different changes but can't figure this out
UPDATE:
I have changed the HTML to:
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
</div>
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
This at least made the background render properly. So this has something to do with the partial views?
The most likely cause for this issue is that your twitter bootstrap columns have no wrapping row. You generally need all three (container, row, column) for it to render properly. What you're running into here is probably a clearfix issue. The columns are floated, which makes the next available non-floating element appear to "wrap" them. Below is a possible solution to the problem.
<div class="container">
<div class="row">
<div class="col-md-6">
#Html.Action("Chart", "Teams")
</div>
<div class="col-md-6">
#Html.Action("SeriesWinsChart", "Teams")
</div>
</div>
</div>
<div class="next-game">
<h3 class="text-center">The Next Game Is:</h3>
</div>
<br />
<div class="text-center">
<h3 style="color:red;">#ViewBag.NextGame</h3>
</div>
Other solutions include adding a .clearfix class to a wrapper for the columns or adding clear:both to .next-game.
You need
.next-game h3{
background-color: green;
}
(it's just for the header h3 inside the element with that class .next-game)
I'm using CSS to target a specific element in the following code. The element I want to target is the last element in the first div (.1g07). I need to do this without referring to .1g07 as the class name is dynamic.
Here is the CSS I use:
[data-sigil="reactions-bling-bar"]:first-child:last-child
And the HTML:
<a href="#" data-sigil="feed-ufi-trigger">
<div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
<div class="_1g07">
<div class="_1g05" style="z-index:3">
<i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
</div>
<div class="_1g05" style="z-index:2">
<i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
</div>
<div class="_1g05" style="z-index:1">
<i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
</div>
<div class="_1g06">48</div>
</div>
<div class="_1j-b"><span class="_1j-c">12 comments</span></div>
</div>
</a>
It's not targetting this element though (in this case the element that contains the number 48).
Any ideas on where I am going wrong?
You can do like this
[data-sigil="reactions-bling-bar"] div div:last-child
[data-sigil="reactions-bling-bar"] :first-child :last-child
Sample snippet
[data-sigil="reactions-bling-bar"] div div:last-child
{
color: red
}
<a href="#" data-sigil="feed-ufi-trigger">
<div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
<div class="_1g07">
<div class="_1g05" style="z-index:3">
<i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
</div>
<div class="_1g05" style="z-index:2">
<i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
</div>
<div class="_1g05" style="z-index:1">
<i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
</div>
<div class="_1g06">48</div>
</div>
<div class="_1j-b"><span class="_1j-c">12 comments</span></div>
</div>
</a>
[data-sigil="reactions-bling-bar"]:first-child:last-child targets an element with a data attribute called sigil that is both the first and last child of its parent.
I think you're looking for [data-sigil="reactions-bling-bar"] > :first-child > :last-child, which would select the last child of the first child of the element with that data-sigil attribute.
you can try this
#u_1_k div div:last-child
{
/* css as you wants */
}
your CSS selector targets nothing, because:
[data-sigil="reactions-bling-bar"] targets the div with the attribute data-sigil having the value reactions-bling-bar;
[data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container;
[data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container AND which is the last child of its container.
This can't work.
If you can't modify the HTML, I dont think you can do what you want, maybe with:
[data-sigil="reactions-bling-bar"] > div > div:last-child {
/* CSS rules here */
}
Trying to realize the above structure in my UI. A big picture and thumbnails below it.
I am using the grid components for it. Code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
</div>
</div>
Now I want to delete pictures out of Pics. That's why I introduce badges with the following code:
<div class="row">
<div class="col">
<img url="bigPic"></img>
</div>
</div>
<div class="row">
<div class="col" ng-repeat="pic in Pics">
<img url="pic"></img>
<span class="badge badge-assertive picture-thumbnail-badge"
on-tap="removePic($index)">
<i class="icon ion-ios7-close-empty"></i>
</span>
</div>
</div>
And this results in the following (with a css class moving the badges in the top left corner):
.picture-thumbnail-badge{
position: relative;
top:-60px;
right:65px;
z-index: 100;
}
The Problem here is that the thumbnails are no longer centered underneath the big picture. I guess the flexbox is taking into account the size of the badge somehow.
My obvious question now: how can I ignore the badge in the alignment calculation and make this thumbnail row centered, even with badges?
Thanks in advance.
You need to move the .picture-thumbnail-badge out of the flow. For that, you can use position:absolute; instead of position:relative; :
.picture-thumbnail-badge{
position: absolute;
top:-60px;
right:65px;
z-index: 100;
}
(note that the parent needs to be positioned with position:relative;)
All I want is my two divs to stack next to one another. They are located inside a container. Why isn't it working?
This is my CSS:
#housecontainer {
height: 420px;
width: 1000px;
padding-left: 110px;
padding-top: 80px;
}
#houseimage {
float: left;
height: 388px;
width: 516px;
}
#rose {
width:200px;
height:100px;
float:left;
}
Judging by the HTML you posted in your comment, your page structure is:
#devcontainer
#develbox
#housecontainer
#houseimage
p
a
img
#rose
Since #rose is a child of #houseimage, it doesn't follow the same floating as it. Since #houseimage has a width of 516 and so does the image, there's no room left for #rose and it is forced below.
Just put one more </div> before <div id="rose">, so that it's inside #housecontainer and next to #houseimage, like you want. Then add the two other </div> you're missing.
You have several structure errors.
Try structuring your HTML like this:
http://jsfiddle.net/bGyV4/
This is the HTML you posted in your comment:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
<div id="rose">
<div id="rose">THIS ISNT WORKING!!!</div>
</div>
</p>
</div>
</div>
There are a number of issues with this:
The id of an element must be unique. It is used to identify the element. In your markup there are two div elements with id="rose".
From your question, it seems as if you want #houseimage and #rose to be side-by-side. This is not happening because #rose is inside #houseimage. That is, it is a child of #houseimage. You need to move it outside the div so that #rose is a sibling of #houseimage.
Change your HTML to be like this:
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">
<div id="roseChild">THIS ISNT WORKING!!!</div>
</div>
</div>
jsFiddle Demo
your html error,some DIV tag not closed,try this:
<div id="devcontainer">
<div id="develbox">
<div id="housecontainer">
<div id="houseimage">
<p>
<a href="images/rosebrook.pdf" target="_blank">
<img src="images/rosebrookthumb.png" width="516" height="388" />
</a>
</p>
</div>
<div id="rose">THIS ISNT WORKING!!!</div></div>
</div>
</div>
</div>