marty.net 1001 Postcards Love Love Love Meep Meep ZenZodiac DailyQuotation

YOU ARE HERE:
Layout Problems with CSS

HOME

CPSHOP|

|

|

EMAIL MARTY
  marty.net message board
  « Layout Problems with CSS »
Welcome, Guest. Please Login or Register.
12/12/17 at 14:18:41
Home Help Search Login Register
   marty.net message board
   About cpshop
   Customization Help
   Layout Problems with CSS
(Moderator: Marty)
Pages: 1 Reply Notify of replies Send the topic Print 
   Author  Topic: Layout Problems with CSS  (Read 1049 times)
LagKills
White Dragon
**

Posts: 23



Go Scots!
   

Layout Problems with CSS
« on: 10/09/06 at 09:11:10 »
Reply with quote Modify message

I've been tearing my hair out the last few days trying to get the cpshop pages to format properly, without success.

I use a very simple external stylesheet (I'm not overly CSS adept) and our template for CP shop is identical to the template I use for the html pages on our website.

Here is our home page, which is designed to fill the screen (container is set to 100%):

http://www.lagkills.com/

Here is one of the CP shop pages:

http://www.lagkills.com/cgi-bin/store/cpshop.cgi/856939154/lagkills/230046

which, as you can see, bumps the content section down and does not take the sidebars to full width.

Here is my template code (I've omitted the header and footer - both set at 100% with the header float center and the footer clear left):

<div id="sidenavbar">
<h2>Shop by Design</h2>
<[sidebar]>&nbsp;
</div>
<div id="content">
<table width="100%"><tr><td>
<[content]>&nbsp;
</td></tr></table>
</div>
<div id="rightbar">&nbsp;
</div>

Here is my stylesheet:

A:link {text-decoration: none; color: #0099CC;}
A:visited {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: underline; color: #FF0000;}
body {background-color: #FFFFFF; color: #000000; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; text-align: center; }
<!-- h1 is in header only -->
h1 { color: #000000; font-size: small; text-align: center; }

<!-- heading 2 is for left side nav bar titles in cpshop -->
h2 { color: #FF0000; font-size: small; text-align: left;}

<!-- h3 is for right side bar text headings we want centered -->
h3 { color: #000000; font-size: x-small; text-align: center;}

<!-- h4 is for right side bar headings we want left aligned -->
h4 { color: #000000; font-size: x-small; text-align: left; }

p { align: left; }
#container { position: relative; float: center; width: 100%; margin-top: 0; }
#header { background-color: #FFFFFF; color: #000000; position: relative; float: center; width: 100%; margin-top: 0;}
#sidenavbar { position: relative; float: left; width: 15%; font-size: x-small; text-align: left; padding: 2px; }
#content { position: relative; float: left; width: 65%; margin-top: 0; padding-top: 0; margin-left: 10px; margin-right: 10px; text-align: left;}
#rightbar { position: relative; float: right; width: 15%;  margin-top: 0; font-size: x-small; text-align: left; padding: 2px; }
#footer { position: relative; float: bottom; padding-top: 20px; width: 100%; font-size: x-small; clear: left; text-align: center;}
hr { color: #0099CC; height: 1px; }

Can anyone help me out here? I'm floundering. Thanks.
Logged
diva
Green Dragon
*

Posts: 9



Go Scots!
   

Re: Layout Problems with CSS
« Reply #1 on: 10/09/06 at 13:41:46 »
Reply with quote Modify message

same problem for me!  I noticed it the layout issue happens in Internet Explorer but not in FireFox.

But the sidebar not going to the full width for me happens in FireFox and an older version of IE.  But I noticed when I upgraded to IE7 it does not happen anymore; not sure what the other version of IE was.  It (sidebar) is still an issue in FF though.
Logged
diva
Green Dragon
*

Posts: 9



Go Scots!
   

Re: Layout Problems with CSS
« Reply #2 on: 10/09/06 at 13:52:05 »
Reply with quote Modify message

here is a screenshot, my site is www.forthehaters.com

Logged
Marty
Administrator Dragon
*****

Gender: male
Posts: a whole lot



That's me. :)
   

WWW E-Mail
Re: Layout Problems with CSS
« Reply #3 on: 10/09/06 at 21:45:59 »
Reply with quote Modify message

Diva, I can't view your store at all -- I just get an XML/XSL error.
Logged

--
Regards,
Marty·.¸¸.·´¯`·.¸¸.-> marty@marty.net
Marty
Administrator Dragon
*****

Gender: male
Posts: a whole lot



That's me. :)
   

WWW E-Mail
Re: Layout Problems with CSS
« Reply #4 on: 10/09/06 at 21:51:02 »
Reply with quote Modify message

Can both of you try renaming your "container" element to something else (like "container2" or "mycontainer")?
Logged

--
Regards,
Marty·.¸¸.·´¯`·.¸¸.-> marty@marty.net
LagKills
White Dragon
**

Posts: 23



Go Scots!
   

Re: Layout Problems with CSS
« Reply #5 on: 10/10/06 at 06:51:40 »
Reply with quote Modify message

Yes, I'd thought of that, since I noticed CP uses a container ID.

I tried it again this morning - it brought the left bar over to the edge and spread the content across. However, it spread the content all the way to the right edge, pushing down the right bar (empty at the moment) on the section pages.

On the individual product pages, the content section still drops below the left bar and spreads to include the whole screen. I cannot get those buy pages to wrap the text.

Another thing I tried with the individual product pages was to give them their own template and remove the CSS altogether, using a table format. That didn't work either - the text will not wrap.

I know people can fix this, I've seen lots of sites that work - I just can't seem to see what they are doing differently.
Logged
Bradley W. Schenck
Gold Dragon
****

Posts: 242



Go Scots!
   

WWW
Re: Layout Problems with CSS
« Reply #6 on: 10/10/06 at 07:10:09 »
Reply with quote Modify message


on 10/10/06 at 06:51:40, LagKills wrote:
Another thing I tried with the individual product pages was to give them their own template and remove the CSS altogether, using a table format. That didn't work either - the text will not wrap.

I know people can fix this, I've seen lots of sites that work - I just can't seem to see what they are doing differently.


I almost mentioned this yesterday, but there were so many possible issues that I didn't want to muddy the waters.  But with respect to this particular issue - I do use table based templates and avoid CSS; and one of the text replacements I've added to my CPShop images file is there to correct the problem you're describing.  It's this:

*||||nowrap||||

...there's a blank space at the end of that line, which is important.
« Last Edit: 10/10/06 at 07:10:53 by Bradley W. Schenck » Logged
LagKills
White Dragon
**

Posts: 23



Go Scots!
   

Re: Layout Problems with CSS
« Reply #7 on: 10/10/06 at 15:07:28 »
Reply with quote Modify message

Bradley, thanks so much for your input. I redid the pages in table format, and made the change you suggested to the image file. That got me almost all the way. Finally, I reduced the size of the main table from 100% to a fixed 1024px and for some strange reason (I'll never know and don't care   ) that did the trick!

Thanks to you and Marty both for your help with this.
Logged
Bradley W. Schenck
Gold Dragon
****

Posts: 242



Go Scots!
   

WWW
Re: Layout Problems with CSS
« Reply #8 on: 10/10/06 at 17:42:48 »
Reply with quote Modify message



on 10/10/06 at 15:07:28, LagKills wrote:
... and for some strange reason (I'll never know and don't care   ) that did the trick!


Well, I had an extra black rooster lying around, and I sacrificed it for you.  It's an unusual approach to web development but it almost always works for me.

Glad it all worked out!
Logged
Pages: 1 Reply Notify of replies Send the topic Print 
Jump to:


marty.net message board (http://www.marty.net/cgi/marty/board/messageboard)

Powered by YaBB 1 Gold - Release (Yet Another Bulletin Board)
Copyright © 2000-2001, X-Null. All Rights Reserved.