Layout changes when I add an image (CMS)

Hello, I setup a layout with CSS sculptor and everything lined up fine when there was no content. Now I added images and such and the heights/widths are changing causing things to come out of alignment.

For example, look at the logo, menu, top picture area:
aboutus.php

At first I put in just the image and it fit in the box but pushed the links up higher. Then I added the logo and it slid everything over.

images and other content will effect the layout if the widths are greater than the containing element.

in other words, if you put an image inside a div that is 100px wide, and set the images width to 120px, it will throw off the layout.


try decreasing the width of any images you are adding to see if that fixes the issue.

That worked in a sense... whatwedo.php . When I made the layout there was a header area for everything from bottom of the red area on up. So then I made one table with 2 columns to separate it into the left logo area and the right menu/image area. So then I placed the logo in the left side, and added a 2 row 1 column table on the right side for the menu (top row) and the image (bottom row). But the areas are big enough for everything to fit without disrupting the layout.

Here is my dreamweaver layout:

The image I place in the white box is smaller than the white box...so there is no way it is pushing the tables around. But somehow it is. It has to be the way I set it up.

You may want to go about the design slightly different. I noticed you stated you made a table to hold the content. In reality, you should only use tables for tabular data and not for layouts.

I would use divs to arrange the layout. That way you could even have a div for example with a defined width and height and you could set the overflow attribute to "hidden". That will stop any content within the div from expanding or messing with your layout.

Best regards,

Brian

Are there any resources through webassist explaining divs? I have not really been exposed to it

Not through webassist, no.

a div is just a design building block.

Really in css layouts you have two types of containers:
div
span

a div containier is a block level container, it conforms to the css block model.

it is the equivilant of a table data cell.

a span is an inline level element.
It can be more flexable and flow around a block level element.

think in terms of a paragraph that is flowing around an image.

there are many resources on line that can get you started:
DIV-Based-Layout-with-CSS/

tutorials.php?page=1&c_id=24

are just a couple.

Also, one of the best books on the subject of CSS (and I have read probably over a dozen of these) is CSS The Missing Manual by David Sawyer McFarland. Another great one is CSS Mastery (Advanced Web Standards Solutions) by Andy Budd. I thought they were not only easy reads, but I came away with a far better grasp of CSS concepts and techniques.

Best regards.

Brian

So I am having problems creating divs, within divs...if I even should do it like that. I have a header area that is a div made by site sculptor. So now I want a "table" that is 2 columns wide. In the first column, two rows : One for the logo, and for for an announcement area. The other column has 2 rows also, one for the navigation and the other for a picture area. I couldn't get the layout right for the life of me.

Here is a crude example of what I mean, along with the actually site.

layout.gif

www.newenglandstitchcraft.com

It is for the same reason as early mentioned, when the customer goes to change content, the layout changes and things don't like up with the background.

a very basic structure would look like this:

<div class="head">
    <div class="leftColumn">
        <div class="logo">
            logo here
        </div>
        <div class="announcements">
            Anouncements
        </div>
    </div>
    <div class="rightColumn"
        <div class="nav">
            navigation
        </div>
        <div class="picture">
            Picture
        </div>      
    </div>  
</div>

use float on the left column and right column classes to put them in place, and add oveflow: hidden to the head class.

I am ok with this part, but I get confused on where I put the code in the css page and how to appropriately name the lines.