Ёж коллекционер (frezero) wrote in ru_css,
Ёж коллекционер
frezero
ru_css

Интерсный способ реализации контентной части.

Недавно посетила идея реализации контентной части, для 2-3-х колоночного макета, без использования скпритового языка. Чем и хотел бы поделиться.

И так, у нас есть стандарный макет из 3-х колонок, левое меню, контентная часть и правая колонка с sбаннерами.
Задача: реализовать практически на чистом css безпрепятственное удаление левой или правой колонки. Без классов.

HTML:



<div id="main">
  <div id="navSecondary">
  </div>
  <div id="content">
    <div class="padder">
    </div>
  </div>
  <div id="feature">
  </div>
</div>


:first-child псевдоселектор, который поддерживает практически всеми браузерами кроме ie6, c :last-child все несколько сложнее:(ie9+,ff 1+, SA3.1+,O 9.5+,CH2+)

CSS:


	  * {margin:0;padding:0;}
		div {height:150px;}

		#navSecondary,
		#feature,
		#content {float:left;position:relative;}

		#navSecondary,
		#feature {z-index:2;width:150px;border:1px solid #f0f;}
		#content {width:100%;position:relative;margin:0 -152px;z-index:1;}
		#content .padder {margin:0 152px;background-color:#0f0;}

		#content:first-child .padder,
		#content:first-child {margin-left:0 !important;}

		#content:last-child .padder,
		#content:last-child {margin-right:0 !important;}
		
		#content.first-child .padder,
		#content.first-child {margin-left:0 !important;}

		#content.last-child .padder,
		#content.last-child {margin-right:0 !important;}

		.ie #content {
			behavior:url(childfixes.htc);
			-ms-behavior:url(childfixes.htc);
		}

childfixes.htc


<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="init()" />
<script>
function init() {
	var el = this;
	var IEver = getInternetExplorerVersion();
	if (IEver < 7.0) {
		initFirstChildPseudoClass(el);
		initLastChildPseudoClass(el);
	}
	if (IEver < 9.0) {
		initLastChildPseudoClass(el);

	}
	
}
function initFirstChildPseudoClass(el) {
	var tmpEl = el,
		isFirst = 1;
	while( tmpEl = tmpEl.previousSibling ) {
		if( tmpEl.nodeType === 1 ) {
			isFirst = 0;
			break;
		}
	}
	if( isFirst ) {
		el.className += ' first-child';
	}
}
function initLastChildPseudoClass(el) {
	var tmpEl = el,
		isLast = 1;
	while( tmpEl = tmpEl.nextSibling ) {
		if( tmpEl.nodeType === 1 ) {
			isLast = 0;
			break;
		}
	}
	if( isLast ) {
		el.className += ' last-child';
	}
}
function getInternetExplorerVersion() {
  var rv = -1;
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}
</script>


Итог:Теперь можно убрать любую колону и контентная часть займет ее место.


UPD: Пощупать можно на jsfiddle.net
  • Post a new comment

    Error

    default userpic
  • 13 comments