2 CSS techniques I am wanting to learn

[Ninjakreborn]

There are 2 thing's I am wanting to learn how to do.
These 2 thing's are both able to be done with CSS but I don't know what to search for, or how to learn how to do these 2 things.  My CSS knowledge has tripled because I read a few book's, things are coming a lot more naturally, layout's that took me day's now take me hour's I am getting a lot better.  Mostly because I have had to code a lot of layout's in the past few days.
Techniques I am wondering about.
1. There are banner's like php freaks.  You see the logo inside the banner, there are sometime's odd image's inside the banner, where part of the image stick's out at the top and bottom of the div.
For instance there's a div, and the div has a background color, it's a certain height and width.  Then on the left hand side there is a logo, then on the right hand side for instance there might be a star.  but the point's at the top, and bottom, and a little on the right point out, so the star look's stamped onto the banner, but a little out of it, how do you perform this technique.
2. How do you make something a certain height/width without any content.
If you have a div, you want to be atleast a specific size, no matter what, it will still getting wider for content, but it is atleast a specific height at all times.
min-height, minwidth won't work because it has to be cross browser compatible

Any advice on how to do these 2 techniques would be appreciated.

[obsidian]

1. There are a couple techniques to this. If you have your "stamped" image with a clean cut transparency, you can often use an absolute positioning to get it in place. Otherwise, you need to actually cut up your image and have the part that "floats" to the top and bottom in separate containing divs lined up to get the effect you want. Keep in mind that with CSS, it is often about [i]perception[/i]: What you can make it [b]look[/b] like you're doing rather than what you are actually doing.

2. If you want it to keep a static height no matter what, simply place a height attribute on your CSS. If you feel so led, you can even put an overflow: hidden on it as well to assure that you won't have any stretching. However, if you are wanting to get the min-height effect to work in IE6 like it does in FF and IE7, just try something [url=http://www.dustindiaz.com/min-height-fast-hack]like this[/url]

[Ninjakreborn]

Ok the min height thing will work, thanks.
Can you explain
[quote]1. There are a couple techniques to this. If you have your "stamped" image with a clean cut transparency, you can often use an absolute positioning to get it in place. Otherwise, you need to actually cut up your image and have the part that "floats" to the top and bottom in separate containing divs lined up to get the effect you want. Keep in mind that with CSS, it is often about perception: What you can make it look like you're doing rather than what you are actually doing.[/quote]
A little better, just trying to understand what you meant about part of that.

[Ninjakreborn]

Just wondering, about this min-height hack
If I use this, if the content goes down more than that height, will it expand the height of the div to match the content, as needed.

[cmgmyr]

yes, it should expand with the content

[obsidian]

[quote author=businessman332211 link=topic=113364.msg460604#msg460604 date=1162311521]
Can you explain
[quote]1. There are a couple techniques to this. If you have your "stamped" image with a clean cut transparency, you can often use an absolute positioning to get it in place. Otherwise, you need to actually cut up your image and have the part that "floats" to the top and bottom in separate containing divs lined up to get the effect you want. Keep in mind that with CSS, it is often about perception: What you can make it look like you're doing rather than what you are actually doing.[/quote]
A little better, just trying to understand what you meant about part of that.
[/quote]

Well, basically, let's say you have a div with id of "header" and you want to place star.gif over the top of the header to overlap the top and bottom a little. Well, say your #header has a height of 150px and your star.gif is 200px tall. Well, you can start by giving your #header a margin-top: 25px to give the start.gif a little room to work with. In your markup, you'd want to put your star.gif AFTER your #header was closed and then put an absolute position on it with something like top: 0; left: 0;. The margin-top on the #header will cause the star.gif to start 25px above where the #header starts. With that in mind, since it's 50px taller than the #header div, it will overlap the bottom by 25px, too. One thing to remember is that browsers place precedence on object in the order they are presented in the markup. so, you want to make sure your image is AFTER your #header in the markup to avoid z-index problems in some browsers. Your final code might look something like this:
HTML
[code]
<div id="wrapper">
  <div id="header"><h1>My Header</h1></div>
  <img src="star.gif" id="myStar" alt="myStar" />
</div>
[/code]

CSS:
[code]
#wrapper {
  position: relative;
}

#header {
  margin: 25px 0;
  border: 1px solid #000000;
  background-color: #f4f4f4;
}

#header h1 {
  text-align: right;
}

#myStar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
[/code]

Hope that makes more sense.

[b]**EDIT**[/b]
Also, please keep in mind that this is simply [i]one option[/i]. There are other ways to do this as well that may fit individual needs better. You need to research options and come up with solutions that best fit your own situation.

[Ninjakreborn]

Ok, well I had another problem getting 2 div's the same height. When I foudn out the name was equal height div's I found ton's of informaiton on it.  For this what would I search for to find info on this specific technique.
Thanks for all the help.