I’m guessing this is simple, but not for me.
http://page-test.co.uk/img.html
The red box needs to wrap around everything.
I need to do the image like this (if possible).
I can’t find anything on Google, or even know what I would search for.
I’m guessing this is simple, but not for me.
http://page-test.co.uk/img.html
The red box needs to wrap around everything.
I need to do the image like this (if possible).
I can’t find anything on Google, or even know what I would search for.
This should work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style type="text/css">
.box {
border: 1px solid #F00;
}
.box a div.google-image {
width: 273px;
height: 178px;
background: url(http://cdni.wired.co.uk/273x178/g_j/google_273x178.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<p>Line # 1</p>
<p>Line # 2</p>
<p>Line # 3</p>
<a href="http://www.google.com/" target="_blank"><div class="google-image">Go to Google</div></a>
</div>
</body>
</html>
Actually, the problem is that anchor tags are INLINE ELEMENTS and as such CANNOT have height /width by default.
simply add display:block; to .google-image {} and you will be fine.
That did it.
Thanks both for the input.