CMS Made Simple Forums

Hello,

I am having a major problem when trying to build my site with cmsms and css. I want the site to look as the picture below and at one time I thought i had solved it using a negative margin-top value but when I posted more news the right and left column where not aligned anymore. I could have figured that one out but i hoped it would work.

My question is. How can I make the contentbox and the newsbox align and not the way it is now on http://www.billstromska.fhsk.se/cmsms/

The newsholder consists of three divs with one toppicture, one middle that repeats in y and one with a picture in the bottom.
I am using the CSSMenu top + 2 columns template and the Layout: Top menu + 2 columns css.


My template looks like this:








{sitename} - {title}


{metadata}


{stylesheet}



{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}



{literal}

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



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


{/literal}


















     
         News
          {news number='3' detailpage='news'}
     




   

   
   


   
   
{cms_selflink dir="start"}
   

   


     
     
         Navigation
         {menu template='cssmenu.tpl'}
     
     
     


   


   


   
   


     
     
         {content block='Sidebar'}
     
     

     
     
         

         {print showbutton=true script=true}
         {title}
         {content}


     


 
     

   
   
   
   
      {global_content name='footer'}
      
   











And my css looks like this:

/*****************
browsers interpret margin and padding a little differently,
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 70%;
   line-height: 11px;
}


/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 10px;
}

/*
if img is inside "a" it would have
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a,
a:link
a:active {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   background-color: inherit;
   color: #89bf69;
}

a:visited {
   text-decoration: underline;
   background-color: inherit;
  color: #18507C;                /* a different color can be used for visited links */
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   background-color: #C3D4DF;
   color: #385C72;
}

/*****************
basic layout
*****************/
body {
   background-color: #edeae1;
   color: #333;
   margin:1em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 0px solid #c3bfb4;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 85em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #edeae1;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
   height: 110px; /* adjust according your image size */
   width: 650px;
   */ margin-top: -487px; */
}

div#header h1 a {
/* you can set your own image here */
   background: url(images/cms/header.jpg) no-repeat;
   display: block;
   height: 110px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
   float: right;
   width: 23em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
   width: 648px;
}

div#content {
   margin: 0px auto 0px 0; /* some air above and under menu and content */
   border-left: 1px solid #c7beb5;
   border-right: 1px solid #c7beb5;
/*   border-bottom: 1px solid #deddd8; */
   border-bottom: 1px solid #c7beb5;
   background-color: #fff; /* same bg color as in header */
   width: 648px;
}

div#main {
   margin-left: 5%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 5%; /* and some air on the right */
   background-color: #fff; /* same bg color as in header */
   width: 600px;
}


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

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0%;
   /*width: 0%;   make width smaller if there's padding, or it will get too wide for the floated divs in IE */
   width: 648px;
}

div#footer {
   margin-top: 15px;
   clear:both;       /* keep footer below content and menu */
   color: #000;
   background-color: #fff; /* same bg color as in header */
   border: 1px solid #c7beb5;
   width: 648px;
   height: 25px;
}

div#footer p {
   font-size: 10px;
   padding: 0.6em;      /* some air for footer */
   text-align: center; /* centered text */
   margin:0;
}

div#footer p a {
   color: #edeae1; /* needed becouse footer link would be same color as background otherwise */
}

/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1em;
   border-bottom: 1px dotted black;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}

div#newsholder {
  background: url(uploads/test/anslagstavlan1.jpg);
  float: none;
  width: 187px;
  height: 111px;
  clear:both;
  margin-left: 700px;
  margin-top: 120px;
}

div#newsholder2 {
  background: url(uploads/test/anslagstavlan2.jpg);
  background-repeat: repeat-y;
  float: none;
  width: 187px;
  margin-left: 700px;
  clear:both;
}

div#newsholder3 {
  background: url(uploads/test/anslagstavlan3.jpg) no-repeat;
  float: none;
  width: 187px;
  margin-left: 700px;
  margin-top: -10px;
  height: 6px;

}

/********************
CONTENT STYLING
*********************/
div#content {

}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #294B5F;
   font-size: 1.5em;
   text-align: left;
/* some air around the text */
   padding-top: 9px;
   padding-bottom: 1px;
/* set borders around header */
   border-bottom: 0px solid #c3bfb4;
   border-left: 0px solid #c3bfb4;
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 0.5em 0;
}
div#content h3 {
   color: #294B5F;
   font-size: 1.3em;
   line-height: 1.3em;
   margin: 0 0 0.5em 0;
}
div#content h4 {
   color: #294B5F;
   font-size: 1.2em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* Wrapping text in tags. Makes CSS not validate */
code, pre {
white-space: pre-wrap;       /* css-3 */
white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
font-family: "Courier New", Courier, monospace;
font-size: 1em;
}

pre {
   border: 1px solid #c3bfb4;  /* black border for pre blocks */
   background-color: #ddd;
   margin: 0 1em 1em 1em;
   padding: 0.5em;
   line-height: 1.5em;
   font-size: 90%;   /* smaller font size, as these are usually not so important data */
}

/* END TEXT */

/* LISTS */
div#main ul,
div#main ol,
div#main dl {
  font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
   margin: 0 0 0.25em 3em;
}

div#dl dt {
   font-weight: bold;
   margin: 0 0 0.25em 3em;
}
div#dl dd {
   margin: 0 0 0 3em;
}
/* END LISTS */




All help i gladly accepted becaurce this is driving me crazy! 

Thank you all!

/Simon

Your main+sidebar is too large for the page...

div#content {
  width: 648px; <-- total width
}

div#main {
  width: 600px; <--  width of main content
}

div#sidebar.hascontent {
  width: 648px; <-- width of sidebar
}

The total of main+sidebar is 1248 , but the content is only 648.

Nullig

You should also wrap you right newsholders together with one div and float that right. Maybe you could use first of them:



     
        News
          {news number='3' detailpage='news'}
     



<-- add this

div#newsholder {
  background: url(uploads/test/anslagstavlan1.jpg) no-repeat;
  float: right;
  width: 187px;
  overflow:auto;
  margin-left: 0px;
  margin-top: 120px;
}

div#newsholder2 {
  background: url(uploads/test/anslagstavlan2.jpg);
  background-repeat: repeat-y;

  margin-left: 0px;
margin-top:50px; <-- or something suitable
}

div#newsholder3 {
  background: url(uploads/test/anslagstavlan3.jpg) no-repeat;

 
  margin-left: 0px;
  margin-top: -10px;
  height: 6px;

}

You could actually do it with one single image that is tall enough and with 2 divs. One holding top and another one holding bottom and positionning them differently. Or making it even more simple you could use h2 as top and id="news" as bottom. Then style them so background images align.

Hope this helps, K

You may want to put the news into the side bar and go back with the original sizes and it just may work...

Thanks for all your help.

I have almost managed to do this now using KO's suggestion. In Firefox it works like a charm but in IE7 the newsholders are pushing the footer down. Any clue on what to use on this? To correct the same problem i Firefox i just changed the clear class to none instead of both. The css for the footer is as follows:


div#footer {
  margin-top: 15px;
  clear:none;    /* keep footer below content and menu */
  color: #000;
  background-color: #fff; /* same bg color as in header */
  border: 1px solid #c7beb5;
  width: 648px;
  height: 25px;
}

div#footer p {
  font-size: 10px;
  padding: 0.6em;      /* some air for footer */
  text-align: center; /* centered text */
  margin:0;
}

div#footer p a {
  color: #edeae1; /* needed becouse footer link would be same color as background otherwise */
}


The site is currently located at http://www.billstromska.fhsk.se/cmsms/

Thank you!
/Simon

Your "main" width is 610, so perhaps you should change the footer to match...

div#footer {
  margin-top: 15px;
  clear:none;    /* keep footer below content and menu */
  color: #000;
  background-color: #fff; /* same bg color as in header */
  border: 1px solid #c7beb5;
  width: 648px; <-- change to 610
  height: 25px;
}

Nullig

seems to me, now I'm no expert...
but you need to add a div to the end of the content div.
right inside.  Give it a nbsp and then style it with clear:both.

The news module is inside the content div I think.
The footer is outside of it, but all three are inside the
page wrapper.  Solution is to add a final
div in the content div after the content and menu.
make it 100% wide, and clear:both;

this should force the content div down when the
news grows beyond the content.  to, however,
keep the news the same height as the content if for
some reason there is more content than news.. well
that's a little harder.  you may need to use percentages
for this too.. but I'm not sure... like i said...i'm no expert...

I have been on holiday but now im back. I tried with both suggestions but unfortunantely it won't work. I would rather not like to have the right column the size of the left becaurce the whole point is that it should adapt its length according to it's content.

If someone knows a way to solve this please feel free to respond even if you are not quite sure if your thought will work.

Thank you
Simon

Simon,

I just read your post, but couldn't find the image of the way you want it to look. So I can't see what is unwanted in the current look.

Ronny

Well, if you ie. look at this page in Internet Explorer 7: http://www.billstromska.fhsk.se/cmsms/i ... e=personal
you will see that the footer is pushed down by the right content block. If you look on the same page in Firefox this does not occur. My problem therefore is to make IE7 show the page as Firefox does.

Thank you!
/Simon

try wrapping your in another div with the footer in it...

That worked like a charm.

A big thanks to everyone!


/Simon

What worked, in case someone needs the same solution?...