CSS layout problem

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"
Post Reply
Leav
Forum Members
Forum Members
Posts: 38
Joined: Fri Aug 11, 2006 8:26 pm

CSS layout problem

Post by Leav »

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. :D 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!  ;D

-Leav
Top
Nogga

Re: CSS layout problem

Post by Nogga »

Should there be any content in the left and right column? Or just for (different) backgrounds?
Top
Leav
Forum Members
Forum Members
Posts: 38
Joined: Fri Aug 11, 2006 8:26 pm

Re: CSS layout problem

Post by Leav »

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

Thanks for helping me out!
-Leav
Top
Nogga

Re: CSS layout problem

Post by Nogga »

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

Re: CSS layout problem

Post by Nogga »

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>
Top
Leav
Forum Members
Forum Members
Posts: 38
Joined: Fri Aug 11, 2006 8:26 pm

Re: CSS layout problem

Post by Leav »

thanks! that's awesome!

i'll work around the stupid diagnols!  ;D

thanks alot!

-Leav
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS layout problem

Post by Dr.CSS »

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
Last edited by Anonymous on Sat Aug 12, 2006 8:32 pm, edited 1 time in total.
Top
Nogga

Re: CSS layout problem

Post by Nogga »

@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).
Top
Leav
Forum Members
Forum Members
Posts: 38
Joined: Fri Aug 11, 2006 8:26 pm

Re: CSS layout problem

Post by Leav »

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  ;D :P ;D )

-Leav
Top
Leav
Forum Members
Forum Members
Posts: 38
Joined: Fri Aug 11, 2006 8:26 pm

Re: CSS layout problem

Post by Leav »

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....
Last edited by Leav on Sat Aug 12, 2006 8:44 pm, edited 1 time in total.
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: CSS layout problem

Post by Dr.CSS »

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.  ;)
Top
Post Reply

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