I am trying to set anchor to jump on other page with specified heading but my anchor tab is not working.
I have two files index.html and anti foam.html to link with each other but my anchor is unable to jump the Pulp and Paper Industry on other page.
index.html
<div class="col-md-4 col-sm-12 col-xs-12 gallery-item-wrapper nature outside">
<div class="gallery-item">
<div class="gallery-thumb">
<img src="img/works/im2.png" class="img-responsive" alt="2nd gallery Thumb">
<div class="image-overlay"></div>
<i class="fa fa-eye"></i>
</div>
<div class="gallery-details">
<div class="editContent">
<h5>Pulp and Paper Industry.</h5>
</div>
</div>
</div>
</div>
antifoam.html is the file to be linked.
<section id="projects">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<div class="card" style="width:100%">
<img class="card-img-top cimage" src="img/antifoam/PPI.jpg" alt="Card image cap">
<div class="card-body">
<h3>Pulp and Paper Industry.</h3>
<p class="cp">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</section>
Please tell me where am I doing mistake to accomplish this task.
You have to anchor at the ID. So you could have the index page link be:
<h5>Pulp and Paper Industry.</h5>
and the anchor be:
<h3 id="pulp" >Pulp and Paper Industry.</h3>
You should create a “landing” <a> tag with id (e.g. pulp-and-paper-industry) in your target page (antifoam.html):
<h3>
<a id="pulp-and-paper-industry">Pulp and Paper Industry.</a>
</h3>
Then you can link it in your source page through href:
<h5>
Pulp and Paper Industry.
</h5>
Or do it like this:
<a id="just an example"></a>
I hope you can do something with this. Maybe dont use the %20 and make it a one word instead. Just trail and error
Beldr
Related
I have tried to copy my section in the webpage as it is but when I copied my HTML5 code one below the previous it gave me an error, Such that the image in the first is at left and the text to right and I want it reverse for second section.
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
This is the image i want to display consecutively below it
This is the output I am getting
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 need to insert a link (opening on the same page) to another page on that selected "block". What is the best way to do it?
Check image here
<div class="row">
<div class="span3">
<div class="align"><em class="icon-cubes sev_icon"></em></div>
<h2>General Cargo </h2>
</div>
You need to wrap the <div> in an <a> (anchor) tag with a href pointing to the page you want to visit.
<a href="/your-page-link">
<div class="span3">
<div class="align"><em class="icon-cubes sev-icons"></em></div>
<h2>General Cargo </h2>
</div>
</a>
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>
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