I am trying to make my vector image clickable. I have searched the internet and can not find the answer. What else do I need in the code?
<div id="logo">
<a href="http://fpmnky.com" target="_self">
<span>
<object width="488" height="115" data="http://fpmnky.com/images/fpmlogo2.svg" type="image/svg+xml">
<img width="488" height="115" src="http://fpmnky.com/images/fpmlogo2.svg" alt="Star"/>
<span>Your browser doesn't support SVG images</span>
</object>
</span>
</a>
<div id="logo">
<a href="http://fpmnky.com" target="_self">
<img src="http://fpmnky.com/images/fpmlogo2.svg" width="488" height="115" alt="fpmlogo" />
</a>
Related
I have a footer with some list items and then some social media icons. I want to move the social media items to the right of the footer. How would I achieve this? I have been playing around with flex but nothing is working yet.
<div className="mx-20 mb-20">
<Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
<div className="mt-8 w-full flex">
<div>
<ul className="flex">
<span className="ml-8 mr-20">
<li>©2022 {name}</li>
</span>
<span className="flex space-x-20">
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</span>
</ul>
</div>
<div className="icons flex">
<img src={InstagramIcon} alt="Instagram icon" />
<img src={FacebookIcon} alt="Facebook icon" />
<img src={TwitterIcon} alt="Twitter icon" />
<img src={Linkedin} alt="Linkedin icon" />
</div>
</div>
</div>
So I want the icons to be the same distance from the right as the first list item is from the left.
You can do this in multiple ways:
add justify-between
add ml-auto to the item you want to move.
In both cases, your flex container has to be 100% wide w-full.
You can add justify-between or justify-evenly on the outer most div that wraps both the list and the icons.
Below is the code
<div className="mx-20 mb-20">
<Divider style={{ background: '#5E5E5E96' }} orientation="horizontal" />
<div className="mt-8 w-full flex items-center justify-between">
<div>
<ul className="flex">
<span className="ml-8 mr-20">
<li>©2022 {name}</li>
</span>
<span className="flex space-x-20">
<li>Cookie Policy</li>
<li>Refund Policy</li>
<li>Privacy Policy</li>
<li>Terms & Conditions</li>
</span>
</ul>
</div>
<div className="icons flex">
<img src={InstagramIcon} alt="Instagram icon" />
<img src={FacebookIcon} alt="Facebook icon" />
<img src={TwitterIcon} alt="Twitter icon" />
<img src={Linkedin} alt="Linkedin icon" />
</div>
</div>
</div>
items-center is align them vertically
Is there any way of putting input type='file' on svg Icon that I already have in my code example below Download.
I'm using Tailwind CSS.
<td click.delegate="getTenantAgentLicence(agent.agentId)" class="p-6 pb-10 text-left block md:table-cell">
<!-- <input type="file"/> -->
<span class="inline-block md:hidden font-bold">Download</span>
<a class="ml-2 cursor-pointer">
<img class="h-6 w-6" src="/images/download1.svg">
</a>
</td>
Put the <input> and the <img> inside a <label>. Clicking the image will be the same as clicking the input element. Then hide the <input>.
.hidden {
display: none;
}
<label>
<input type="file" class="hidden" name="file1">
<img class="h-6 w-6" alt="Image here" src="/images/download1.svg">
</label>
In Kentico, I am trying to put an image and an h3 tag inside an a tag in an Editable Text web part, but Kentico rewrites the code and splits the a tags, making 2 a tags, one around the image and one around the h3. How would I get this to stop?
Here is what I am trying to write:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
<h3>Student Resources</h3>
</a>
</div>
And here is what Kentico rewrites it as:
<div class="brick">
<a href="/virtualvalley/studentresources.aspx">
<img alt="" class="img-responsive" src="/Virtual-Valley/document-library-(1)/images/default.jpg" />
</a>
<h3>
Student Resources
</h3>
</div>
I need to place a transparent bootstrap 4 navbar over a full screen image utilising flexbox. I need to be able to expand a carousel container (swiper.js) to fill the view port.
I have managed to expand the carousel container to fill the view port but the navbar does not appear transparently over it. To view what it currently does [click here][1]. To view what I would like to achieve [click here][2]
<nav class="navbar navbar-expand-md navbar-light bg-transparent">
<div class="navbar-brand pr-5">
<a class="d-inline-block" routerLink="/home">
<img src="assets/logo-dark.png" alt="" height="43">
</a>
</div>
<div class="navbar-collapse collapse navbars" id="navbar-navigation">
<div class="navbar-nav">
<a class="nav-item nav-link text-uppercase" href="#>Home</a>
<a class="nav-item nav-link text-uppercase" href="#>Service</a>
<a class="nav-item nav-link text-uppercase" href="#>Product</a>
</div>
</nav>
</div>
<div class="d-flex flex-fill">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 1</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 2</div>
<div class="swiper-slide bg-cover" style="background-image:url('http://placehold.it/1920x1080');">
Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<main class="page-content content-boxed">
Page content goes here ...
</main>
[1]: https://i.stack.imgur.com/1eB42.png
[2]: https://i.stack.imgur.com/2fr9H.png
To make your image overlap to the navbar, you just have to give position:absolute property to the navbar.
.navbar{
position:absolute;
}
I want to make my theme show the photoset like it does with normal photos, but one under another.
I'm using this theme right now http://theme-neptune.tumblr.com/
And this is the code for the Photoset block
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{Photoset-250}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}
Im totally new to all this, I need help.
Photoset Photos
You can loop through the photos in a photoset using {block:Photos}:
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-250}">
{/block:Photos}
{/block:Photoset}
This will output each photo as an img element. Below is the markup for the OP's question:
{block:Photoset}
{block:IndexPage}
<div class="photoset">
<div class="box">
<div class="hover">
PHOTOSET
See full set
</div>
</div>
{block:Photos}
<img src="{PhotoURL-250}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
</div>
{/block:IndexPage}
{block:PermalinkPage}
{block:Photos}
<img src="{PhotoURL-500}"{block:Caption} alt="{PlaintextCaption}"{/block:Caption}>
{/block:Photos}
{/block:PermalinkPage}
{block:IndexPage}
{block:ifshowcaption}
{block:Caption}
<div class="caption photo_caption">{Caption}</div>{/block:Caption}
{/block:ifshowcaption}
{/block:IndexPage}
{/block:Photoset}