PDA

View Full Version : HTML / CSS Help

Alan @ CIT
05-26-2006, 05:31 PM
Hi all,

I've currently got a <div> with a dashed border which holds my content. Inside the content, there are 2 links - Edit and Delete - currently, they sit within the <div> like:

http://i77.photobucket.com/albums/j49/citalan/dotted_border_old.jpg

However, I'd like them to appear on the border, like:

http://i77.photobucket.com/albums/j49/citalan/dotted_border_new.jpg

Any ideas?

The current html (abbreviated) is:

<div style="border:dashed 1px #666666; margin-bottom:10px">
...content...
<div style="float:right; padding:4px; font-size:9px">
[Edit] - [Delete]
</div>
...more content...
</div>

Thanks,
Alan.
Zachery
05-26-2006, 05:32 PM
I gave you a suggestion in irc. I also think you might be able to fudge where it is with some relitive positioing possibly.
Alan @ CIT
05-26-2006, 05:41 PM
I know, I posted this at the same time I asked you :)

I'm getting their with a fieldset at the moment, just doing some testing
Princeton
05-27-2006, 12:35 PM
try...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.box {
border:dashed 1px #666666;
margin:10px;
padding:5px
}
.editdelete {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color:red;
background-color:#ffffff;
margin:-2px 25px;
padding:5px;
float:right;
}
.editdelete a:link, .editdelete a:active, .editdelete a:hover {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color:red;
}
.editdelete a:hover {
color:blue;
}
-->
</style>
</head>

<body>

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quis sapien a nulla interdum placerat.</div>
<div class="editdelete">[<a href="#">Edit</a>] - [<a href="#">Delete</a>]</div>
<div class="box">
<div><a href="#">Test thread bookmark 1</a></div>
<div>Last post by Alan @ CIT at 05-17-2006</div>
<div>...more content...</div>
</div>

</body>
</html>
Alan @ CIT
05-27-2006, 01:06 PM
Niceone, cheers mate :)

Thanks,
Alan.
Zachery
05-27-2006, 07:34 PM
Can you show us whatcha ended up with Alan?
Alan @ CIT
05-28-2006, 07:14 AM
I actually changed the design completely in the end :)

It now looks like:

http://i77.photobucket.com/albums/j49/citalan/bookmark_design_new_1.jpg

Thanks,
Alan.