How can position a picture of 30px width and 30px height with 2 lines next to it so these two lines would fit one above the other also within 30px height?
I already have Bootstrap installed if it could help.
<p>
<img src='pic1.png' width='30' height='30'/> <a href='#'>E"nola Kuhic (wiu)</a>
person
</p>
Consider using Bootstrap's media object.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
E"nola Kuhic (wiu)
person
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="media">
<div class="media-left">
<img class="media-object" src="https://placehold.it/40x40">
</div>
<div class="media-body">
E"nola Kuhic (wiu)
<div>person</div>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="https://placehold.it/40/AFA">
</div>
<div class="media-body">
John Doe
<div>admin</div>
</div>
</div>
<p>
<img src='pic1.png' width='30' height='30' style='float:left;'/>
<a href='#'>E"nola Kuhic (wiu)</a><br />
person
</p>
Related
I have an html page that contains "links" to many sections of the page. I'm using a single page layout where if a link is clicked, you are not actually taken to a new page. Instead you are taken to the section of the page that you clicked on in the nav bar. I have a section for 6 images, each with a caption. I need the images to be in 2 rows with 3 images per row without using a table.(each image with its caption underneath) But I also need them to be responsive, so if the size of the browser is minimized then the images stack up on each other (caption still there). I tried using padding and margins but I wasn't able to get it to work so I don't have any CSS to post but I do have my HTML code. Can someone please help me out? Here is my code:
<div class="allimagesgallery">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption">CAPTION.</div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image4.jpg">
<img id="galleryimages" src="images/image4.jpg">
</a>
<div class="caption">CAPTION</div>
<a href="images/image5.jpeg">
<img id="galleryimages" src="images/image5.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image6.jpeg">
<img id="galleryimages" src="images/image6.jpeg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
it would help us if we knew what your css in "allimagesgallery" looked like.
A little reformatting like the code below might help:
/*-----css---------*/
.imagesgalleryrow img{
display: inline-block;
}
<!-- /// HTML \\\ -->
<div class="allimagesgallery">
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
<div class="imagesgalleryrow">
<a href="images/image1.jpg">
<img id="galleryimages" src="images/image1.jpg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image2.jpeg">
<img id="galleryimages" src="images/image2.jpeg">
</a>
<div class="caption"> CAPTION </div>
<a href="images/image3.jpg">
<img id="galleryimages" src="images/image3.jpg">
</a>
<div class="caption"> CAPTION </div>
</div>
</div>
I want to use css, bootstrap to align the first line align left, and the second line will center on the text length of the first line.
I tried many ways but not.
code follow
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-md-2" style="padding:0">
<img src="/Content/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-10 tex-center" style="padding-right:0;">
<div style="padding:0">
<div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</div>
</a>
</div>
Please check this..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-xs-2" style="padding:0">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt="">
</div>
<div class="" style="float:left;">
<div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</a>
</div>
Try adding the class text-center to your divs.
Here is a working pen.
Something like this?
I don't know about your task, but I deleted some tags.
CSS
.img-responsive {
width: 100px;
float: left;
}
span {
display: block;
}
HTML
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt="">
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span>
<span class="text-center">THIS IS THE SECOND HEADLINE</span>
</div>
</a>
</div>
Reference Link
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
Instead of setting up one after another, by reducing the screen images stretch unnatural (and stay in 4 columns).
I paste a piece of code with only 2 pictures, because otherwise stackoverflow blocking publication of the post.
Thanks in advance
<div class="container">
<div class="row">
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image2.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
</div>
</div>
As per your comment, if you use
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" class="img-responsive" />
it will ignore the second image tag. Instead use:
<img src="images/portfolio/image3.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item img-responsive" />
Also, you've made the column col-xs-3 which means that it will be 4 columns from 0px. To make the image 100% width up until the first (small) breakpoint, use col-sm-3instead.
So:
...
<div class="col-sm-3">
<div class="viewport">
<a href="#">
<span class="dark-background" style="display: none;">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
<img src="images/portfolio/image1.jpg" alt="Northern Saw-Whet Owl" class="img-portfolio-item" />
</a>
</div>
</div>
...
Use class="img-responsive" on img tags. See doc for more info
I have three images on my site that are not equally spaced apart.
I would like to space these three items evenly across the page.
I have tried adding them into a container and applying different span classes to them but with no joy.
What is the best way to solve this without causing problems elsewhere? (e.g. on smaller devices).
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-5 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-8 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
The images are not equally spaced because you have provided inappropriate column classes for second and third div's.
Use col-4 for second(instead of col-5) and col-7 for third(instead of col-8) div.
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-4 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-7 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
You might aswell want to provide extra padding to each div for small resolutions.
Additionally, as haxxxton mentioned in comments, you should rather stick to standard bootstarp-3 classes for better usability.
Cheers!
You may like the reactive behaviour of a flex based solution like in this JSFiddle:
http://jsfiddle.net/6tknc03s/
.container {
display:flex;
justify-content:space-around;
flex-wrap:nowrap;
}
.container img {
width:100%;
}
I've tested this solution in Chrome, compatibility in FF and iOS requires vendor specific prefixes to be added to the CSS I've used.
Your best bet is to put them in col-*-4 (I chose sm, but whatever works best for you) and make sure to add class="img-responsive" to the img element, like so:
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
</div>
</div>
</div>
Example: http://www.bootply.com/4lmpKkgENa
Try this out. it works i have edited your code with adding style to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>
<body>
<div class="col-1 row-5 sizex-3 sizey-3">
<ul>
<li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a></li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a></li>
</ul>
</div>
</body>
</html>
Try this out:
<div class="row>
<div class-"container">
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
</div>
</div>