CMS Made Simple Forums

Posted: **Sat Aug 12, 2006 3:02 pm**

Hello,
I googled like there is no tommorow butI couldn't find an answer!

I'm new to CSS and am trying to create a design with 3 columns:

left column is scaleable and does not have a minimum width.

middle column is for the content: it has the header, the main body of the website and the footer. this has a fixed width.

right column is scaleable and does not have a minimum width.

the whole thing should be centered, so that if the windows is too big, it will repeat the background images in the left and right columns in order to fill the space, but the middle column has a fixed width.

needless to say, it doesn't work.

I need you help please!

Here is the HTML:

Code: Select all

<__html>
	<head>
		<title>{title}</title>
		<!--{metadata}-->
		<link REL="STYLESHEET" TYPE="text/css" HREF="mobixie.css">
	</head>
	</__body>
		<div class="wrapper">
			<div class="bg_left">
			</div>
			<div class="center">
				<div class="header">
				</div>
				<div class="torso">
				</div>
				<div class="footer">
				</div>
			</div>
			<div class="bg_right">
			</div>
		</div>
	<__body>
</__html>

And the CSS:

Code: Select all

body
{	
	text-align: center;
}
.wrapper /*the box that is *supposed to keep it all in the middle....*/
{

	margin: 0 auto;
	text-align: left;
	width: 100%;
}

.bg_left /*left background image - flexible width*/
{
	background: url(images/mobixie/bg_left.jpg);
	float: left;
	min-width: 57px;
	height: 885px;
}

.bg_right /*right background image - flexible width*/
{
	background: url(images/mobixie/bg_right.jpg);
	float: left;
	min-width: 57px;
	height: 885px.;
}

.center /*container for all the middle column*/
{
	width: 726px;
	float: left;
}

.header /*header file placement*/
{
	background: url(images/mobixie/header.jpg) no-repeat;
	height: 257px;
	float: up;
}



.torso /*where the text boxes will go after the structure is complete*/
{
	background: url(images/mobixie/bigbox_bg.jpg);
	height: 528px;
	float: up;
}

.footer /*footer image*/
{
	background: url(images/mobixie/footer.jpg) no-repeat;
	height: 100px;
	float: up;
}

I attached the images in case you want to load it up on your machine.
http://www.mysharefile.com/d/5896822/11 ... obixie.zip

I really can't figure this out and I have a feeling that If I get this things will be smoother later on....

I would really appreciate if you took the time to help me. I would take the time to help you!

-Leav

Posted: **Sat Aug 12, 2006 3:35 pm**

Should there be any content in the left and right column? Or just for (different) backgrounds?

Posted: **Sat Aug 12, 2006 3:47 pm**

nope just background... all the content will be somewhere inside the "center" class.

Thanks for helping me out!
-Leav

Posted: **Sat Aug 12, 2006 4:24 pm**

Why don't you use the same background for the left and the right side? That would make it a lot easier...

Posted: **Sat Aug 12, 2006 4:48 pm**

I'm sorry, but i think you have to use tables to achieve this result.

(I think you would like "attach" the background images to the right and left side of the content-column, so that it lokks right with these diagonal stripes - but i don't know a way to do this with css)

An alternative would be: use horizontal stripes instead of these diagonals...

Here my version:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <style>

      body {
        margin: 0;
        padding: 0;
        text-align: center;
        background: url(bg_right.jpg);
        color: white;
      }    
      
      #center {
        width: 726px;
        height: 100%;
        margin: 0 auto;
      }
      
      #header, #torso, #footer {
        width: 100%;
      }
      
      #header {
        background: url(header.jpg) no-repeat;
        height: 257px;      
      }
      
      #torso {
        background: url(bigbox_bg.jpg);
      }
      
      #footer {
        background: url(footer.jpg) no-repeat;
        height: 100px;        
      }
          
    </style>
  </head>
  </__body>
  
      <div id="center">

        <div id="header">
          header
        </div>
        <div id="torso">
          content
        </div>
        <div id="footer">
          footer
        </div>

      </div>

    
  <__body>
</__html>

Posted: **Sat Aug 12, 2006 5:28 pm**

thanks! that's awesome!

i'll work around the stupid diagnols!

thanks alot!

-Leav

Posted: **Sat Aug 12, 2006 6:13 pm**

Have you looked at the templates in the themes site?

There is a 3 col wire frame that can be made to do what you want.

http://themes.cmsmadesimple.org/Theme_Frameworks.html

I used the wireframe1col to make this and modified the left jpg to get the jaggies out...

http://www.multiintech.com/index.php?page=threewide

Posted: **Sat Aug 12, 2006 6:32 pm**

@Mark:

I don't know of any CSS-Layout which meets he's requirements.

All 3 col-Layouts that I know depend on (at least one) fixed "sidebar". He needs a css-layout that has a fixed middle column and variable sidebars to attach a certain background-image to the edge of the content column(which has a fixed width).

Posted: **Sat Aug 12, 2006 7:18 pm**

Thank you all for helping! this has given me a real push in the right direction with my project!

It is really weird that you can't do this in css, isn't it?

it seems like a trivial thing to me....

Thanks anyways guys!

BTW in case you want to know I didn't like the straight lines so I solved the problem by making the background on the header transparent (not with gif, with PNG) and that let's you use any background you want without fear of mis-matching borders!!

(if you can't tell i'm proud of myself for figuring that out

)

-Leav

Posted: **Sat Aug 12, 2006 7:52 pm**

oops!
png doesn't work with IE!
and gif doesn't seem to have anti-aliasing... it look aweful....

any suggestions?

-Leav

EDIT:
Google to the rescue!!!
http://www.daltonlp.com/daltonlp.cgi?it ... tem_id=217

Only drawback is that the filter makes the images slightly darker, so if only the header is PNG it will not match colors with the torso and footer, but I worked around that by making not only the Header but also the torso and the header PNG, and applying the filter to all of them, that way it is darker in IE, but still matches, which is fine by me....

Posted: **Sat Aug 12, 2006 9:21 pm**

Nogga wrote: @Mark:

I don't know of any CSS-Layout which meets he's requirements.

All 3 col-Layouts that I know depend on (at least one) fixed "sidebar". He needs a css-layout that has a fixed middle column and variable sidebars to attach a certain background-image to the edge of the content column(which has a fixed width).

Did you look at my latest EDIT: it's what you can do with CSS.

CMS Made Simple Forums

CSS layout problem

CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem

Re: CSS layout problem