close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Layout changes when I add an image (CMS)

Thread began 8/27/2010 11:02 am by elevy388997 | Last modified 9/27/2010 6:14 pm by Jason Byrnes | 2215 views | 16 replies |

elevy388997Beta Tester

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

elevy388997Beta Tester

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.

Sign in to reply to this post

anonymous

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

Sign in to reply to this post

elevy388997Beta Tester

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

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

anonymous

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

Sign in to reply to this post

elevy388997Beta Tester

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

elevy388997Beta Tester

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.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...