This is intended to be an image preview along with text.
I have two divs: one with an image and one with text. The image needs to be square size and fill the whole container
The code currently is
<div class="row">
<div class="col-md-3">
<div class="col-md-6">
<img src="http://quarknet.de/fotos/blumen/wildblumen/graeser-im-quadrat.jpg" alt="" style="max-height:100%;max-width:100%">
</div>
<div class="col-md-6">
<div class="top">Top</div>
<div class="bottom">bottom</div>
</div>
</div>
http://jsfiddle.net/m1sbhnwe/
And it is intended for full-screen, so you need to drag the preview wider to see the effect.
Now I need the div with the top class to always stay at the top of that div and the div with the bottom class to always stay at the bottom of the parent div at image level. That means the bottom div should align with the lower edge of the picture.
If I add position:absolute;bottom:0 to that div it just goes to the top. How can I achive the effect I want?
I don't quiet understand the effect your going for.
If the text is appearing at the top it ussually points to the parent div having a height of 0px;
if you are floating .col-md-6 then that could cause a problem calculating height. In which case you would want to add a after the last .col-md-6
if you are using a absolute positioned .col-md-6 then the size cannot be calculated and you will have to come up with a fixed width/height;
Here is a solution kinda that would work if the .row is full screen...
.row {
position:fixed; top:0px; left:0px; right:0px; bottom:0px;
}
.col-md-6 {
position:absolute; top:0px; left:0px; right:0px; bottom:0px;
text-align:center;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px; right:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px; right:0px;
}
the fiddle you provided has no css in it, It would help if you added some CSS to show the problem you are having.
UPDATED FOR COMMENT;
.col-md-6 {
float:left; height:100%; position:relative;
}
.col-md-6 img {
height:100%;
}
.col-md-6 .top {
position:absolute; top:0px; left:0px;
}
.col-md-6 .bottom {
position:absolute; bottom:0px; left:0px;
}
Related
In my HTML and CSS image gallery I want to have text displayed over the images. However I only manage to get the text below the images.
Here is the html code:
<div class="fleft imgdiv">
<div>Image Name</div>
<img class="galleryimg op80" src='http://qnimate.com/wp-content/uploads/2014/03/images2.jpg'>
</div>
<!-- repeats many many times -->
Here I use only very little CSS and the only thing I try to do is make the text Image Name show up over the images rather than below them.
Here is the CSS I'm using:
.fleft{
float:left;
}
.imgdiv {
width:24%;
height:150px;
position:relative;
overflow:hidden;
margin:0.5%;
}
.imgdiv .galleryimg {
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
}
.op80{
opacity:0.5;
}
Here is a jsFiddle for better understanding what the problem is. The op80 makes the Image slightly transparent and enables us to see the text below
JS Fiddle Example
What am I doing wrong here and how I can get the text appear in front of the images rather than below them?
Add a Z-Index property to both your image and text elements.
You need to create a class for your text div. I called this one flying-text, as an example.
.fleft{
float:left;
}
.imgdiv {
width:100%;
height:auto;
position:relative;
overflow:hidden;
margin:0.5%;
}
.imgdiv .galleryimg {
min-width:100%;
min-height:100%;
height:auto;
position:relative;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
z-index:0;
}
.op80{
opacity:1;
}
.flying-text {
color: red;
z-index:1;
position: relative;
text-align: center;
font-size: 2rem;
}
<div class="fleft imgdiv"> <div class="flying-text">Sleepy Cat</div> <img class="galleryimg op80" src='https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/06/cat-217679.jpg'></div>
Source
To get the text over the image you really just need to make the child items (img and div) have absolute positioning and then you just have to rearrange your HTML so that the text comes after the img. I see too you're trying to center the image within the div even if it's bigger - the top, left, and transform css you have will work fine for that but again the items need to have absolute positioning so I think that is your main problem.
Side note on the position CSS property - it should be that an ancestor is marked as relative and descendants items absolute, as to absultely position children, relative to the parent.
.fleft{
float:left;
}
.imgdiv {
width:24%;
height:150px;
position:relative;
overflow:hidden;
margin:0.5%;
}
.imgdiv .galleryimg {
min-width:100%;
min-height:100%;
height:auto;
top:50%;
left:50%;
transform:translateY(-50%) translateX(-50%);
opacity: .5;
}
.imgdiv .galleryimg, .imgdiv div {
position: absolute;
}
<div class="fleft imgdiv">
<img class="galleryimg op80" src='https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg'>
<div>Image Name</div>
</div>
<div class="fleft imgdiv">
<img class="galleryimg op80" src='https://image.shutterstock.com/image-vector/example-signlabel-features-speech-bubble-260nw-1223219848.jpg'>
<div>Image Name</div>
</div>
By in front of the images do you mean to center the text in the image? If so you could just center the div for the HTML
Okay I have a small problem,who I cant solve.
I hope experts will help :)
As you can see I have 3 divs on my index site.
No in the middle is one input who is across header and main div.
And the yellow circles are divs with but images*
About the div images...their code is
The positions are random,not equal as I have done.
HTML and CSS
#container{position:relative;}
.circle{border-radius:50%;
width:127px;
height:127px
positionate:absolute;
}
#apple_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:-5px;
left:15px;
}
#weight_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:30px;
left:80px;
}
#bike_img{
background-image:url(../images/sprite.png);
background-position: some pixels;
top:100px;
left:20px;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
</div>
So my problem is when re sizing the windows it will go as the div1,they will go across each other. I need too to make it responsible,but when using mobile,i need them to disapear, and when on smaller displays I need them to adjust their size to display.
Is the positioning okay or should I use float?
Your question is very confusing but I guess that you want is something like this:
In can resize without problems using media queries.
Here is the link of mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/#media
You can also use float:left and position:relative for your divs and position:absolute for your input.
Here is my HTML and CSS code:
.circle {
}
#apple_img {
background:green;
width:100%;
height:100px;
float:left;
position:relative;
}
#weight_img {
background:red;
width:100%;
height:100px;
float:left;
position:relative;
}
#bike_img {
background:blue;
width:100%;
height:100px;
float:left;
position:relative;
}
/* use media query here to other resolutions >768px and <=768px for example */
div > input{
width:200px;
height:200px;
position:absolute;
left:50%;
margin-left:-100px;
top:50px
}
input{
width:200px;
height:200px;
position:relative;
float:left;
}
<div id="container">
<div id="apple_img" class="circle"></div>
<div id="weight_img" class="circle"></div>
<div id="bike_img" class="circle"></div>
<div><input type="text" value="Type here"></div>
</div>
I guess that your class "circle" is not doing what you want, then I commented it (try used it to check).
For the tags div > input and input you can use the media query to resize correctly your input.
Here is my jsfiddle: http://jsfiddle.net/dhvuakjr/
Ps.: It's position and not positionate like you wrote your class circle
Hope this help you.
I have this setup:
<div class="wrapper">
<div class="container"> <div class="inner"></div></div>
</div>
.wrapper {
max-width:320px;
max-height:240px;
}
.container {
position:relative;
padding-top:56.25%;
background:green;
}
.inner{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
http://jsfiddle.net/3A32T/2/
If you shrink window width, div size shrinks while keeping aspect ratio which is what I want.
However, if you shrink window height, div height doesnt shrink, you get browser scroll.
Is there a way to achieve second conditional as well?
Updated DEMO here.
Change padding-top to height
Write:
html,body,.wrapper{
height:100%;
width:100%;
}
.container {
height:56.25%;
}
I've got four divs. one container and three columns. Column 1 and 3 has a fixed width, and column two needs to fill the gab between them. I would like the design to be re-sizable depending on the screen width, to a minimum of 300px.
My HTML
<div id="container">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
the CSS
#container {
width:100%;
min-width:300px;
position:relative;
}
#1 {
float:left;
min-width:300px;
min-height:10px;
background-color:red;
}
#2 {
overflow:hidden;
width:100%;
min-height:10px;
background-color:blue;
}
#3 {
float:right;
min-width:300px;
background-color:green;
}
Just remove width: 100%; from #2. It will automaticly take whole free space.
Check fiddle: http://fiddle.jshell.net/ozeczek/aVbC6/
Please see the following: http://jsfiddle.net/GWJMf/
What I'm trying to do is have the TITLE fixed, not scroll. But the content scrollable.
Problem is, having a fixed title, makes it very hard to deal with the dynamic range of a title, which can have anywhere from 5 - 250 characters.
Is there a way to have the TITLE be fixed, not scroll, but have the height set based on the title length?
Is this possible w CSS? Ideas? Thanks
Not sure why you have all that extra styling. You don't need to style the h2 or any wrapping elements to have it expand based on the length of the text.
http://jsfiddle.net/xd7a4/
I'm not sure of the height you're desiring for the scrolling container however here I set it to 200px.
<h2>title</h2>
<div class="scroll">content</div>
H2 {
background-color: #FF0000;
}
.scroll {
height: 200px;
overflow: scroll;
overflow-x: hidden;
}
I think this will help :
<style>
.content {
position:absolute;
top:100px;
left:100px;
width:300px;
height:auto;
}
.title {
position:relative;
top:0px;
left:0px;
width:100%;
height:auto;
background:red;
color:#fff;
}
.text {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
max-height:200px;
overflow:auto;
}
</style>
<div class="content">
<div class="title">title<br/>title...</div>
<div class="text">text text <br/> text text...</div>
</div>