Site Assist Pro 1.0.7 -- No Symetry

I am having big issues with Site Assist Pro 1.0.7 -- Everything seems to NOT line up despite that width assignment is the same at 744px. I have been working on this thing going on to five weeks -- Templates\Wizards are supposed to cut down on your production time. This is not the case with this package.

Q: How do I make the edges to line up??? Please this is vital to the success of the final deliverable. Please review the pictures.

Don't go by what you see in Dreamweaver for CSS Alignment.

How does the page appear when viewed in a web browser?

If you have the same problem when the page is viewed in a web browser, please send a link so I can examine the CSS.

When launched over the internet -- it is still not symetrical.

www.ck4k.org/

Thanks,

Michael

Your CSS for these divs is:

#outerWrapper #header {
	background-color: #ffffff;
	background-image: url(../siteassistpro_images/Logo1.jpg);
	background-repeat: repeat-y;
	color: #006;
	font-size: 36px;
	font-weight: bold;
	width: 744px;
	height: 80px;
	line-height: normal;
	padding: 15px 0px 0px 15px;
}
#outerWrapper #topNavigation {
	background-image: ("../siteassistpro_images/Logo1.jpg");
	background-position: bottom;
	background-repeat: no-repeat;
	color: #fff;
	font-weight: bold;
	width: 744px;
	height: 31px;
	padding: 0px 10px 0px 0px;
	background-color: #AB4C34;
}

In the '#outerWrapper #header' CSS - you have added 15px padding to the left of the div. You should either remove this padding or reduce the width of the div by 15px to accommodate it.

In the '#outerWrapper #topNavigation' CSS - you have added 10px padding to the right of the div. You should either remove this padding or reduce the width of the div by 10px to accommodate it.

the true width of an element is width + left-padding + right padding.

for the header, you have:
#outerWrapper #header {
background-color: #ffffff;
background-image: url(../siteassistpro_images/Logo1.jpg);
background-repeat: repeat-y;
color: #006;
font-size: 36px;
font-weight: bold;
width: 744px;
height: 80px;
line-height: normal;
padding: 15px 0px 0px 15px;
}


the padding is written as top right bottom left. so:
padding: 15px 0px 0px 15px;


means
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px
padding-left: 15px;

so the true width of the header is:
width: 744px; + padding-right: 0px; + padding-left: 15px;
744 + 0 + 15 = 759px


change the padding from:
padding: 15px 0px 0px 15px;

to:
padding: 15px 0px 0px 0px;


to maintain the 744px width of the header.



same for the navigation. you have:
#outerWrapper #topNavigation {
background-image: ("../siteassistpro_images/Logo1.jpg");
background-position: bottom;
background-repeat: no-repeat;
color: #fff;
font-weight: bold;
width: 744px;
height: 31px;
padding: 0px 10px 0px 0px;
background-color: #AB4C34;
}

which means the true width is
width: 744px; + padding-right: 10px; + padding-left: 0px;
744 + 10 + 0 = 755px

change the padding:
padding: 0px 10px 0px 0px;

to:
padding: 0px 0px 0px 0px;

in order to maintain the 744px width.



For the main content, the problem is the background image:
background-image: url(../siteassistpro_images/contentWrapper_bg.jpg);


the image is 160px wide, with a 4 pixel left border and a 12 pixel right border. the 12 pixel right border is causing the body to appear to shift to the left.

Thanks to both Jason and Neilo -- the Webassist Community forum genius!!! lol. The solution that both of you suggested worked particularly the one suggested by Jason.


I still have one issue -- How do I make tha contect area at the right side line up with the header and the footer?

You help will be greately valued.

www.ck4k.org/


Once, again many thanks.

Michael

Hiya Michael,

The main problem you're having here is with the background image for the contentWrapper div.

I have attached a modified version of this - if you'd like to try it out.

If you want to try it out, rename the existing image 'contentWrapper_bg.jpg' in your siteassistpro_images folder to 'contentWrapper_bg_bak.jpg', and then put the attached image in the folder.

There are a couple of small adjustments I would make to the css (if it were me) but perhaps you could try this out first!

Cheers,

Many thanks Neilo -- I will try it out.


Michael

Hi Neilo plus Jason your solutions regarding fixing my symetry problems worked rather well. Thanks people.

Now I have another problem -- I am having problem replacing the "light blue" bg color with the yellow color (#FFC315) -- because that is the color that my customer requested it be changed to. I have looked in both the content.css and home.css -- I have changed every background except one which has proved rather difficult.

I need some help changing all the bg color to #FFC315, Instead of the light blue bg color. Right now it is causing the pages to show two bg color.

Any and all help will be appreciated.

See the attachments.


Once again, thanks.

Michael

Hi Michael,

The easiest way would be to change the css properties for your '#outerWrapper #contentWrapper' div.

In your home.css stylesheet, change:

#outerWrapper #contentWrapper {
	background-image: url(../siteassistpro_images/contentWrapper_bg.jpg);
	background-position: right top;
	background-repeat: repeat-y;
	height: 1%;
	min-height: 0;
	overflow: visible;
	width: 744px;
}

to:

#outerWrapper #contentWrapper {
    	overflow: visible;
	width: 744px;
	background-color: #ffc315;
}

This effectively removes the div background image, and gives the contentWrapper div a background colour.