Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Corner Image

4:17 pm on Mar 26, 2011 (gmt 0)

10+ Year Member

I'm trying to make a corner image. But not a standard one...
It's easy putting an object in the top right corner (or any other corner) of the WHOLE browser content area. I'm looking for a way to stick in object to the top right corner of a specific div. This div does have it's own padding that I want to disregard when positioning this image. (can't use a background image, this is going to be a clickable object)

Any suggestions?
6:08 pm on Mar 26, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi there l008comm,

here is an example for you to try...

<html lang="en">
<base href="http://www.webmasterworld.com/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>right hand corner image</title>

<style type="text/css">
body {
#image-container {
border:3px double #666;
#image-container img {
border-bottom:5px solid #f6f6f6;
border-left:5px solid #cfcfcf;
margin:-20px -20px 0 20px;



<div id="image-container">
<a href="#"><img src="gfx/logo.png" alt=""></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac
pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh
orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare
sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam.
Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna.
Pellentesque in dui. In eget elit. Praesent eu lorem.
Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae,
orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum
augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet
interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque
lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis,
lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi.
Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum
volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla.
Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque
metus urna, semper eget, aliquam ac, feugiat nec, massa.


5:36 am on Mar 27, 2011 (gmt 0)

10+ Year Member

Yep that worked. All I actually needed to do was take your negative margins and add them to my existing code. Works just like I wanted it too! Thanks. Now I just need to come up with a good looking image for said corner :(
6:22 am on Mar 27, 2011 (gmt 0)

10+ Year Member

But now I do have a follow-up question. My corner image is a triangle. Which means half of the image is transparent, because of course all images are rectangles. So is there a way I can make my image (actually it's an <A> with a background image) NOT cause text to wrap around it. I want the text to draw right across the top of the image. Because it will actually only write over the transparent image anyway.
8:53 am on Mar 27, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

give the parent (the div) a position:relative and the image (or anchor) a position:absolute.
The outer element then acts as reference to where you want to position the inner element.
Then set where the inner element ends up using top, left or bottom and right.
You can even do interesting things using both margins and top/bottom/left/right settings.
4:00 pm on Mar 27, 2011 (gmt 0)

10+ Year Member

Is that to do the positioning, or for the text wrap?
9:56 pm on Mar 27, 2011 (gmt 0)

10+ Year Member

So I solved my little text warp problem with the same solution is the other problem: negative margin. I gave my box a -30 bottom margin, and now the text ignores the image, which is exactly how I wanted it.
11:23 pm on Mar 27, 2011 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

A float pushes the inline content in the parent to a side.

An element with position absolute is not in the flow of the text and will not influence it.

So the answer to:
Is that to do the positioning, or for the text wrap?

is "both".

Featured Threads

Hot Threads This Week

Hot Threads This Month