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>
Related
I need to link this image in my website to another url but I cannot figure it out. I tried to use an <a> tag but when it deployed, I would click on the link and it still wouldn't redirect me. I'll attach the code below:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="">
</div>
</div>
</div>
putting the img inside an anchor tag<a> <img> </a>
img {
width: 150px
}
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://stackoverflow.com/">
<img src="https://images.unsplash.com/photo-1663668244836-68998f4e9151?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
</div>
To add a link to your img tag surround it with your anchor tags.
See this snippet:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://google.com">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="image">
</a>
</div>
</div>
</div>
I've added alt text so you can see the URL functioning as intended.
W3schools tag
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.
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 have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
Putting block elements inside an anchor is now "possible" or allowed in HTML5, but it does not work for some reason.
Here's the code:
<a href="#"><div>
<figure>
<img src="prodimg/senseo-m.jpg"/>
</figure>
<div class="proddetail">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
<span class="meerinfo">Meer info</span>
</div>
</div></a>
When I inspect the code in firefox or chrome, I get this result:
<div><a href="#">
<figure>
<img src="prodimg/senseo-m.jpg">
</figure>
</a><div class="proddetail"><a href="#">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
</a><span class="meerinfo">Meer info</span>
</div>
</div>
That's almost good, but certain spots still aren't clickable. Any idea when can be done here?
Problem found!
Wrapping a block element in an anchor IS possible, but you can't put another anchor in there, too. Then it breaks.
So the parent anchor can't contain a child anchor.