Hey guys, I have some cropped out images that I would like to use as frames, what's the fastest easiest way to get them positioned, in my site ?

Hiya Matt,

To keep it very simple just create a new image in your image editor, the size of the frame and put them both in there and merge them to create one image. That's the easiest and least CSS messy way to do it

Hi Jo Ann, I used this code posted below, however when I enter the <div id> it messes up the top of my menu .. am I doing something wrong?

First I would shy away from using ID's unless you absolutely need to. Although they are still used widely for main id's, using classes is a much "safer" bet as you won't ever accidentally use the same ID as say a jQuery or Javascript ID will and cause confusion. The new CSS3 practices say not to use them that much.

You have a link to the page? Also keep in mind that exact positioning can cause issues with responsiveness so you many need to alter that accordingly for smaller screens etc.

Hi Jo Ann, yeah I actually scrapped that idea because i'm going to see if there is a way to attach the frame to a float image.. I used a couple of codes that worked, but it didn't follow my FB+Linked In floater images.. check it out at www.craigjuddpinstriping.net , that's the main site i'm working on right now.

Does anyone know how I can use <div>'s along with a <section> class , two codes that compile instead of separate that doesn't really work? .. i'm getting frustrated

I'm not quite sure what your asking.

If you want to position something in a specific place Matt, you need to make sure it's within another container so that it uses that container as it's view port. Then when you add the absolute position setups it will not move all over the page if it is expanded or shrunk.

For example if you want this in the main content area of your page you need to put the CSS class within a div inside that main content area. This way the absolute 0, 0 location is the top left corner of that content area and not the top left corner of the monitor window (browser window). That will keep it from floating around the page on you if the browser is resized.

For the most part stick your image in a div
<section> (or <div> or <article> etc in the location you want the image so if it's on the side bar then add the image code below to the sidebar area)

<div class="bowlpin"></div> (no need for anything in the div as it will pick up)

Now from there do your CSS as such making adjustments to the top, left and padding as needed to get it where you want it:

.bowlpin {
background: url(../new_images/bowlpins/350_bowl1.png) left no-repeat;
position: absolute;
top: 250px;
left: -250px;
width: 117px;
height: 350px;
border: none;
padding-bottom: 0px;
}

You can see this in action on the cat site in my signature. If you look at the home page there's a cat jumping out under the image slider on the left right above the Please Help yellow heading. That is positioned the way you're trying to do and I have it within that side bar so that the side bar is basically the parent container it's using.

Hope that makes sense and good luck with it. You can use the code for the cat if you like, just use the view source and check the CSS file for the code for .eventcat5_black and you'll see how I have that one setup.

I'm assuming that's what you're trying to do so if it's not, then we need more clarification of what you're trying to do.