close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Site Assist Pro 1.0.7 -- No Symetry

Thread began 10/23/2009 4:36 am by michaelf0199272 | Last modified 11/02/2009 3:01 pm by michaelf0199272 | 2413 views | 10 replies |

michaelf0199272

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

michaelf0199272

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

www.ck4k.org/

Thanks,

Michael

Sign in to reply to this post

neilo

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.

Sign in to reply to this post

Jason ByrnesWebAssist

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.

Sign in to reply to this post

michaelf0199272

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

Sign in to reply to this post

neilo

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,

Sign in to reply to this post

michaelf0199272

Many thanks Neilo -- I will try it out.


Michael

Sign in to reply to this post

michaelf0199272

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

Sign in to reply to this post

neilo

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.

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...