I have three DIV and inside the DIV, I would like to float the "Learn More" to bottom right so it will be on top of the grey background.
CSS
/* the div for LEARN MORE */
#trt {
z-index: 9999999999999;
position: relative;
float: right;
bottom: 0; // not working
top: 12; //not working
}
/* the entire div */
.main .cols { padding-left: 2px; padding-right: 0px; padding-top: 10px; }
.main .cols .col { width: 315px; height: 108px; float: left; background: url(images/tempf.png) no-repeat 0 0; }
.main .cols .col:after { content:''; width: 100%; clear: both; }
.main .cols .col + .col { padding-left: 20px; }
.main .cols .col img.hid { float: left; width: 129px; height: 108px; }
.main .cols .col-cnt { width: 183px; float: right; }
.main .cols .col .more { font-weight: bold; color: #0206AA; }
HTML
<div class="main">
<section class="cols">
<div class="col">
<a href="link.aspx">
<img class="hid" src="css/images/orgNews.png" alt="" />
</a>
<div class="col-cnt">
<h3 style="color: #FFFFFF;">Organization News</h3>
<p style="color: #FFFFFF;">Interfaith Medical Center related news and updates</p>
<div id="trt">
<img src="css/images/arrow.png" width=11 height=11 align=absmiddle />
Learn More
</div>
</div>
</div>
</section>
</div>
CSS - After Edit
.trt {
z-index: 9999999999999;
position: absolute;
bottom: 3px;
right: 3px;
}
...
.main .cols .col-cnt { width: 183px; float: right; position: relative; }
...
This CSS worked:
.trt {
z-index: 9999999999999;
position: absolute;
top: 85px;
right: 3px;
}
set col-cnt div to position: relative set trt to position: absolute; bottom:3px; right:3px; that should get you where you need to be.. also, trt should be a class if it is being reused
First at all, you must set parent of #trt to relative.
#parent-of-trt {
position: relative;
}
And set #trt to absolute
#trt {
position: absolute;
left: 4px;
bottom: 5px;
}
Your float: right isn't working because of a width issue on the #trt div. Basically it's extending 100% of the width and so it can't technically go left or right. Instead of floating, just use...
#trt { text-align: right; }
???
As for getting it pushed down onto that grey line, add some margin-top to #trt to do that...
Other solution would be to use position: absolute; but would be less preferable.
Maybe use position: absolute; instead of relative
change position as fixed like following:
position:fixed;
it should work.
Related
.scss
div.playlist {
position: relative;
display: inline-block;
}
div.playlist {
span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
color: white;
font-size: 20px;
}
.span-icon {
padding-bottom: 50px !important;
}
}
div.playlist span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
.html
<div class="playlist">
<span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
<span>{{data.text}}</span>
<img [src]="data.imageUrl" [alt]="data.text" />
</div>
Out Put
Now I need as shown below.Please don't consider about the different icon type and the text.I just need this.I need a responsive top right and the bottom right appearance of the icon and text.I have tried with text-align: right and the margin properties.But you know that approach is not responsive on different view ports.So can you help me to solve this issue?
Position your both icons and span text as absolute and then if needed you could use CSS calc() function to align them at top-right and bottom-right above the image.
.playlist {
position: relative;
display: inline-block;
width: 240px;
height: 200px;
overflow: hidden;
}
.playlist img {
width: 100%;
height: 100%;
}
.playlist .span-icon {
position: absolute;
top: 5px;
right: calc(100% - 98%);
color: #fff;
}
.playlist .tm {
position: absolute;
bottom: 5px;
right: calc(100% - 98%);
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="playlist">
<span class="span-icon"><i class="fa fa-film"></i></span>
<span class="tm">2:10</span>
<img src="http://lorempixel.com/output/city-q-c-640-480-6.jpg">
</div>
<div class="playlist">
<span class="span-icon"><ion-icon [name]="data.icon"></ion-icon></span>
<span class="span-text">{{data.text}}</span>
<img [src]="data.imageUrl" [alt]="data.text" />
</div>
CSS
.span-icon {
position: absolute;
top: 0;
right: 0;
}
.span-icon {
position: absolute;
bottom: 0;
right: 0;
}
You simply set the icons absolute and position it with top, right. ...
Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better
Fiddle: JSFiddle
HTML
<div class="img-cont">
<div id="slider">
<ul>
<li class="slide">
<img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
<div class="cool-image"></div>
</li>
</ul>
</div>
</div>
CSS
.img-cont{
height: 270px;
position: relative;
}
#slider {
position: relative;
background: green;
overflow: hidden;
width: 440px;
height: 200px;
}
#slider ul{
position: relative;
margin: 0;
padding: 0;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 440px;
height: 270px;
text-align: center;
line-height: 300px;
}
div.cool-image{
background-color: white;
position: absolute;
border: 5px solid #EEEEEE;
width: 650px;
height: 350px;
z-index: 1;
display: inline-block;
background-repeat: no-repeat;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
margin-left: -40px; /* Just to product situation */
display: inline-block;
}
Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.
If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;
Like this...
.slide img {
position: absolute;
z-index: 2;
}
.slide {
position: relative;
}
Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;
I have two independently scrolling divs, one with a header and footer.
<body>
<div class="container col-1">
Many listings
</div>
<div class="container col-2">
<div class="header">Fixed Header</div>
<div class="content">Lots of content</div>
<div class="footer">Fixed footer</div>
</div>
</body>
See this fiddle: https://jsfiddle.net/bhmvv05n/
The problem is, I'd like the second container div to have a fixed header and footer that are always visible and have only the content scrollable.
As soon as I change the scrolling of the col-2 div, the two columns don't scroll independently anymore.
Any advice?
Thanks!
This will adjust to whatever width you have for your columns.
The idea is that you only make .col-2.content scrollable, not the whole .container.
* {
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
}
.col-1{
float: left;
width: 33%;
overflow: auto;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.col-2 .content {
position: absolute;
left: 0; right: 0;
top: 20px; /* header height */
bottom: 20px; /* footer height */
overflow: auto;
}
.header, .footer {
height: 20px;
background-color: red;
position: absolute;
left: 0; right: 0;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
Could something like this work for you?
https://jsfiddle.net/vz7eb8uc/
Code changed;
.col-1{
float: left;
width: 33%;
position: relative;
}
.col-2{
float: left;
width: 67%;
position: relative;
}
.header, .footer {
height: 20px;
background-color: red;
position: fixed;
left: 33%;
width:67%
}
I have been looking this this for about a half hour, and I cannot figure out what I am doing wrong...
I have nested divs, like this:
<div id="header">
<div id="header_left"><img src="~/images/image1.png"></div>
<div id="header_right"><img src="~/images/image2.png"></div>
</div><!--End Header-->
Basically, my nested divs split the screen horizontally into two equal parts, left and right.
Image1 is a logo and takes up most of header_left
Image2 is a small image, and I am trying to get it to move to the bottom right corner of header_right.
Here is my CSS:
#header{
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
position: absolute;
bottom: 0;
right: 0;
}
As it stands right now, image2 is in the top left hard corner of header_right, and I cannot get it to move anywhere.
Any help appreciated!!!!
That should do it. You must position the img using a separate rule, i.e. #header_right > img
#header {
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-left: 0px;
background-color: #000;
display: block;
overflow: hidden;
position: relative;
}
#header_left {
float: left;
width: 50%;
}
#header_right {
right: 0;
position: absolute;
bottom: 0;
}
#header_right > img {
float: right;
}
<div id="header">
<div id="header_left">
<img src="~/images/image1.png">
</div>
<div id="header_right">
<img src="~/images/image2.png">
<img src="~/images/image3.png">
</div>
</div>
<!--End Header-->
A good starting point would be to select not just the div container, but also the images as follows:
#header_left img{
float: left;
width: 50%;
}
#header_right{
float: right;
height: 100%;
width: 50%;
}
#header_right img{
position: absolute;
bottom: 0;
right: 0;
}
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/