Layout changes when I add an image (CMS)

[elevy388997]

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:
http://newenglandstitchcraft.com/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.

[Jason Byrnes]

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.

[elevy388997]

That worked in a sense... http://newenglandstitchcraft.com/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:
http://i57.photobucket.com/albums/g206/krazykid035/webassist/NESCheader.jpg

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.

[SOJO web]

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

[elevy388997]

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

[Jason Byrnes]

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:
http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

http://www.designplace.org/tutorials.php?page=1&c_id=24

are just a couple.

[SOJO web]

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

[elevy388997]

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.

http://i57.photobucket.com/albums/g206/krazykid035/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.

[Jason Byrnes]

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.

[elevy388997]

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.

[Jason Byrnes]

well, since you are dealing with classes, you create a new css class rule by using the class name with a period in front:

.leftColumn {

}



have you looked at the w3shools site? They have a good getting started guide for CSS:
http://w3schools.com/css/default.asp

[elevy388997]

I was wondering more of the specific application with site sculptor since there is :

#outerWrapper {
#outerWrapper #header {
#outerWrapper #contentWrapper #content {

I got confused on how I set the properties for custom sections using id or class sectors etc in the .css file.

And I haven't read that yet, will do now.

Edit: I don't know how I messed it up so much. I understand what is going on now...brain fart i guess.

[Jason Byrnes]

Ok, glad to hear you are getting the hang of it.

[elevy388997]

My problem now is that there seems to be a gap in between the elements within the columns.

In the left column, there is a good 20px gap from the logo area to the announcement area, and the same with the right column concerning the navigation and picture area:

http://i57.photobucket.com/albums/g206/krazykid035/gap.jpg

Opps, here it is in context:

http://newenglandstitchcraft.com/aboutus.php

It also causes the elements to start further down than I would like them to.



EDIT:
Also, what if I have different layouts on each page of a site ; would it still be better to create different css classes for each page? Or create a class like .content and .column and just float the column on the left or right depending on what layout I want?

I want 4 different layouts: Left content columns such as a "news" and "specials" box, right column with same idea, top boxes same idea, bottom boxes same idea: http://i57.photobucket.com/albums/g206/krazykid035/layouts.gif

[Jason Byrnes]

using fire bug, I an elimiante the gap by increasing the margin top property of the .nav class.

[elevy388997]

When I increase the margins it just slides everything down and the gap remains.

[Jason Byrnes]

using firebug, if i change the nav class to:

.nav {
height:21px;
margin-top:99px;
padding-left:10px;
width:auto;
}

it removes the gap.