im new to css , i did write code below :
.topcenter {
margin-right: auto;
margin-left: auto;
position: relative;
}
.back {
width: 100%;
height: auto;
position: absolute;
}
.green {
background-color: #9AC149;
}
<div class="back"><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="500" height="200" alt=""/></div>
<div class="topcenter"><img src="http://pngimg.com/uploads/buttons/buttons_PNG44.png?i=1" alt="" width="10%" title="register"/></div>
<div class="green">
<div class="row row1">
<div class="col-md-6">
<div><p>
i dont want it be overlap
</p>
<button type="button" class="btn btn-default">Content for New Div Tag Goes Here</button>
</div>
</div>
<div class="col-md-6">
<div><img src="images/book.png" width="413" height="461" alt=""/></div>
</div>
</div>
</div>
problem is row1 overlap first image but i want just register button overlap image , i did try "clear:both;" in row1 css but nothing happened . what should i do ?
If I understand you correctly the problem is with using position: absolute.
To put it simply if you use it on part of your page that that part is out of order of elements on your page. It doesn't take place. So you can just give it other kind of display.
.back {
width: 100%;
height: auto;
position: relative;
}
and if you want to place your button over your image you should add position: absolute to your .topcenter class. You can move it with top,right,bottom,left.
You can try to work it out with order of your files too.
Related
I am trying to put my background behind the div that contains a jumbotron, but the div keeps on staying below the background image, instead of appearing on it. How do I fix this?
P.S : I do not want to put the background image in my CSS file for some reasons, so i want the image src to only be in my HTML. Many thanks!
Here is my code :
<div class="container-fluid" >
<img src='U_Thant_PIC_3.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
In order to achieve this you need to tell the browser to position the img element behind your child div. For the purpose you can use the position attribute, with the img having a lower z-index.
The z-index does work for this, as long as you have position properties on the elements:
div.container-fluid{position:relative;}
div.container-fluid img{position:absolute;top:0;left:0;z-index:1}
div.container-fluid div.jumbotron{position:relative;z-index:5;color:white;}
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Try this;
HTML
<div class="container-fluid">
<img src="U_Thant_PIC_3.jpg" alt="Snow" width='1400px' height='800px'>
<div class="jumbotron jumbotron-fluid">
<h2 class="a">Cats are cool
</div>
</div>
CSS
.jumbotron {
position: absolute;
left: 50%;
}
It will give you centered text on top of your image.
Add position: absolute; into the class="jumbotron jumbotron-fluid", and move your <img src='U_Thant_PIC_3.jpg' width='1400px' height='800px'/> to the bottom of code.
.box {
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
}
.jumbotron {
color: white;
position: absolute;
}
<div class="box">
<div class="jumbotron">
textbox
</div>
<img src="https://www.w3schools.com/css/img_lights.jpg">
</div>
You need set up first the parent element with position: relative; in this case you should add the css below.
.container-fluid { position:relative }
and then you need to set up the jumbotron with the next style.
.jumbotron { position: absolute }
with this should be work, also you can move the .jumbotron with the top, bottom, left and right positions, for example:
.jumbotron { position: absolute; top: 20px; left: 10px; }
In this way .jumbotron will move in the area with the first position: relative; taken. In this case in the area of .container-fluid class.
<div class="container-fluid" >
<img src='https://www.w3schools.com/css/img_lights.jpg'
width='1400px' height='800px'/>
<div class="jumbotron jumbotron-fluid">
<center>
<h2 class="a">Cats are cool</h2>
</center>
</div>
</div>
Here I give you and example:
https://jsfiddle.net/mnL8cvf2/2/
Hope this can help you.
First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:
Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Consider using image as background in conjunction with background-size: cover.
I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>
try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.
you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.
I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>
HTML:
<div class="shortList" id="unselShortList">
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
CSS:
#unselShortList {
background-color: red;
overflow: scroll;
height: 150px;
position: relative;
}
#submit {
position: absolute;
}
jsfiddle: http://jsfiddle.net/iyogesh/4sxNg/
'OK' Hyperlink is coming inside div.
How can I move 'OK' link out of scrolled div and show it after div using CSS without changing html structure?
Check this fiddle
add a parent element
<div id="unselShortList">
<div class="shortList" >
<div id="Value1">A</div>
<div id="Value2">B</div>
<div id="Value3">C</div>
<div id="Value4">D</div>
<div id="Value5">E</div>
<div id="Value6">F</div>
<div id="Value7">G</div>
<div id="Value8">H</div>
<div id="SubmitValue">
<div id="submit">OK</div>
</div>
</div>
</div>
CSS
#unselShortList {
position: relative;
padding-bottom:31px;
}
.shortList{
height: 150px;
background-color: #33cccc;
overflow: scroll;
margin-bottom:25px;
}
#submit {
position: absolute;
}
#SubmitValue{
position:absolute;
bottom:0;
}
Simple answer:
You CANT
(unfortunately)
Because you've specified overflow on the parent container, you cannot position child content outside of its limits. You can see the effect of this here (without) vs here (with)
In this case you will need to implement a change in your HTML, or look at other styling options- such as overlaying the button in the top right of the div or using javascript to reposition/add an element into the DOM
try:
#submit {
position: fixed;
}
I have created the following
http://jsfiddle.net/fcW66/1/
CSS
.div_wrapper {
float: left;
width: 100px;
background: 3333;
margin: 15px;
background: #cacaca;
z-index: 1;
}
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
}
.div_one:hover .div_two {
display: block;
}
HTML
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
When you hover over it shows the description, but it pushes the other divs further. I have tried giving the div_wrapper a fixed width, which fixes that problem but when the div2 appears it shows under the next div that is under it. I tried adding a z-index and it did not change anything. I need the div_two to show over the top of the divs that are below it and not change the layout.
If you want white-space in the location of the object BEFORE hover, you would use visibility, not display.
visibility:hidden, instead of display:none
and visibility:visible, instead of dislpay:block
You should use position: absolute to position this div. Absolutely positioned elements do not take up space within their container preventing them from pushing other elements around.
In most cases such as this, you will want to set the parent element to position: relative as well, so that the absolute element can be positioned relative to its parent instead of the whole document.
http://jsfiddle.net/fcW66/7/
.div_one{
position: relative;
}
.div_two {
/* ... */
position: absolute;
width: 100%;
}
You can use position: absolute; to accomplish this.
Here's a fiddle http://jsfiddle.net/QbAzY/
Add position:absolute; and width: 100px; to your .div_two rules
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
position:absolute;
width: 100px;
}
jsFiddle example
z-index only applies to positioned elements, so by setting position:absolute on your .div_two elements it not only allows the z-index to work, but it takes those elements out of the normal flow of the document and won't push the other divs down. Note that you also have two background rules on your .div_wrapper element, and a z-index rule that isn't doing anything.