homepage Welcome to WebmasterWorld Guest from 54.167.144.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Corner Image
l008comm

10+ Year Member



 
Msg#: 4287855 posted 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?

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4287855 posted 6:08 pm on Mar 26, 2011 (gmt 0)

Hi there l008comm,

here is an example for you to try...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<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 {
background-color:#fcfcfc;
}
#image-container {
width:660px;
padding:20px;
border:3px double #666;
margin:auto;
text-align:justify;
font-family:sans-serif;
font-size:14px;
line-height:1.5;
background-color:#f0f0f0;
}
#image-container img {
float:right;
width:200px;
height:103px;
border:0;
border-bottom:5px solid #f6f6f6;
border-left:5px solid #cfcfcf;
margin:-20px -20px 0 20px;
}


</style>

</head>
<body>

<div id="image-container">
<a href="#"><img src="gfx/logo.png" alt=""></a>
<p>
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.
</p><p>
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.
</p>
</div>

</body>
</html>

birdbrain

l008comm

10+ Year Member



 
Msg#: 4287855 posted 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 :(

l008comm

10+ Year Member



 
Msg#: 4287855 posted 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.

swa66

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



 
Msg#: 4287855 posted 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.

l008comm

10+ Year Member



 
Msg#: 4287855 posted 4:00 pm on Mar 27, 2011 (gmt 0)

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

l008comm

10+ Year Member



 
Msg#: 4287855 posted 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.

swa66

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



 
Msg#: 4287855 posted 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