Jump to content

Cum pot lati aceasta imagine?

Tr0YB0Y

By +Tr0YB0Y
in IP.Board 3.x

 Share

Recommended Posts

Tr0YB0Y Community Regular

+Tr0YB0Y

Posted
Posted

Cum pot lati aceasta imagine cu tot cu bara de sus? Am incercat multe modalitati, incepand de la inspectorare element pana la fiecare detaliu in parte, am luat fiecare script CSS, am sters, am adaugat la loc, tot nu am gasit... 

qASzqFn.png

Xep Rising Star

+Xep

Posted
Posted

 

modifica 

.wrapper {
    margin: 0 auto;
    width: 96%;
    min-width: 990px;
    max-width: 1500px;
}

cu 

.wrapper {
    margin: 0 auto;
    width: 100%;
    min-width: 990px;
    max-width: 1500px;
}

Si puntru butoanele la meniul de sus ai urmatoarea linie 

@media screen and (min-width: 978px)
.hoc {
    max-width: 978px;
}

Daca vrei numai partea de sus sa fie 100% dar nu si restul forumului atunci trebuie sa schimbi class-ul

ps. inspect element face minuni, ti-am gasit forumul in conversatiile de pe skype :)

Frumos design :)

  • Upvote 1

 

Skype: marianbl7

Tr0YB0Y Community Regular

+Tr0YB0Y

Posted
  • Author
Posted (edited)

Frumos frumos :)) acum avem o problema, si eu am gasit scriptul .wrapper in inspectorare element dar in css-ul headerului n-am gasit nimic :)) 

Am adaugat in CSS: 

.wrapper {
    margin: 0 auto;
    width: 100%;
    min-width: 990px;
    max-width: 1500px;
}

si s-a latit tot forumul cu tot cu imagine :)) 

header.css:

Spoiler 

@import url("fontawesome-4.4.0.min.css");

@import url("college-font.css");

@import url("framework.css");





/* Rows

--------------------------------------------------------------------------------------------------------------- */

.row0{border:solid; border-width:5px 0 0 0;}

.row1{border:solid; border-width:1px 0 0 0;}

.row1, .row1 a{}

.row2, .row2 a{}

.row3, .row3 a{}

.row4, .row4 a{}

.row5, .row5 a{}





/* Top Bar

--------------------------------------------------------------------------------------------------------------- */

#topbar{padding:5px 0; font-size:12px;}



#topbar .fl_left{margin-top:4px;}

#topbar .fl_left .inline > li i{margin:0 5px 0 0; line-height:normal;}



#topbar .faico li{margin:0;}





/* Header

--------------------------------------------------------------------------------------------------------------- */

#header{padding:30px 0 0 0;}



#header #logo{margin-top:;}

#header #logo h1{margin:0; padding:0; font-size:22px; text-transform:uppercase;}





/* Sub Pages

--------------------------------------------------------------------------------------------------------------- */

#pagetitle{padding:80px 0 0 0;}

#pagetitle *{margin:0; padding:0;}





/* Homepage Specific

--------------------------------------------------------------------------------------------------------------- */

#pageintro{padding:160px 0 300px;}

#pageintro article{display:block; max-width:100%; margin:0 auto; padding:0; text-align:center;}/* Top  also takes the container class into consideration */

#pageintro article *{margin:0;}

#pageintro article .heading{margin-bottom:30px; font-size:25px;}

#pageintro article .underline::after{margin-top:20px;}

#pageintro article p{margin-bottom:50px; font-size:16px; line-height:1.4;}

#pageintro article footer{margin-bottom:0;}

#pageintro article footer .btn{margin-bottom:0;}


#introblocks{position:relative; margin:-120px auto 0; z-index:1;}

#introblocks ul{display:table; width:100%; height:100%;}

#introblocks ul, #introblocks ul li{border:none;}

#introblocks ul li{display:table-cell; position:relative; width:25%; height:100%; padding:7% 2% 3%; text-align:center;}

#introblocks ul li:last-child{}

#introblocks ul li *{margin:0; padding:0;}

#introblocks ul li article{}

#introblocks ul li article i{border-radius:50% 0; position:absolute; top:0; left:50%; width:80px; height:80px; line-height:80px; margin:-40px 0 0 -40px; text-align:center;}

#introblocks ul li article .fa{font-size:38px;}

#introblocks ul li article .clg{font-size:42px;}



#introblocks ul li article .heading{margin-bottom:30px; font-size:1.2rem;}





/* Content Area

--------------------------------------------------------------------------------------------------------------- */

.container{padding:80px 0;}



/* Content */

.container .content{}



#join{display:block; padding:30px;}

#join article p:last-of-type{margin-bottom:30px;}



/* Comments */

#comments ul{margin:0 0 40px 0; padding:0; list-style:none;}

#comments li{margin:0 0 10px 0; padding:15px;}

#comments .avatar{float:right; margin:0 0 10px 10px; padding:3px; border:1px solid;}

#comments address{font-weight:bold;}

#comments time{font-size:smaller;}

#comments .comcont{display:block; margin:0; padding:0;}

#comments .comcont p{margin:10px 5px 10px 0; padding:0;}



#comments form{display:block; width:100%;}

#comments input, #comments textarea{width:100%; padding:10px; border:1px solid;}

#comments textarea{overflow:auto;}

#comments div{margin-bottom:15px;}

#comments input[type="submit"], #comments input[type="reset"]{display:inline-block; width:auto; min-width:150px; margin:0; padding:8px 5px; cursor:pointer;}



/* Sidebar */

.container .sidebar{}



.sidebar .sdb_holder{margin-bottom:50px;}

.sidebar .sdb_holder:last-child{margin-bottom:0;}





/* Quick Links

--------------------------------------------------------------------------------------------------------------- */

#quicklinks{}



#quicklinks .ui-accordion{}/* main  */

#quicklinks .ui-accordion .ui-accordion-header{display:block; width:100%; margin:0; padding:50px 0; text-align:center; font-size:1.4rem; text-transform:uppercase;}/* toggle */

#quicklinks .ui-accordion .ui-accordion-header::before, #quicklinks .ui-accordion .ui-accordion-header::after{float:left; font-family:"FontAwesome"; font-size:inherit; content:"\f078";}

#quicklinks .ui-accordion .ui-accordion-header::after{float:right;}

#quicklinks .ui-accordion .ui-accordion-header-active::before, #quicklinks .ui-accordion .ui-accordion-header-active::after{content:"\f077";}

#quicklinks .ui-accordion .ui-accordion-content{display:block; width:100%; padding:0 0 40px 0; border:solid; border-width:0 0 1px 0;}/* Content wrapper */



#quicklinks .linkblock div{margin-bottom:0;}/* Required for smaller viewports when elements stack */



#quicklinks ul{margin:0; padding:0; list-style-position:inside;}

#quicklinks li{margin-bottom:10px;}





/* Featured

--------------------------------------------------------------------------------------------------------------- */

#featured{}



#featured article img, #featured article .heading{margin-bottom:20px;}

#featured article:last-child{margin-bottom:0;}/* Required for smaller viewports when elements stack */



#featured .meta{margin:0 0 30px 0; padding:20px 0 0 0; list-style:none; border:solid; border-width:1px 0 0 0;}

#featured .meta li{display:inline-block; margin:0 10px 0 0; line-height:1; font-size:.8rem;}

#featured .meta li:nth-child(-n+2){display:block; margin:0 0 10px 0; font-size:1rem;}/* First 2 li elements only */

#featured .meta li:nth-child(2){margin-bottom:30px;}



/* Transition Fade

--------------------------------------------------------------------------------------------------------------- */

*, *::before, *::after{transition:all .3s ease-in-out;}

.accordion, .accordion *, .accordion *::before, .accordion *::after{transition:none !important;}





/* Font Awesome Social Icons

--------------------------------------------------------------------------------------------------------------- */

.faico{margin:0; padding:0; list-style:none;}

.faico li{display:inline-block; float:left; margin:0 2px 0 0; padding:0; line-height:normal;}

.faico li:last-child{margin-right:0;}



.faico a{display:inline-block; width:30px; height:30px; line-height:30px; font-size:14px; text-align:center;}

.faico a{color:inherit; background-color:transparent;}



.faicon-dribble:hover{color:#EA4C89;}

.faicon-facebook:hover{color:#3B5998;}

.faicon-google-plus:hover{color:#DB4A39;}

.faicon-linkedin:hover{color:#0E76A8;}

.faicon-pinterest:hover{color:#C8232C;}

.faicon-rss:hover{color:#EE802F;}

.faicon-twitter:hover{color:#00ACEE;}




/* Culori

--------------------------------------------------------------------------------------------------------------- */

body{color:#AAAAAA; background-color:#1E252B;}

a{color:#5B9BBD;}

a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */

hr, .borderedbox, .boxed{border-color:#D7D7D7;}

label span{color:#FF0000; background-color:inherit;}

input:focus, textarea:focus, *:required:focus{border-color:#5B9BBD;}



.overlay{color:#FFFFFF; background-color:inherit;}

.overlay::after{color:inherit; background-color:rgba(0,0,0,.45);}

.overlay.coloured::after{color:inherit; background-color:rgba(104,189,91,.65);}/* #68BD5B */

.overlay .underline::after{background-color:#FFFFFF;}



.btn{color:inherit; background-color:transparent; border-color:inherit;}

.btn:hover{color:#FFFFFF; background-color:#68BD5B; border-color:#68BD5B;}



.infolist li{border-color:#D7D7D7;}

.infolist li div:first-of-type time{color:#FFFFFF; background-color:#252C34;}

/* Month name colour pre-set + the choice of adding specific header colours for different months (3 provided as examples) */

.infolist li div:first-of-type time strong{background-color:#5B9BBD;}

.infolist li div:first-of-type time[data-title*="April"] strong{background-color:#dcc55b;}/*Green*/

.infolist li div:first-of-type time[data-title*="May"] strong{background-color:#FF7659;}/*Orange*/

.infolist li div:first-of-type time[data-title*="June"] strong{background-color:#9771BD;}/*Purple*/





/* Rows */

.row0{color:#FFFFFF; background-color:#252C34; border-color:#5B9BBD;}

.row1{color:#888888; background-color:#F9F9F9; border-color:#D7D7D7;}

.row2, .row2 a{}

.row3{color:#888888;background-color:#FFFFFF;}

.row4, .row4 a{color:#AAAAAA; background-color:#27D18D;}

.row4 a{color:#FFFFFF;}

.row4 a:hover{color:#5B9BBD;}

.row5, .row5 a{color:#AAAAAA; background-color:#1E252B;}





/* Top Bar */

#topbar .fl_left a{color:inherit;}

#topbar .fl_left a:hover{color:#5B9BBD;}





/* Header */

#header #logo a{color:inherit;}





/* Homepage Specific */

#introblocks ul li, #introblocks ul li a, #introblocks ul li a i{color:#FFFFFF;}

#introblocks ul li:hover a{color:#13171C;}

#introblocks ul li:nth-child(1){background-color:#dcc55b;}/*Galben*/

#introblocks ul li:nth-child(2){background-color:#55DEA8;}/*Verde*/

#introblocks ul li:nth-child(3){background-color:#9771BD;}/*Purple*/

#introblocks ul li:nth-child(4){background-color:#55CEC8;}/*Albastru*/

#introblocks ul li:nth-child(1) i{background-color:#CEB855;}/*Galben inchis*/

#introblocks ul li:nth-child(2) i{background-color:#27D18D;}/*Verde inchis*/

#introblocks ul li:nth-child(3) i{background-color:#8456B1;}/*Dark Purple*/

#introblocks ul li:nth-child(4) i{background-color:#4FC0BA;}/*Albastru inchis*/

/* 3D Shadow only works in modern browsers - inpired by http://markdotto.com/playground/3d-text/ */

#introblocks li:hover i{box-shadow:2px 2px 5px rgba(0,0,0,.3); text-shadow:0 1px 0 #CCCCCC, 0 2px 0 #666666, 0 3px 0 #000000, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25);}

#introblocks .underline::after{background-color:#FFFFFF;}








/* Max Wrapper Width - Laptop, Desktop etc.

--------------------------------------------------------------------------------------------------------------- */

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

	.hoc{max-width:978px;}

}

 

 

Iar in framework.css:

Spoiler 

.bold{font-weight:bold;}

.center{text-align:center;}

.uppercase{text-transform:uppercase;}

.block, .boxed{display:block;}

.capitalise{text-transform:capitalize;}

.hidden{display:none;}

.nospace{margin:0; padding:0; list-style:none;}

.inline *{display:inline-block;}

.inline *:last-child{margin-right:0;}

.pushright li{margin-right:20px;}

.pushright li:last-child{margin-right:0;}

.borderedbox, .boxed{border:1px solid;}

.overlay{position:relative; z-index:1;}

.overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;}

.bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;}

.circle{border-radius:50%; background-clip:padding-box;}



.btn{display:inline-block; padding:15px 25px 17px; text-transform:uppercase; border:1px solid;}

.btn.medium{padding:10px 20px 12px;}

.btn.small{padding:8px 18px 10px; text-transform:none;}





.infolist, .infolist ul{margin:0; padding:0; list-style:none; line-height:1;}

.infolist li{display:block; position:relative; min-height:80px; margin:0 0 20px 0; padding:0 0 10px 80px; border-bottom:1px solid;}

.infolist li:last-child{margin:0;}

.boxed .infolist > li:last-child{min-height:60px; padding-bottom:0; border:none;}

.infolist li::before, .infolist li::after{display:table; content:"";}

.infolist li, .infolist li::after{clear:both;}

.infolist li *{margin:0;}

.infolist li > div:first-of-type{display:block; position:absolute; top:0; left:0; width:60px; height:60px; overflow:hidden;}

.infolist li > div:first-of-type img{width:60px; height:60px;}

.infolist li > div:first-of-type time{display:block; width:60px; height:60px; text-align:center; text-transform:uppercase; font-weight:700;}

.infolist li > div:first-of-type time strong{display:block; width:100%; height:20px; line-height:20px; font-size:.85rem;}

.infolist li > div:first-of-type time em{display:block; width:100%; height:40px; line-height:40px; font-size:1.2rem; font-style:normal;}

.infolist li > div:last-of-type{}

.infolist li ul{margin-top:8px;}

.infolist li li{display:block; min-height:0; margin:0 0 8px 0; padding:0; border:none;}

.infolist li > div:last-of-type li i{margin-right:5px;}

.infolist li li, .infolist li p{font-size:.85rem;}

.infolist li p{margin-top:8px; line-height:1.2;}



.clear, .group{display:block;}

.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}

.clear, .clear::after, .group, .group::after{clear:both;}




a{outline:none; text-decoration:none;}



.fl_left, .imgl{float:left;}

.fl_right, .imgr{float:right;}






.hoc{display:block; margin:0 auto;}

 

 

Edited by gadeas
Adaugate spoilere

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.