Jump to content
RoberrTh0

Sistem grila ( CSS Responsive )

By RoberrTh0, in Programare

Recommended Posts

RoberrTh0 Newbie

RoberrTh0

Posted
Posted

/*

Copyright : RST FORUM

*/

.container-12 { margin:0 auto; width:960px; overflow:hidden; }

.container-12 .container-12 { margin:0 -16px 0 -16px; width:auto; display:inline-block; }

.grila_1 { width:48px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_2 { width:128px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_3 { width:208px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_4 { width:288px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_5 { width:368px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_6 { width:448px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_7 { width:528px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_8 { width:608px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_9 { width:688px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_10 { width:768px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_11 { width:848px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.grila_12 { width:928px; margin:0 16px 0 16px; overflow:hidden; float:left; display:inline; }

.offset_1 { margin-left:96px; }

.offset_2 { margin-left:176px; }

.offset_3 { margin-left:256px; }

.offset_4 { margin-left:336px; }

.offset_5 { margin-left:416px; }

.offset_6 { margin-left:496px; }

.offset_7 { margin-left:576px; }

.offset_8 { margin-left:656px; }

.offset_9 { margin-left:736px; }

.offset_10 { margin-left:816px; }

.offset_11 { margin-left:896px; }

.show-phone { display:none !important; }

.show-tablet { display:none !important; }

.show-screen { display:inherit !important; }

.hide-phone { display:inherit !important; }

.hide-tablet { display:inherit !important; }

.hide-screen { display:none !important; }

/***** Grafica mare ( than 960px ) *****/

@media only screen and (min-width:1200px) {

.container-12 { margin:0 auto; width:1200px; overflow:hidden; }

.container-12 .container-12 { margin:0 -20px 0 -20px; width:auto; display:inline-block; }

.grila_1 { width:60px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_2 { width:160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_3 { width:260px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_4 { width:360px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_5 { width:460px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_6 { width:560px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_7 { width:660px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_8 { width:760px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_9 { width:860px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_10 { width:960px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_11 { width:1060px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.grila_12 { width:1160px; margin:0 20px 0 20px; overflow:hidden; float:left; display:inline; }

.offset_1 { margin-left:120px; }

.offset_2 { margin-left:220px; }

.offset_3 { margin-left:320px; }

.offset_4 { margin-left:420px; }

.offset_5 { margin-left:520px; }

.offset_6 { margin-left:620px; }

.offset_7 { margin-left:720px; }

.offset_8 { margin-left:820px; }

.offset_9 { margin-left:920px; }

.offset_10 { margin-left:1020px; }

.offset_11 { margin-left:1120px; }

.show-phone { display:none !important; }

.show-tablet { display:none !important; }

.show-screen { display:inherit; }

.hide-phone { display:inherit !important; }

.hide-tablet { display:inherit !important; }

.hide-screen { display:none !important; }

}

/***** Tableta (Smaller than 959px) *****/

@media only screen and (min-width: 768px) and (max-width: 959px) {

.container-12 { margin:0 auto; width:768px; overflow:hidden; }

.container-12 .container-12 { margin:0 -14px 0 -14px; width:auto; display:inline-block; }

.grila_1 { width:36px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_2 { width:100px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_3 { width:164px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_4 { width:228px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_5 { width:292px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_6 { width:356px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_7 { width:420px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_8 { width:484px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_9 { width:548px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_10 { width:612px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_11 { width:676px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.grila_12 { width:740px; margin:0 14px 0 14px; overflow:hidden; float:left; display:inline; }

.offset_1 { margin-left:78px; }

.offset_2 { margin-left:142px; }

.offset_3 { margin-left:206px; }

.offset_4 { margin-left:270px; }

.offset_5 { margin-left:334px; }

.offset_6 { margin-left:398px; }

.offset_7 { margin-left:462px; }

.offset_8 { margin-left:526px; }

.offset_9 { margin-left:590px; }

.offset_10 { margin-left:654px; }

.offset_11 { margin-left:718px; }

.show-phone { display:none !important; }

.show-tablet { display:inherit !important; }

.show-screen { display:none !important; }

.hide-phone { display:inherit !important; }

.hide-tablet { display:none !important; }

.hide-screen { display:inherit !important; }

}

/***** Telefon (portrait 300px) *****/

@media only screen and (max-width: 767px) {

.container-12 { margin:0 auto; width:300px; overflow:hidden; }

.container-12 .container-12 { margin:0; width:auto; display:inline-block; }

.grila_1,

.grila_2,

.grila_3,

.grila_4,

.grila_5,

.grila_6,

.grila_7,

.grila_8,

.grila_9,

.grila_10,

.grila_11,

.grila_12 { width:300px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }

.offset_1,

.offset_2,

.offset_3,

.offset_4,

.offset_5,

.offset_6,

.offset_7,

.offset_8,

.offset_9,

.offset_10,

.offset_11 { margin-left:0; }

.show-phone { display:inherit !important; }

.show-tablet { display:none !important; }

.show-screen { display:none !important; }

.hide-phone { display:none !important; }

.hide-tablet { display:inherit !important; }

.hide-screen { display:inherit !important; }

}

/***** Telefon (landscape 420px) *****/

@media only screen and (min-width: 480px) and (max-width: 767px) {

.container-12 { margin:0 auto; width:456px; overflow:hidden; }

.container-12 .container-12 { margin:0; width:auto; display:inline-block; }

.grila_1,

.grila_2,

.grila_3,

.grila_4,

.grila_5,

.grila_6,

.grila_7,

.grila_8,

.grila_9,

.grila_10,

.grila_11,

.grila_12 { width:456px; margin:10px 0 0 0; overflow:hidden; float:left; display:inline; }

.show-phone { display:inherit !important; }

.show-tablet { display:none !important; }

.show-screen { display:none !important; }

.hide-phone { display:none !important; }

.hide-tablet { display:inherit !important; }

.hide-screen { display:inherit !important; }

}

/***** Clean up *****/

.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,

.clearfix:after,

.continer-12:before,

.container-12:after { content:'\0020'; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }

.container-12:after, .clearfix:after { clear:both; }

.container-12,

.clearfix { zoom:1; }

.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; }

HTML

<div class="container-12"> <!-- Container 12 -->

<div class="grila_1>

</div>

<!-- Grila poate fi , 1,2,3,4,5,6,7,8,9,10,11,12 P.S uitate in codu sursa css si vezi width pentru fiecare si o sa-ti dai seama ..... Pentru nelamuriri lasa comentariu -->

</div> <!-- Container 12::END -->

woolckye Newbie

woolckye

Posted
Posted (edited)

Mai mult ca sigur e copy paste ... cu toti stim sa copiem css-ul unei pagini cu tot cu clasele care se folosesc pe una din paginile unui site/forum ... ce e mai greu este de de gasit baza de date si codul php

Nu css-ul si executarea codului php

Edited by woolckye
malsploit Newbie

malsploit

Posted
Posted
Mai mult ca sigur e copy paste ... cu toti stim sa copiem css-ul unei pagini cu tot cu clasele care se folosesc pe una din paginile unui site/forum ... ce e mai greu de de gasit baza de date si codul php

Nu css-ul si executarea codului php

tu intelegi ce scrii acolo?

@RoberrTh0 Data viitoare poti sa folosesti 

 sau [html].

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
Go to topic listing
×
×
  • Create New...