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 -->

Link to comment
Share on other sites
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
Link to comment
Share on other sites
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].
Link to comment
Share on other sites

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...