I have a row where I have one 2-wide column for an image and a 10-wide for other content (navbar, etc.). The text is separate from the image as desired and on the same row, but I want the text to be on the same 'line' as the image (on the same horizontal plane as the bottom of the image). I've tried absolute-relative positioning and many other methods but I cant seem to get it working. What's the best method?
<div class="row">
<div class="col-md-2">
<img src="../logo.png" width="100%" height="100%">
</div>
<div class="col-md-10">
<p>test text</p>
</div>
</div>
Add a class to the second div like this.
<div class="row">
<div class="col-md-2">
<img src="../logo.png" width="100%" height="100%">
</div>
<div class="col-md-10 position_me">
<p>test text</p>
</div>
</div>
And now you can add something like this:
.position_me { position: relative; } .position_me p { position: absolute; bottom: 0; left: 0; }
Now your text should be at the bottom of the image.
I guess you want to add caption on top the image.
Try using the css float element.
img{
float:right;
}
If this does not work try setting the row position type to relative position and the col objects to absolute position so you will have control within the row.
I hope one of those methods will solve your problem. And if not take a look on this site: http://webdesign.about.com/od/graphics/ht/caption_images.htm
which explains how to add captions on images using css.
Related
I am having an image and text to be displayed on a page. Is there any way to have fixed distance between the both? Tried with media queries but couldn't do it.
<div id="element">
Text Here
<div class="imagehere">
<img src="./img/pic.jpeg"/>
</div>
</div>
Note: The text need to be displayed above the image. Problem is the text is disappearing when the image overlaps with it.
Add this style
.imagehere {
margin-top: 10px; /* This will be fixed distance */
}
A simple margin will do the trick:
.text-wrapper {
margin-bottom: 30px;
}
<div id="element">
<div class="text-wrapper">Text Here</div>
<div class="imagehere">
<img src="./img/pic.jpeg" />
</div>
</div>
I have a container on my landing page and it makes white space. I want it full screen. I try to make the top and right 0px, but the right still edge.
This is what looks like
And this is what I want
The code
<section class="zerra-porto">
<div class="container">
<div class="row">
<div class="col align-self-center">
<h1 class="mb-4">
Hi, My Name is <br />
Sumnit Parfit
</h1>
<p>A Front End Developer</p>
Get to know
</div>
<div class="col">
<img src="/images/foto.png" alt="" class="landing-pic" />
</div>
</div>
</div>
</section>
.zerra-porto .landing-pic {
position: relative;
right: 0px;
top: 0px;
z-index: -1;
}
Can you please check the below code? Hope it will work for you. Based on your question, we have understood that you need your content inside the container but you want your banner image outside the container, for that, we have made modifications in your HTML structure and positioned the Image in right as per your required screenshot.
Please refer to this link: https://jsfiddle.net/yudizsolutions/zgcydft1/
My image div seems to be taking up the entire top section of the browser, I am not sure what I did wrong, but in order to make the text align within the image, I will have to add top:250px, that doesn't seem right to me. Here is my code: http://jsfiddle.net/Swathi56/zzbwkoLj/1/
I have attached the image for your reference.
<div>
<div class="hero-image-download col-xs-12">
<div class="overlay"></div>
<div class="hero-text-download text-center">
<h1>aspenONE Download Center</h1>
<h2> Download your UPGRADE now!</h2>
<p>Simply select software suite and you need to start using the latest version.
It’s fast and easy</p>
</div>
</div>
<div class="engineering-section">
<div class="engineering-section-title title-text">Engineering</div>
</div>
</div><!--end div-->
Remove top: 250px; from your text and set their parent DIV's (.hero-text-download) position to absolute and align it to the bottom of it's parent DIV (bottom: 0;).
.hero-image-download .hero-text-download {
position:absolute;
margin:auto;
bottom: 0;
}
http://jsfiddle.net/zzbwkoLj/2/
Remove
background-size:cover
height:500px
from the .hero-image-download class styling.
After this you do not need to add top:250px in the text containers.
I hope this will help
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.