Image side by side problem

this css stuff is not going well
I thought I was starting to get a good understanding and
i horrible failed again

here’s how I want it to look like

and here’s how it looks now

I didn’t even add the About Us because I can’t get the text to center
and if I use padding and margin in the imgwrap then I may push the text down but what about when I want to put the text about us on top?
And i can’t move the request for quote button more to the right because for some reason the text doesn’t allow it

I’m stumped yet again

I didn’t even add the About Us because I can’t get the text to center
To get the text to look like your image you have one of three ways you could do that.

  1. You could set each line of text up as a list item in a ul

  2. You could use <br> tags to force a new line (not recommended)

  3. Use a <pre> tag instead of a <p> to preform the text

From looking at the html it looks like what you are trying to preform the text. The <pre> tag is normally used along with <code> to preserve whitespace and carriage returns.

Your content actually looks like a list of services though and I would be just as comfortable using a ul with list items there.

Then you would have this as your heading:
Custom Product Development Corporation Capabilities

Part of your problem is that huge top margin you had on the img after your text. It is keeping you from centering the content, plus you floated your <p> tag to the right.

so how do I get the request for quote button about 200 pixels for the bottom and align it anywhere I want plus it has to be a rollover image.

Also I got rid of the huge margin but I still can’t align the text in the center

and to push it down do I use more padding and margin on the img wrap but then that doesn’t allow me to put the About us?

I’m still confused
sorry for my learning curve

so how do I get the request for quote button about 200 pixels for the bottom and align it anywhere I want plus it has to be a rollover image.
The concept will be the same as the other rollovers we have done here. That is, the image needs to be a BG image on an anchor. Then use BG position on a:hover. You really need to nest the anchor in another block element that follows the <pre> tag. You can use a <p> tag and give an ID of “quote” so it describes it’s purpose.

For the html on that button it would look like this:

<p id=“qoute”><a href=“#”></a></p>
Now set up that id in the css and clean the pre tag up some

[B].imgwrap pre[/B] {
[COLOR=Blue]font:bold 15px/1.2 arial;
margin:420px 0 0;
[B]#qoute[/B] {
margin:30px 100px 0 0;/*set margins as you choose*/
display:inline;/*fix ie6 bug*/
[B]#qoute a[/B] {
background: url(Requestqoute.png) no-repeat;
[B]#qoute a:hover[/B] {background-position: 0 0;}

Set the bg position on a:hover as you need it, that should get things close

The text still doesn’t center
and to add the About Us on top
by the blue line
would I just add that as a UL?
I’m getting lost on how to position things around an image
thats a background
is there any tutorial or anything that might allow me to get a better understanding on how to position things on backgrounds?
I hate bugging you about all this and there’s got to be away for me to
understand this stuff so I don’t have to take up your time

this is with the mods applied

The text is not centering up because you did not remove the float or the width from the pre tag as I pointed out.

That p#quote should be nested in the same div as the text also.

I would really suggest that you use a UL and a heading instead of the pre tag though. It will give the page a better outline.

<div class="imgwrap">
    <h2>Custom Product Development Corporation Capabilities</h2>
        <li>Metal Fabrication and Integration</li>
        <li>Sheet Metal Enclosure Fabrication and Assembly</li>
        <li>Electromechanical Turn-Key Assembly and Testing</li>
        <li>Cable Assembly</li>
        <li>Clean Room</li>
        <li>Industrial Steel Fabrication</li>
        <li>Welding Fabrication</li>
        <li>Gasket Die Cutting</li>
        <li>Molded and Extruded Rubber</li>
        <li>Engineering Design</li>
        <li>Collective Participation in Engineering Processes</li>
        <li>Customer Focused – Quality Driven</li>
        <li>Quick Turn Prototyping </li>
        <li>Cost Reduction Manufacturing Processes</li>
        <li>70 Thousand Square Foot Manufacturing Facility</li>
        <li>ITAR Registered</li>
        <li>Established: 1974</li>
    <p id="qoute"><a href="#"></a></p>

Ok im starting to get the hang of it
how do I remove the bullet points?
I tried text decoration none but that didn’t work
which I figured.
Any ideas?

Actually I figured it out for a change
I did
list style none
and it removed it
so far so good
I’m learning a lot and you’ve helped me with 99.6% of it
thanks rayzur

Sorry, I got tied up on something else.

Yes, you got it, list-style:none is what you needed

You need to get your headings straightened out. Your “About Us” should be the higher level, Each page really needs an h1 and sub headings will follow as needed.

    [COLOR=Red]<h3>[/COLOR]About Us</h3>
   [COLOR=Red] <h2>[/COLOR]Custom Product Development Corporation  Capabilities</h2>

Should probably be:

    [B]<h1>[/B]About Us</h1>
    [B]<h2>[/B]Custom Product Development Corporation Capabilities</h2>

I would also suggest that you set up an ID on that UL so you can style it specifically without the styles getting picked up by another ul.

As I mentioned, it looks like it is a list of “services” so that might be a good descriptive name.

[B]<ul id=“services”>


ok that makes since now

so for organizing text like this would <pre> be better to make it exactly how it’s lined up?

No, the <pre> tag is really just for preformed content such as code examples.

What your showing there some might consider to be tabular data but I would be comfortable using a DL (definition list) for it.

Here are several examples

Ahh so it would be set up in this form


    <dt>Height -</dt>

    <dt>Weight -</dt>
    <dt>Middle Name -</dt>
    <dt>Age -</dt>

    <dt>Eye Color -</dt>


dl {
    padding:1px 0 0;
    background:#EAEFF5 url(dot.png) repeat-x 0 0;
dt {
    padding:0 .5em;
dd {
    margin-left:0; /* removes the default indent */
    padding:0 .5em 0 9.5em; /* 9.5em makes room for the floated dt */
    background: url(dot.png) repeat-x 0 100%;

How might I add a scroll bar in css to where I can position it anywhere I would like.

Would I do some sort of Div Style in html?