This question already has answers here:
Make a div into a link
(30 answers)
Closed 8 years ago.
How do I make my entire pad div area a hyperlink?
http://jsfiddle.net/obxh7qpn/
Here's my HTML:
<div class="pad">
<div href="http://www.google.com" style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
<div>
<span>View all</span>
</div>
</div>
</div>
<a href='http://www.google.com'>
<div class="pad">
<div style="height:286px;width:286px;background:url('http://placehold.it/1x1') top center no-repeat;background-size:cover">
<div>
<span>View all</span>
</div>
</div>
</div>
</a>
wrap a tag around the whole thing!
Use "onclick=" event instead of href
<div onclick="document.location='http://www.google.com'> ...
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed last year.
I am trying to align a span vertically centered. But its not working.
Here is my code:
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
<!-- </div>-->
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: inline-block;">
<!-- <div class="text-center" style="float:center;">-->
<span style="font-size:40px;vertical-align:middle;padding-top:70% !important;padding-left:16%;"><b>Purchase Order</b></span>
<!-- </div>-->
</div>
</div>
Actually, i am converting above code to pdf instead html rendering using wkhtmltopdf.
Use display:flex;, align-items:center; on parent div and display:inline-block; on span element to make it an actual block element.
<div style="height:150px; width:100%;">
<div style="height:150px;width:150px;;background-color:blue;display: inline-block;">
<img style="width:100%;float:left;height:100%;" t-att-src="'data:image/png;base64,%s' % to_text(o.company_id.header_image)" />
</div>
<div style="height:150px;width:400px;float:right;background-color:red;display: flex;align-items:center;">
<span style="display:inline-block;font-size:40px;vertical-align:middle;padding-left:16%;"><b>Purchase Order</b></span>
</div>
</div>
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.
This question already has answers here:
CSS: align two element, to the left and right in the same line WHITHOUT floats
(3 answers)
Closed 1 year ago.
I'm trying to achieve the following:
But maintaining a specific div structure/hierarchy/order:
<div>
<div>
<h3>TITLE</h3>
<p>LEGEND</p>
</div>
<div>
<i>BUTTON</i>
</div>
</div>
Tried with position relative float right and display inline, but to no success.
Here are the attempts:
https://jsfiddle.net/xzmf8753/
<div style="background-color: red; position: relative">
<div style="position: relative; display: inline;">
<h3>TITLE</h3>
<p style="display: inline;">LEGEND</p>
</div>
<div style="position: absolute;top: 0;right: 0;">
<i>BUTTON</i>
</div>
</div>
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 3 years ago.
I have 3 images on my home page,I need text in top of each images,so how to add text over image
<div class="container">
<h2 class="section-title">
My clasess
</h2>
<div class="owl-carousel visit-carousel">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
have the text inside of a div, and use the div as your image using css. background-image option, and inside the div insert your text.
Html
<div class="image-box">
<h2>Text Inside</h2>
</div>
css
.image-box {
background-color: #ccc;
height: 200px;
width: 200px;
}
This question already has answers here:
placing a <p> beside a centered <h1>
(3 answers)
Closed 5 years ago.
I am using bootstrap 4 to come up with a div that would contain an <h1> aligned to the center while a <p> tag aligned to the right. Here is exactly what I am trying to achieve:
http://imgur.com/a/8u5MD
I would prefer a method using the bootstrap 4 classes or flexbox rather than using any floats. Here is the code I have written so far:
<div class="row">
<div class="col-sm-12 p-20">
<h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
</div>
</div>
h1 {
text-align: center;
}
p {
text-align: right;
}
<div class="row">
<div class="col-sm-12 p-20">
<h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1>
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p>
</div>
</div>
Just dividing the main div into 2 sub divs
<div class="row">
<div class="col-sm-12 p-20">
<div style="width: 80%; float:left">
<center><h1 class="heading-font px36-font d-inline-block">.Hay<span class="skyblue">ford</span></h1></center>
</div>
<div style="width: 20%; float:right">
<p class="d-inline-block special-font b-900"><i class="fa fa-phone"></i> +92-336-54-14-994</p></div>
</div>
</div>
For the h1 you can add a class called "text-center".
For the parent div "p-20" make it relative.
Now,
Position the p tag as absolute and control it using right: 5px;, top: 5px;.
Hope this works, do vote if it was help full.
Thank you..!!