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>
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've been trying to make a Github image link and a Patreon image link show up side by side together. After some searching I found out about black magic called flex, but It's now super spaced apart and I don't want that. How would I fix this? (Code and Images below)
HTML:
<div class="promotion">
<div class="column">
<li><a href="https://github.com/noprojects/noprojects.net">
<img src="img/github.png" style="width:15%"></a></li>
</div>
<div class="column">
<li><a href="https://patreon.com/noprojects">
<img src="img/patreon.png" style="width:15%"></a></li>
</div>
CSS:
What's happening:
I'm not sure why your list item <li> tags aren't in a list tag <ul>.
<div class="promotion">
<div class="column">
<a href="https://github.com/noprojects/noprojects.net">
<img src="img/github.png" style="width:15%">
</a>
<a href="https://patreon.com/noprojects">
<img src="img/patreon.png" style="width:15%">
</a>
</div>
</div>
Then add the .promotion li css values to the .column class.
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
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I have image buttons that change appearance on hover by changing the content of the image in CSS. Not sure if that is part of the problem but for some reason when I click on my image link nothing happens.
Here's the code I am using:
<div class="hub-background">
<div class="hub-container">
<article class="btn-twitch">
<a href="twitch.tv/destifly">;
<img src=" ***** "> </a>
</article>
</div>
</div>
You need to put the article inside of the anchor tag
<div class="hub-background">
<div class="hub-container">
<a href="...">
<article class="btn-twitch">
<img src="...">
</article>
</a>
</div>
</div>