Changed main layout width but side boxes not aligning properly

3 Jan 2008, 10:27 PM

#1

New Zenner

Join Date:: Jan 2008
Posts:: 2
Plugin Contributions:: 0

Changed main layout width but side boxes not aligning properly

Hello everyone.

I've changed the width of my shop (e.g increased it to 90% by edit #mainwrapper in stylesheet.css) and changing in admin/configuration/layout settings (column width left and right boxes 100% and column width 20% as per instructions from zen cart.)

If you take a look at my shop: http://actionshop.biz/shop/ - I need help in correcting 3 issues that are probably minor but are annoying me endlessly.

We are using zencart 1.3.7

(1) The top left box (categories) the boxes overlap a few pixels to the right.

(2) The main center box seems to not be centered correctly and seems to align left a few pixels.

(3) The right boxes are overlapping the main container a few pixels.

Obviously I need to change or add some values to a css file?

Any help would be most appreciated.

Thanks

Bruce

4 Jan 2008, 12:48 AM

#2

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: Changed main layout width but side boxes not aligning properly

Add this to the end of your stylesheet and see what it looks like:

#navColumnOneWrapper, #navColumnTwoWrapper {width: 93% !important;}

This does not fix the problem, it just covers it up; but it gives an idea where to look.

You have #navColumnOneWrapper and #navColumnTwoWrapper set to 100% of the column width in inline styles (which take precedence over stylesheets), and then have margins or padding which add to this. The column can't hold it, so it overflows. Change their width to 93% in admin and they should fit ok. To be completely safe here, you should eliminate the margins or padding and use margin: auto; which will center the boxes in the columns without specifying pixels.

4 Jan 2008, 1:40 AM

#3

bruce_t

New Zenner

Join Date:: Jan 2008
Posts:: 2
Plugin Contributions:: 0

Re: Changed main layout width but side boxes not aligning properly

Thanks for that - it solved the problems.

9 Jan 2008, 3:27 AM

#4

sawhorse

Zen Follower

Join Date:: Oct 2007
Location:: Kentucky - USA
Posts:: 425
Plugin Contributions:: 0

Re: Changed main layout width but side boxes not aligning properly

gjh42
It seems that I too have done something to all the boxes (where you fill in information). All have moved to the left about .25 inch. I can see it in sign in, customer information, attributes etc.

I do not know what I did that moved it. Any suggestions?

I added to the end of my stylesheet the following code you provided and it did not do anything:

#navColumnOneWrapper, #navColumnTwoWrapper {width: 93% !important;}

My shop is http://sawhorsejewelry.com and am using ZC 1.3.8a.

Thanks

9 Jan 2008, 4:23 AM

#5

sawhorse

Zen Follower

Join Date:: Oct 2007
Location:: Kentucky - USA
Posts:: 425
Plugin Contributions:: 0

Re: Changed main layout width but side boxes not aligning properly

Problem fixed.

In my stylesheet I had an error under LABEL.inputLabel
I had the following:

LABEL.inputLabel {
width: 1em;
float: left;
}

It should have been:
LABEL.inputLabel {
width: 11em;
float: left;
}

The above width correction fixed everything.

18 Mar 2008, 2:48 PM

#6

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

I have a simular problem.
Main page is ok
but when you go to to an item or shopping cart you get **this**.
An overflow (or shall I say under) of center text under the right side boxes.

I tried setting Colum boxes to 93%
and Colums to 20%
Yet no result. :censored:

Please keep in mind: I only know how to do changes in *.php & *.css for about 2 weeks. :lamo:

Any help & advise is most welcome. :smartalec:

18 Mar 2008, 4:33 PM

#7

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

I have a simular problem:
-Homepage looks ok
-but when you down to items or shopping cart the center box runs on under part of the right column. :censored:

I've changed:
the column width left and right boxes to 93% (before 150px)
and column width to 20% (before 150px)
Yet no change. :frusty:
As you can see here.

As I only know for two weeks how to edit *. php & *.css, I don't see what is wrong. :lamo:

Any help or advise is very welcome. :clap:

19 Mar 2008, 3:06 AM

#8

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: Changed main layout width but side boxes not aligning properly

The error you mention occurs in IE6 but not in Firefox; however, there are header element spacing/overlap errors in Firefox that do not occur in IE.

Your page HTML does not validate (W3C Markup Validation Service ).
Part of the problem is that you have the leaderboard code before the doctype comment and before the opening <html> tag. This is causing many many other errors.

<center><!-- Start Leaderboard - 728x90 Code -->
<script src="http://cds.adecn.com/add/script.js?v=2.2;siteId=66343;spotId=11783;width=728;height=90">
</script>
<!-- End Leaderboard - 728x90 Code --></center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="nl">
<head>
<title>Noveenkaarsen : Zen Cart!, The Art of E-commerce</title>

You need to relocate that code first, and then see what other errors there may be.

19 Mar 2008, 10:08 PM

#9

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

Oops, I didn't see my first post and accidently posted it again. Sorry for that.

The HTML-change is not an option.
I have a free webhosting on the condition that there is a banner on top of the page.
When I try to fix the problem in the index page and upload it, it gives a better error report but that's because it finds a correct order in the edited part.
Editing also ends up in two banners.

I've tried to fix all with the stylesheet. So far so good in IE7, in Netscape the white links in the header fall into the white part of the logo. I plan to fix this with a color change.

20 Mar 2008, 6:42 AM

#10

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: Changed main layout width but side boxes not aligning properly

You can still have the banner displaying at the top of your page, but the code for it needs to be relocated because it is breaking the display. The HTML change is not an option, it is essential.

20 Mar 2008, 11:39 PM

#11

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

This is the part of the index page that I can change

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<title>Account Successfully Created</title>

<style type="text/css">
 div.c1 {text-align: center}
</style>
</head>
<body>
<div class="c1">If you can see this, your account has been successfully created.<br />
You may now add content to this directory and replace this page.<br />
<br />
You are solely responsible for the contents of your site.<br />
Any inappropriate sites will be deleted with no warning.<br />
<br />
Thank you for using our services.</div>
</body>
</html>

When I use Microsoft Script Editor 10.0 then I can change the "jacket" also but the site automatic but again the same plaged "jacket around it.

Strage is that is says in the code
content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org"

You can still have the banner displaying at the top of your page, but the code for it needs to be relocated because it is breaking the display. The HTML change is not an option, it is essential.
So basicly I'm with my back against the wall then. Because the problem area is off limits for me.

21 Mar 2008, 1:16 AM

#12

gjh42

Black Belt

Join Date:: Jul 2005
Location:: Upstate NY
Posts:: 21,876
Plugin Contributions:: 8

Re: Changed main layout width but side boxes not aligning properly

You need input from someone with experience in dealing with free hosting banners... There must be a way to make pages render correctly while including that output.

23 Mar 2008, 7:50 PM

#13

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

What is the value of the validation of a wab page by validator.w3.org?

This is what I get when I have it validate the following pages:

http://www.zen-cart.com/forum/
This page is not Valid XHTML 1.0 Transitional!
Failed validation, 66 Errors

http://www.zen-cart.com/
This page is not Valid XHTML 1.0 Transitional!
Failed validation, 42 Errors

Of course https://www.w3.org comes out "perfect"

23 Mar 2008, 9:22 PM

#14

philibel

Zen Follower

Join Date:: Mar 2008
Location:: Belgium
Posts:: 120
Plugin Contributions:: 3

Re: Changed main layout width but side boxes not aligning properly

Just had my shop site validated again and ........
only TWO errors in the last line.

My cry to the web host: "HELP" did indeed help.

gjh42, thanks! :clap: :cheers:

computers, software & internet can be: :clap: but also :frusty: or :lamo: