Posts Under: HTML & CSS

Cum se poate avea footer fix

februarie 13, 2013 HTML & CSS 2 comments

cod-cssDacă site-ul necesită un footer fix, din start trebuie gândită întreaga structura asfel încât să existe două mari părți alte structurii html, adică două divuri: un div va conține footer-ul iar celălalt div va conține tot ce este deasupra footer-ului.

O observație: footerul fix poate fi fix relativ la ecran, caz în care va fi în permanență în partea de jos a ecranului, evident suprapunându-se peste texte sau footerul va fi fix relativ la conținut, astfel dacă conținutul ocupă o mică parte din ecran footerul va fi în partea de jos vizibil, dacă conținutul se întinde pe mai multe ecrane, footerul va fi în partea de jos, așa cum și este de obicei. E importantă această distincție.

Primul caz: footer aliniat jos vizibil în permanență:

<style type="text/css">
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* Pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
</style>
<script type="text/javascript">
function setnewcontentheight(){
	$("#inhalt").height(Math.max($(window).height()-$("#footer").height(),$('#inhalt').height()));
}

$(window).resize(function(){
	setnewcontentheight();
});

$(document).ready(function() {
	setnewcontentheight();
});
</script>

Același caz fără JavaScript, doar CSS:

#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:30px;
    width:100%;
    background:#999;
}
/* pentru ie6*/
* html #footer{
    position:absolute;
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Al doilea caz: footer în permanență în josul conținutului

*{margin:0;}
html, body {
	height: 100%;
}
#inhalt {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -30px;
}
#footer, #clearfooter {
	height: 30px;
}
<div id="inahlt">Inhalt <div id="clearfooter"></div></div>
<div id="footer">Footer</div>

Sursa: flashjunior.ch/school

Ce este CSS Grid System?

noiembrie 29, 2012 HTML & CSS no comments

O mică introducere în Grid System.

Ideea din spatele acestor sistem de ghidaj este o mai bună și mai eficientă structurare a designului. Organizare ce se concretizează printr-o mai bună utilizare a conținutului de către utilizatori, o sporire a experinței vizuale a vizitatorilor. Un alt mare avantaj este dat de mai buna structurare a codului (HTML și CSS), ceea ce face munca de întreținere și modificare a codului de către dezvoltatori să fie mai ușoară, mai rapidă și mai eficientă.

Bibliografie: