Column layout issues - HTML Forums

bokin · 10-25-2009, 10:30 PM

This is my site: http://digitalplus.webs.com/
I'm trying to get it to be an upsideodwn L shape, with the blue on the left hand side and along the top but I don't know how to set the background for the top for some reason it just stays the same. Also, I want a logo (this image - http://digitalplus.webs.com/logo3.jpg) to appear in the top left corner but for some reason it's hidden somewhere! Please help!

the background column coding:

Code:

	
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;
		position:relative;
	}
.col1 {
background: #3b3b3b;

}

	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	/* 2 Column (left menu) settings */
	.leftmenu {
		background:#3b3b3b;		/* right column background colour */
	}
	.leftmenu .colleft {
		right:79%;			/* right column width */
		background:#005393;	/* left column background colour */
	}
	.leftmenu .col1 {
		width:716px;			/* right column content width */
		left:79%;			/* 100% plus left column left padding */
	}
	.leftmenu .col2 {
		width:21%;			/* left column content width (column width minus left and right padding) */
		left:0%;			/* (right column left and right padding) plus (left column left padding) */
	}
	.leftmenu .coltop {
		right:79%;			/* right column width */
		background:#005393;	/* left column background colour */
	}
	.leftmenu .col3 {
		width:716px;			/* right column content width */
		left:21%;			/* 100% plus left column left padding */
	}
	

</style>

<body >

<div class="colmask leftmenu">
<div class="coltop">
<div class="col3">
<div id="everything">
<img src="http://digitalplus.webs.com/DPG-toplogo11.jpg">

</div>
</div>

<div class="colleft">
<div class="col2">
<img src="http://digitalplus.webs.com/logo3.jpg" width=200 height=218>

</div>

<div class="col1">

<div id="buttonlist">

<ul id="homebutton">
<li><a href="http://digitalplus.webs.com/index.htm"></a></li>
</ul>
 <ul id="servicesbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/services.htm"></a></li>
  </ul>
<ul id="graphicdesignbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/graphicdesign.htm"></a></li>
  </ul>
 <ul id="golfbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/golf.htm"></a></li>
  </ul>
 <ul id="testimonialsbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/testimonials.htm"></a></li>
  </ul>
 <ul id="uploadbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/upload.htm"></a></li>
  </ul>
 <ul id="linksbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/links.htm"></a></li>
  </ul>
 <ul id="contactusbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/contact.htm"></a></li>
  </ul>


</div>

<div id="container">
<img src="http://digitalplus.webs.com/logo2.jpg" style="float:left; margin-right: 5px;" />
<p align=left><i>D</i>igital Plus Group, downtown Toronto’s premier commercial printing company, has been in business for over 23 years and has been a leader in offset printing, digital printing and document management.  At DPG we offer a comprehensive line of services including: digital and offset printing (black & white and colour), large format reproductions, graphic design, scanning and archiving, as well as many other service features. Navigate to our Services page to find a complete list of services.
</p>
<h1><i>m</i>ission <i>s</i>tatement</h1>
<p align=left>
<i>O</i>ur mission is to create a profitable organization that delivers the most
current technology in commercial printing, while offering excellent service
and creative solutions for each client. Our goal is to create an empowering environment for each team member which
allows individuals to grow both professionally and personally. This opportunity will be created by strong leadership and continual growth.
</p>

</div>
</div>
</div>

</div>

</div>
</div></div>



</body>


</html>
</head>

phatbass · 10-26-2009, 01:48 PM

Your layout is very poor. This is what is probably causing the left blue section to appear below the header.

If you rework your layout to be something similar to:

Code:

<div id=wrapper>
	<div id=top>
		...
	</div>
	<div id=middle>
		<div id=left>
			...
		</div>
		<div id=right>
			...
		</div>
	</div>
	<div id=bottom>
		...
	</div>
</div>

That should allow you to apply CSS properly and avoid problems such as what you're having now. Otherwise, even if you find a hack that will solve this particular problem, something else will surely come up and achieving consistency on different browsers will also be extremely difficult.

bokin · 11-03-2009, 11:05 AM

I tried rewriting it in the style you suggested, I tried reworking the coding I already have and the colours are still not displaying properly!!
How do I get the left and top to have a blue background like in an upside-down L shape on my page???
this is my latest coding:

Code:

#everything { margin:0px auto; text-align:left; display:block; width:716px; }


	
	/* column container */
	.colmask {
		position:relative;	/* This fixes the IE7 overflow hidden bug */
		clear:both;
		float:left;
		width:100%;			/* width of whole page */
		overflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;
		position:relative;
	.coltop {	
		clear:both;
		float:left;
		width:100%;
		background:#153f6a;
	}


.col1 {
background: #3b3b3b;
}



	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;
		overflow:hidden;
	}
	/* 2 Column (left menu) settings */
	.leftmenu {
		background:#3b3b3b;		/* right column background colour */
	}
	.leftmenu .colleft {
		right:79%;			/* right column width */
		background:#153f6a;	/* left column background colour */
	}
	.leftmenu .col1 {
		width:716px;			/* right column content width */
		left:79%;			/* 100% plus left column left padding */
	}
	.leftmenu .col2 {
		width:21%;			/* left column content width (column width minus left and right padding) */
		left:0%;		
		background:#153f6a;	/* (right column left and right padding) plus (left column left padding) */
	}


</style>

<body >

<div class="colmask leftmenu">
<div class="coltop">
<img src="http://digitalplus.webs.com/logo4.jpg" width=100 height=109>
<div id="everything">
<img src="http://digitalplus.webs.com/DPG-toplogo11.jpg">
</div> 

<div class="colleft">
<div class="col2">
left side bar
</div>

<div class="col1">

<div id="buttonlist">

<ul id="homebutton">
<li><a href="http://digitalplus.webs.com/index.htm"></a></li>
</ul>
 <ul id="servicesbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/services.htm"></a></li>
  </ul>
<ul id="graphicdesignbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/graphicdesign.htm"></a></li>
  </ul>
 <ul id="golfbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/golf.htm"></a></li>
  </ul>
 <ul id="testimonialsbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/testimonials.htm"></a></li>
  </ul>
 <ul id="uploadbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/upload.htm"></a></li>
  </ul>
 <ul id="linksbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/links.htm"></a></li>
  </ul>
 <ul id="contactusbutton">
    <li id="panel1b"><a href="http://digitalplus.webs.com/contact.htm"></a></li>
  </ul>


</div>

<div id="container">
<img src="http://digitalplus.webs.com/logo2.jpg" style="float:left; margin-right: 5px;" />
<p align=left><i>D</i>igital Plus Group, downtown Toronto’s premier commercial printing company, has been in business for over 23 years and has been a leader in offset printing, digital printing and document management.  At DPG we offer a comprehensive line of services including: digital and offset printing (black & white and colour), large format reproductions, graphic design, scanning and archiving, as well as many other service features. Navigate to our Services page to find a complete list of services.
</p>
<h1><i>m</i>ission <i>s</i>tatement</h1>
<p align=left>
<i>O</i>ur mission is to create a profitable organization that delivers the most
current technology in commercial printing, while offering excellent service
and creative solutions for each client. Our goal is to create an empowering environment for each team member which
allows individuals to grow both professionally and personally. This opportunity will be created by strong leadership and continual growth.
</p>

</div>
</div>
</div>
</div>

</div>




</body>


</html>
</head>

Pegasus · 11-03-2009, 11:13 AM

Try using background-color: #a2b3c1; instead of background:

bokin · 11-03-2009, 10:09 PM

Quote:

Originally Posted by Pegasus

Try using background-color: #a2b3c1; instead of background:

I tried that too and it doesn't work either