I'm trying to load the bootstrap media object inside a span3 div.
Everything works, apart from the image. I've checked this link elsewhere and it has no issues.
Any suggestions
<div class="container">
<div class="row">
<div class="span3">
<div class="pull-left">
<h3>Top Devices</h3>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="<?php echo base_url(); ?>resource/img/devices/Asus-Nexus-7.png"/>
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
</div>
</div>
</div>
</div>
If it's just a regular image you are loading into the span3, is there a reason why you are using data-src and not src ?
Or if you are also using something like foresight.js, for example, see if this post helps you
Good luck!
Check the source code out, probably it will gives you the answer.
I think you should add an slash:
data-src="/resource/img/devices/Asus-Nexus-7.png
instead of:
data-src="resource/img/devices/Asus-Nexus-7.png
Grretings
Related
When I click the link snimka1.html it does not work,may be to many div tags?
snimka1 is located on the server in the same /main/ directory as index.html.
I removed the tag <div class="panel-thumbnail"> and the link works, but the images are in a tab and they changed their places and are not correctly displayed
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail">
<a href="snimka1.html" target="_blank">
<img src="https://via.placeholder.com/150" class="img-responsive psp-center" alt="business">
</a>
</div>
<div class="panel-body">
<p ALIGN="center">Kлеопатра 2,4X 3,2 см </p>
<p></p>
</div>
</div>
</div>
</div>
</div>
Number of div tags doesn't matter.
Make sure your 'snimka1.html' file is in the same folder of your index.html.
If it is in another folder you should include that folder name also. like 'foldername/snimka1.html'.
Refer this link once - https://www.w3schools.com/html/html_filepaths.asp
The comment that f_puras posted:
Maybe some JavaScript binding kicks in for class panel-thumbnail which suppresses the link functionality.
was right. I removed class="panel-thumbnail" from the <div> tag and the link works!
I'm trying to displaying images dynamically but unfortunately I've been unsuccessful.
Here's my current html code:
<article class="panel panel-default">
<div class="panel-body">
{{ content.file }}
</div>
<img [src]="content.file" class="img-thumbnail" alt="Can't Display Image" width="304" height="236">
<footer class="panel-footer">
<div class="author">
{{ content.username }}
</div>
<div class="config" *ngIf="belongsToUser()">
<a (click)="onEdit()">Edit</a>
<a (click)="onDelete()">Delete</a>
</div>
</footer>
</article>
Here's what I get when I use [src]=content.file
However, I double checked that content.file has the correct relative path to the image as evident by my console.
When I hardcode the link using: <img src="../../../uploads/file-1491707047047.jpg" class="img-thumbnail" alt="Can't Display Image" width="304" height="236"> instead, I get the image to display (which I literally copied from the console content.file field).
Any idea what could be causing the problem? Thanks!
Maybe the view is not updated when you are setting the value to content.file. where you set content try changedetectionref
I am brand new to coding and have not been able to determine why two seemingly identical pieces of code do not work the same. This exercise involves simply making a picture appear on a web page. Easy enough, but I do not see why the same code only works one out of two times.
This code works:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg"
</div>
While this code does not:
<div class="col-sm-6">
<div class="well text-center">
<div>
img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg"
</div>
I checked the source for the non-working photo and it is valid. (Check it yourself if you like ultra-cute puppies).
What am I not seeing? (besides the puppy picture, obviously).
Thanks.
You are not using the img tag, you are just writing plain text.
Change to this (notice the brackets):
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg" />
First and 2nd code snippets look the same, no reason either of them should work.
try this
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="http://pre10.deviantart.net/1d23/th/pre/i/2013/070/1/e/grumpy_cat_by_bwcopy-d5xod2v.jpg">
</div>
or this:
<div class="col-sm-6">
<div class="well text-center">
<div>
<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
</div>
Hello so I have a simple html code and this is the output:
While the code is
<img class="img-responsive" style="float:left;width:400px;height:700px;" src="../assets/images/san_jacinto.jpg">
<h3>Founding of the town</h3>
<p>Some text here/p>
Now I've managed to do it using bootstrap 2.3.1 media and now I got another problem:
What I need to fix now is the text should continue below the image. Is that possible in bootstrap also? Or if not, what else can I do?
you can use bootstrap Media object :
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
The solution is pleasingly easy, try placing your P and h3 tags inside a parent dive,assign a css class to it, and add paddings to that css class. check it out here:
padding
You can add some right-margin to image or
Left-padding to paragraph or
text-indent to paragraph.
Why don't you put the image inside a col-md-4 and the text inside col-md-8?
<div class="container">
<div class="col-md-4">
<img class="img-responsive" src="../assets/images/san_jacinto.jpg">
</div>
<div class="col-md-8">
<h3>Founding of the town</h3>
<p>Some text here/p>
</div>
</div>
So I'm trying to mimic some of the look of this website:
http://quay.com.au/
Since I'm intrigued by the design. I'm wondering how to go about overlapping containers in rows using Bootstrap, since I've looked into the code and it seems like that's what they're using.
This is what I have for HTML so far:
<div class="row">
<div class="col-md-5 col-md-offset-2"><div class="about img-rounded">
<h3>About</h3>
<p><b>Info1</b></p>
<p>Info2 </p>
</div></div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-1"></div>
<div class="col-md-3 col-md-offset-2"><div class="projects img-rounded">
<h3>Projects</h3>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
<img class="img-responsive" src="img">
<p>Description</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3"><div class="work img-rounded">
<h3>Work</h3>
</div></div>
</div>
</div>
Any suggestions? Something to do with z-index in css is my only guess...
Looking at the code on the site the container has a position: relative and to get the sections overlapping the sections are offset from the top, like The Query Experience
.page-index .pattern-gray {
top: -240px;
}
quick bootply http://www.bootply.com/Blms3j1GjO
What you're looking for is called Parallax Scrolling. There are several tutorials out there, and a full implementation would be difficult to include in one answer here.
Here's a good resource from David Walsh on this
Basically, this is a combination of background-attachment: fixed and overlapping div elements, and some javascript to flop the selected image when it's hidden.
I hope that helps.