phpwcms Support Forum

Code: Select all

min-height : 400px;
margin : 0;
background-image : url(../../img/layout/nav_left_filler.gif);
background-repeat : repeat-y;

Code: Select all

<div class="container">

<div class="headerBlock">
	<ul>
		<li><a href="index.php" id="logo"><img src="img/layout/navtop.gif" alt="Camps4you Sprachreisen und Englisch Camps"/></a></li>
		<li><a href="index.php?camps4you" id="camps4you"><img src="img/layout/nav_camps4you.gif" alt="&Uuml;ber Camps4you"/></a></li>
		<li><a href="index.php?reiseziele" id="reiseziele"><img src="img/layout/nav_reiseziele.gif" alt="Reiseziele" border="0"/></a></li>
		<li><a href="index.php?kursdaten" id="kursdaten"><img src="img/layout/nav_kursdaten.gif" alt="Kursdaten & Preise" border="0"/></a></li>
		<li><a href="index.php?im_preis" id="preis"><img src="img/layout/nav_preis.gif" alt="Im Preis inkludiert" border="0"/></a></li>
		<li><a href="index.php?eltern" id="eltern"><img src="img/layout/nav_eltern.gif" alt="F&uuml;r Eltern"/></a></li>
		<li><a href="index.php?bildergalerie" id="bilder"><img src="img/layout/nav_bilder.gif" alt="Bildergalerie"/></a></li>
	</ul>
</div>

<div class="outer1"><div class="outer2"><div class="outer0">

	<div class="wrap-cl">

		<div class="mainBlock"><div class="inmainBlock">
			{CONTENT}
			<p>Sie befinden sich hier: {BREADCRUMB}</p>
		</div></div> <!-- end center div -->

		<div class="leftBlock"><div class="inleftBlock">
			<img src="img/layout/nav_left_top.gif" alt="Camps4you Sprachreisen und Englisch Camps"/>
			{LEFT}
			<img src="img/layout/nav_kontakt.gif" alt="Kontakt mit Camps4you Sprachreisen aufnehmen"/>
			<img src="img/layout/nav_buchen.gif" alt="Online Buchen bei Camps4you Sprachreisen"/>
			<img src="img/layout/nav_broschuere.gif" alt="Camps4you Sprachreisen Broschüre bestellen"/>
			<img src="img/layout/nav_lehrer.gif" alt="Camps4you Sprachreisen - Lehrerzone"/>
		</div></div> <!-- end left div -->

	</div> <!-- end wrap-cl div -->

	<div class="rightBlock"><div class="inrightBlock">
		{RIGHT}
	</div></div> <!-- end right div -->
		
	<br class="clear" />

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

<div class="footerBlock">
	{FOOTER}
</div>
</div>

Code: Select all

.clear {
	clear: both;
}

.container {
	width: 800px;
	margin: 0 auto;
	background-image: url(../../img/layout/nav_left_filler.gif);
	background-repeat: repeat-y;
}

.headerBlock {
	text-align:left;
}
	.headerBlock ul {
		list-style-type:none;
		margin: 0px;
		padding: 0px;
	}
		.headerBlock ul li {
			display:block;
			float: left;
			padding: 0px;
			margin: 0px;
		}	
			.headerBlock ul li a {
				background-repeat: no-repeat;
				float: left;
				text-decoration: none;
				display: block;
			}

			.headerBlock ul li a:hover {
				border: 0;
			}

			.headerBlock ul li a:hover img {
				visibility:hidden;
			}

				li #logo {
					background-image:url(../../img/layout/navtop.gif);
					width: 800px;
					height: 95px;
				}
				li #logo img {
					width: 800px;
					height: 95px;
					border: 0px;
				}
	
				li #camps4you {
					background-image:url(../../img/layout/nav_camps4you_act.gif);
					width:158px; 
					height:62px;
				}
				li #camps4you img {
					width:158px; 
					height:62px;
					border:0;
				}
	
				li #reiseziele {
					background-image:url(../../img/layout/nav_reiseziele_act.gif);
					width:87px; 
					height:62px;
				}
				li #reiseziele img {
					width:87px; 
					height:62px;
					border:0;
				}
	
				li #kursdaten {
					background-image:url(../../img/layout/nav_kursdaten_act.gif);
					width:169px; 
					height:62px;
				}
				li #kursdaten img {
					width:169px; 
					height:62px;
					border:0;
				}
			
				li #preis {
					background-image:url(../../img/layout/nav_preis_act.gif);
					width:148px; 
					height:62px;
				}
				li #preis img {
					width:148px; 
					height:62px;
					border:0;
				}
		
				li #eltern {
					background-image:url(../../img/layout/nav_eltern_act.gif);
					width:106px; 
					height:62px;
				}
				li #eltern img {
					width:106px; 
					height:62px;
					border:0;
				}
			
				li #bilder {
					background-image:url(../../img/layout/nav_bilder_act.gif);
					width:132px; 
					height:62px;
				}
				li #bilder img {
					width:132px; 
					height:62px;
					border:0;
				}	

.mainBlock {
	width: 484px;
	float: right;
}

/*
.inmainBlock {
	width: 100%;
	overflow: hidden;
}
*/

.leftBlock {
	float: left;
	width: 158px;
}

/*
.inleftBlock {
	width: 100%;
	overflow: hidden;
}
*/

.rightBlock {
	float: right;
	width: 158px;
}

/*
.inrightBlock {
	width: 100%;
	overflow: hidden;
}
*/

.footerBlock {
	background-color:#6699CC;
	height:25px;
	text-align:right;
	text-decoration:none;
	color:#FFFFFF;
}

.outer1 {
	margin-left: 158px;
	background-color: Lime;
}

.outer2 {
	margin-right: 158px;
	background-color: Green;
}

.outer0 {
	position: relative;
	margin-left: -158px;
	margin-right: -158px;
}

.wrap-cl {
	float: left;
	width: 642px;
}

Code: Select all

This center col is first in the source, being a right float within a left-floated wrapper. The left col (second in source) is floated right in that same wrapper, and following the wrapper is the left floated right col (third in source.)