I have a peculiar question. I have made a div (code for which will be provided below), and I want the entire div (since it is a button) to be a clickable link. The issue I'm having is my div should only be 200x200, yet the think stretches across the entire page horizontally. It should only be a link in that 200x200 portion, but like I said it goes that 200 height across the entire horizontal part of the page making random background images clickable. I've tried setting the divs to block, with no avail. How would I solve this? My code is as follows.
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
<div id="button"></div>
Use display: inline-block;. You could also do this without the <div> at all.
http://jsfiddle.net/SLAfU/
You should do it following way:
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Since anchors cannot contain block elements in HTML 4.01. Therefore you can just make anchor a block element and all will work.
In HTML5 anchors can contain block elements, therefore setting display: block; or display: inline-block; combined with <!DOCTYPE html> should suffice.
Make the anchor tag "display: inline-block"
You need to have an HTML5 doctype to have a div (block level element) inide an anchor tag.
the right way in this case is:
<div id="button"></div>
or
<div id="button" onclick="document.location.href='signup.php'" style="text-decoration:underline"></div>
read w3c specifications! you cant put block element inside inline!!!
Related
I'm trying to make a responsive design were images scales according to the viewport, depending on whichever width or height of the viewport restricts the image, it never exceeds the viewport.
This was quite easy to achieve, but now I have the issue that the left-aligned title over the images doesn't of course follow the center'd image, but instead sticks by the page margin. I tried experimenting with all sorts of different calculated padding and other junk, but so far I can't figure it out.
What I'd ideally would like to do is to scale a box according to the viewport and center-align that box, and then have a full width image inside the box, and the left aligned title above it.
Here's what I've got so far, excuse the crude CSS.
Code:
/* Create 1 column that floats */
.column {
float: center;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Add a card effect for articles */
.card {
background-color: var(--bg-color);
padding: 1vw;
margin-top: 1vw;
cursor: pointer;
width: 100%;
border-style: none;
}
.card h3 {
color: var(--text-color);
font-family: 'Lato', sans-serif;
font-size: 3vw;
text-align: left;
margin-left: 1.5vw;
margin-bottom: 0vw;
margin-top: 0vw;
}
.card img {
display: block;
width: auto;
height: auto;
max-width: 95vw;
max-height: 75vh;
margin-left: auto;
margin-right: auto;
padding: 1vw;
}
<div class="content">
<a href="page.html"><button type="button" class="card">
<h3>Image Title</h3>
<img src="https://via.placeholder.com/1920x1080.jpg"
alt="Image Title">
</button></a>
</div>
Supposing you can change your HTML structure and you're open to use a more semantic HTML structure you should go with the following.
.card {
display: flex;
justify-content: center;
}
<div class="card" onclick="myFunction()">
<figure>
<figcaption>Caption</figcaption>
<img src="https://dummyimage.com/100/eee">
</figure>
</div>
I've also added the onclick="myFunction()" attribute so you can mimic a button behavour aswell.
You could also use <a> tag instead of the <div> tag, just set it to display:block.
Now a little weird hack
I do not recommend this approach as it is not semantic (you will have to style it on your own).
.figure {
display: flex;
flex-flow: column nowrap;
margin: auto;
}
h3 {
text-align: left;
margin: 0;
}
<button class="figure">
<h3>Caption</h3>
<img src="https://dummyimage.com/100/eee">
</button>
You can use this if you absolutely need to have a <button> tag and you can't change your HTML structure. If none of those apply, the only advantage of this method is that you don't need another wrapper.
Notice that if you change <button> to <div> in the above example it will not work as it relies on the fact that <button> is a replaced element, and so its size is defined by content width, just like inline elements, but its margin are calculated like block elements, so you can use margin:auto.
CSS Spec on 10.3.4:
The used value of 'width' is determined as for inline replaced elements. Then the rules for non-replaced block-level elements are applied to determine the margins.
Anyway, I was just sharing what I've found while looking for how to solve this without changing HTML structure. Please go with the first solution.
You could wrap the h3 and the img in a div and center that. By the way, float:center doesn't exist.
Visually, the div element displays as intended. However, the actual div (wrapped in an a link) spans across the whole page. Here's an illustration of what I mean:
The button is an image file, if that helps.
HTML:
<a href="../SpeedUp.zip">
<div class=download>
<img class=download src="../img/download.png"></img>
</div>
</a>
CSS:
div.download {
height: 100px;
width: 200px;
cursor: pointer;
background: linear-gradient(#8ab081, #77ab59);
border-radius: 10px;
margin-top: 10px;
margin-left: 10px;
padding: 15px;
}
div.download:hover {
background: linear-gradient(#8db87c, #88aa8a);
}
img.download {
height: 100px;
width: 200px;
}
Thanks, SO!
Divs are block elements, which means that they can't occupy the same line with any other elements.
While you changed the width of the element to be only 200px, your browser will automatically place margin directly to the right of the div to fill the rest of the space of that line.
If you want to allow divs to wrap with other elements, you can set the display to inline-block:
div.download
{
display: inline-block;
}
I am trying to get an Input and a Link element to sit side by side inside a Div element.
I wanted to have the Div and the Link to completely fill the Div element so you cannot see the containing Div around the edges of the Input and Link elements.
However if I set the width of my Link element any wider than 27px is falls to the next line even though I should have up to 31px left of the container Div to fit the Link element in. Relevent HTML and CSS below...
HTML
<section>
<img src="images/logo11w.png">
<div name="search">
<input>
</div>
</section>
CSS
div[name="search"]{
display: block;
margin: auto;
height: 27px;
width: 572px;
background-color: green;}
input{
display: inline-block;
width: 541px;
height: 27px;
border-style: none;
background-color: yellow;
padding: 0;
margin: 0;}
div[name="search"]>a{
display: inline-block;
width: 27px;
height: 27px;
background-color: red;
margin: 0;}
Could someone explain why my link element cannot be wider that 27px without falling to the next line? I am OK with having the width be only 27px I just wanted to understand why this is happening from a technical standpoint.
inline-block displays the whitespace in the actual layout in the rendered html... one whitespace is 4px . so if you want your link to have 31px width, you need to give margin-left:-4px or remove the whitespace in the actual layout.
<section>
<img src="images/logo11w.png">
<div name="search">
<input>
</div>
</section>
updated fiddle with no white space:
http://jsfiddle.net/x6Mq5/
updated fiddle with margin-left:-4px;
http://jsfiddle.net/x6Mq5/1/
In this question positioning text of anchor within a div and given the same code which I repeat here:
HTML Markup
<div id="header">
Cattle Farms
</div>
CSS Style
#header a {
width: 100%;
height: 100%;
display: block;
font-size: 25px;
}
Answer
div#header a {
width: 100%;
height: 100%;
display: block;
text-indent: 20px;
line-height: 350px;
}
Fiddle
My question is why does not the line-height make the a break out of the div
It does break out of the div. If you put a span inside the a tag and give it a display of inline-block (and a background-color so you can see it) you'll realize it does. Remember the span inherits the line-height. Take a look:
http://jsfiddle.net/fnX9n/6/
Give the a a bigger line-height and without anything else you'll also be able to realize it is breaking out of the div: http://jsfiddle.net/fnX9n/7/
Having a problem with IE7, here is explanation.
HTML
<a class="item" href="http://google.com">
<div class="itemImg">
<img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
</div>
<h3>Hello World</h3>
</a>
CSS
.item {
color: #140804;
cursor: pointer;
padding: 17px;
position: relative;
text-align: center;
text-decoration: none;
width: 142px;
display:block;}
.item * {
cursor: pointer;}
.itemImg {
background: none repeat scroll 0 0 red;
height: 150px;
line-height: 150px;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
vertical-align: middle;}
.itemImg img {
vertical-align: middle;}
Result
http://jsfiddle.net/qjSpS/11/
Problem
In IE7 image is unclickable
My thoughts on problem
It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable
Question
Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.
It may be that in IE you can not wrap an inline element <a> around block level elements <div> or <h3>.
Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.
THis is how i solved this problem..instead of:
<a><div><img></div></a>
i did this:
<div><div style=background:url(img.jpg);width:10px;height:10px;></div></div>
worked like a charm.
Have you noticed that with the image the red border around the edge is clickable?
I think the div is the cause of the problem.
can you do away with the div?
I tweaked your example to show how it might work without the div:
http://jsfiddle.net/qjSpS/10/
EDIT
had another go: http://jsfiddle.net/qjSpS/14/
Not completely happy but it has made all the elements clickable.
if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
$('.itemImg').click(function () {
$(window.location).attr('href', $(this).parent('a').attr('href'));
});
}