Issue
I'd like to have a div that looks like this:
Is this possible to do with HTML + CSS? I will also be animating this div with jQuery. When the div is hidden I would like the title and the top line to show.
Solution
You can do something like this, where you set a negative margin
on the h1
(or whatever header you are using)
div{
height:100px;
width:100px;
border:2px solid black;
}
h1{
width:30px;
margin-top:-10px;
margin-left:5px;
background:white;
}
Note: you need to set a background
as well as a width
on the h1
Example: http://jsfiddle.net/ZgEMM/
EDIT
To make it work with hiding the div
, you could use some jQuery like this
$('a').click(function(){
var a = $('h1').detach();
$('div').hide();
$(a).prependTo('body');
});
(You will need to modify...)
Example #2: http://jsfiddle.net/ZgEMM/4/
Answered By - Jason Gennaro
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.