"Top simple navigation + left subnavigation + 1 column" to fixed width (solved)

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
kizil

"Top simple navigation + left subnavigation + 1 column" to fixed width (solved)

Post by kizil »

Hi,

"Top simple navigation + left subnavigation + 1 column" actually meets a (or rather one)  basic requirement, insofar that I can use it to give language choices in the simple top navigation, which calls on the various language menus in the left subnavigation. So far so good.

I however need a fixed width template/stylesheet and just discovered that this theme was literally programmed to work as stretching as best as stretching can be. I'm pretty much lost as to where to rewrite that one to fit the needs.

Is there (as I didn't find one so far) a fixed width them with that navigation scheme? Or can someone point me towards a halfway easy method to take out the scalability of that theme?

An acceptable alternative would be a means to use the old trick of background stretcher image plus top image inside a table via CSS - again my attempts to do this with this theme failed...

Any help would be vastly appreciated!

Greetings

Kizil
Last edited by kizil on Sat Aug 18, 2007 6:17 am, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: "Top simple navigation + left subnavigation + 1 column" to fixed width

Post by Dr.CSS »

You may want to copy it then you can make changes to the new one and still have the old one to look back on, go to Layout » Templates click the dbl. paper icon name it and submit...

Then copy the style sheets for it...

In the template the width is set for IE6 using some JS... delete this...

{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}

Then in the Layout: Top menu + 2 columns CSS change this...

/* center wrapper, min max width */
div#pagewrapper {
  border: 1px solid black;
  margin: 0 auto;    /* this centers wrapper */
  max-width: 80em; /* IE wont understand these, so we will use javascript magick */
  min-width: 60em;
  delete these then use... width:###px
  background-color: #fff;;
  color: black;
}

And you may find you need to make some adjustments to the sidebar and main divs...

div#main {
  margin-left: 29%; this can be set in px /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
  margin-right: 2%; /* and some air on the right */
}


div#sidebar {
  float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
  width: 26%;  this can be set in px  /* sidebar width, if you change this please also change #main margins */
  display: inline;  /* FIX ie doublemargin bug */
  margin-left: 0;
}
kizil

Re: "Top simple navigation + left subnavigation + 1 column" to fixed width

Post by kizil »

Hi Mark,

thanks a million! This certainly did the trick  ;D I'd never have cottoned on fast enough to look for it both in the tpl and css, as I dislike it when templates/html chunks do css jobs and vice versa  :o

By the way - the longer I now work with it the better I start liking this CMS, the one main thing I find lacking is true core multilingiality. But for small pages the approach I found with this theme will work just nicely.

Greetings

Kizil
Locked

Return to “Layout and Design (CSS & HTML)”