Jump to content

Cum pot lati aceasta imagine?


Tr0YB0Y

Recommended Posts

 

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

Link to comment
Share on other sites

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

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