homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Corner Image

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

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)

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)

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)

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)

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)

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


 9:56 pm on Mar 27, 2011 (gmt 0)

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)

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".

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved