page layout problems

[gemma]

Hi,

I'm struggling with page layout. This is a link to the website in its current state www.gemmabayliss.co.uk. I am hoping to have a layout which has an image of fixed height size on the left (I've put this is 'sidebar') and then descriptive text on the right (I've put this in content). I would like the text to sit at the bottom right of the screen always ending at the same level that the image ends (image is 500px height), so want to find a way to 'fix' the content box so that it can't go any further down the page. This way, hopefully, the text will appear in the same place no matter what browser is being used. Sorry if this doesn't make much sense. I've tried a number of changes to the style sheet but am not having much success. Any ideas?
Here's the code of the layout:

Code: Select all

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

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


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

div#header {
   height: 40px; /* adjust according your image size */
   background: #FSF3E5;           
}

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


div#content {
   margin: 1.5em auto 2em 0; /* some air above and under menu and content */
     max-height: 550px;
}

div#sidebar {
 max-height: 520px;
   vertical-align: bottom;
   text-align: left;
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 65%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0.5%;
<link/www.nakashiawoodworker.com>
}

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

div#main {

margin-left: 68%; /* 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#footer {
   clear:both;       /* keep footer below content and menu */
   color: #8B4513;
   background-color: #FSF3E5; /* same bg color as in header */
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;      /* some air for footer */
   text-align: right; /* centered text */
   margin:0;
}

div#footer p a {
   color: #8B4513; /* 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;
}

Thanks.

[RonnyK]

This is no CMSMS issue....

You could check http://www.dynamicdrive.com/style/blog/ ... ht-script/ for setting the height of all columns to the same height....

Ronny

[Fraserm]

Hi Gemma,

If I were you i'd go and create a template in HTML and CSS that achieves your layout without even thinking about the CMS. Once the layout's working with dummy content, only then should you think about adding your template to CMSMS and adding your content placeholders in place of the dummy content.

What you're trying to do is take an unecessarily complex (for your needs) template and edit it, when you could easily start from scratch and make something simple to start with. Remember a 'template' needn't be anything more complex than an HTML page with {content} and the likes blocks in it.

I guess you have three options as I see it:

1. Create your layout using tables. Frowned upon these days, but by far the easiest if you don't know what you're doing.
2. Create a DIV element that's the width of your content area, float your image left and your text right.
3. Create two div elements, one for your picture and one for your text, style them appropriately and clear them both so they end up the same height.

Maybe i'll get flamed and banned or something, who knows, i'm new to CMSMS too, that's just what i'd do.

[gemma]

Well I didn't know about tables, but I think for me as a total beginner that sounds like a sensible option and I will give that a go.
Cheers.

[LCarson]

Hi Gemma,
I'd strongly suggest not to use tables. CSS is by far the best and easiest to use.
I think you should simplify your css to using three containers (1. top menu; 2. image/content; 3. footer)at 100% width; height auto and have div elements inside these that are relative positioned and float left.

FYI A much easier way to force the content to float in the centre is to have an id in your css like:
#distance {
width:1px;
height:50%;
margin-bottom:-750px;
float:left;
}
and in your html code below the insert :


Alter or halve the margin bottom if you want the centering at a different height on the page.
Place your other divs under this in the html code not in it. ie.




Title

etc...

I think your code is currently a little confusing for a simple site.
Use margins to space the divs. Using em's and percentages rather than pixels is also a better way to ensure that the elements are shown on all the different users screen types as they'll scale automatically depending on resolution/text size and float into position when using floats in the css.
Cheers