Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.
Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.
#grid-helper{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
display:none;
}
#grid-helper .grid-row{
float:left;
height:100%;
width:4.85%;
margin-right:3.8%;
background-color:rgba(185,255,110,0.5);
}
#grid-helper .grid-row.last{
margin-right:0;
}
#grid-trigger{
position:fixed;
top:50%;
right:0;
margin-top:-50px;
background:#000;
color:#fff;
padding:20px;
cursor:pointer;
opacity:0.1;
}
#grid-trigger:hover{
opacity:1.0;
}
function webks_customer_theme_grid_helper() {
(function($) {
$('#page').css('position','relative')
$('#page').append('');
//Trigger
$('body').append('Show / Hide');
$("#grid-trigger").click(function() {
$('#grid-helper').toggle();
});
//Load Stylesheets
$('').appendTo("head");
})(jQuery);
}