Web Design Q w/ Div's

[Regs]

I made a horizontal line image that I would like to cascade over a style divisional section of the content of my page.

For example: http://www.wikihow.com/Remove-Grease-or-Oil-Stains-from-Clothing


You see the header text entitled "Steps", and it is located on a sprite image that looks like it is protruding outward to the left of the main div that contains the content.

What is the best way of doing this?

 

[Cogman]

Looks like they are using a negative margin to get the effect that you see.

 

[Regs]

Looks like they are using a negative margin to get the effect that you see.

Oh! I imagine this is in the external css sheet. I will take a look. That would mean that image is part of its own div then?

 

[Cogman]

I don't know WHERE it is being applied, however, if you right click and then hit "inspect element" you can get all of the same information I just gave you (At least in chrome and firefox, IE might have this as well, but honestly, I don't use its tools that much).

The actual structure looks like this

<div id="bodycontents">
  <h2><span>steps</span></h2>
  <div>stuff</div>
  <div>stuff</div>
</div>

Where the bodycontents is the surrounding div for the entire article. H2 has a background style applied to it which includes the image itself.

 

[xanis]

You can achieve that overlap with some padding/negative margin sorcery, like so:

http://jsfiddle.net/raHNc/

h1 {
    padding: 10px;
    margin-left: -10px;
    ...
}

 

[xanis]

Alternatively, you could do the whole thing in pure CSS3 and use no images. 😉

http://jsfiddle.net/9PnBz/2/

h2 {
	position: relative;
	width: 50%;
	font-size: 1.5em;
	font-weight: bold;
	padding: 6px 20px 6px 70px;
	margin: 30px 10px 10px -70px;
	color: #555;
	background-color: #999;
	text-shadow: 0px 1px 2px #bbb;
	box-shadow: 0px 2px 4px #888;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        background: linear-gradient(to bottom, #f9f6f1 0%,#f0eadc 100%);
}

h2:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 0px;
	top: 100%;
	border-width: 5px 10px;
	border-style: solid;
	border-color: #C3BFB3 #C3BFB3 transparent transparent;
}

 

[Regs]

I thought the actual span or div would need the positioning CSS, not the h2 tag, no?