Web Site Yeniden Boyutlandırma
-
iyi akşamlar, bi web sitesi var ama site ekrana geniş olarak yayılmıyor ortalanmış kenarda boşluk kalıyo hep boyutlandırmasını nasıl değiştirebilirim?
css kodları böyle;
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,700,600italic&subset=latin,latin-ext); html, body { font-size:12px; line-height:18px; height: 100%; } body {background: #f9f9f9;} .main-container { height:auto; height: 100%; min-height: 100%; } @media (max-width: 767px) { body { padding-right: 0px; padding-left: 0px; } .container {margin-right: 20px; margin-left: 20px;} } /***** Titles and Headings *****/ h1, h2, h3, h4 , h5, h6 { font-family: 'Josefin Sans', sans-serif; font-weight: bold; text-transform:uppercase; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {color:#7f7f7f;} h2 small {font-size: 30px;} h5 small {font-size: 14px;} h6 small {font-size: 12px;} h5.title-bg button { float: right; text-transform: none; margin-left:5px; } /***** Links *****/ a, a:hover { color:#3F3F3F; } /***** Misc *****/ i {margin-right: 3px;} p {margin-bottom: 20px;} blockquote { font-size:16px; line-height:24px; font-family: 'Josefin Sans', sans-serif; font-style:italic; border-left: 5px solid #999; } blockquote.pull-right {border-right: 5px solid #999;} /************************************** / Header **************************************/ .logo { margin-top:40px; } .logo img { padding-right:20px; } .logo h5 { display: inline-block; } .headline { margin-bottom:20px; } /* Landscape phones and down */ @media (max-width: 480px) { .logo, .navigation {text-align: center;} .row.header {margin-bottom: 30px;} .logo h5 {display: block;} } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 1199px) { .headline .lead {display: none;} } .navigation { margin-top:40px; } .navigation .navbar { float:right; background:#f8f8f8; border-bottom: 1px dotted #a9a9a9; border-top: 1px dotted #a9a9a9; } .navbar .nav > li > a { font-family: 'Josefin Sans', sans-serif; font-weight: normal; text-shadow: none; text-transform:uppercase; font-size:12px; padding: 10px 15px 10px; } /* Portrait tablet */ @media (min-width: 768px) and (max-width: 979px) { .navbar .nav > li > a {padding: 10px 10px 10px;} } .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus { color:#FFF; background-color:#3F3F3F; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle { color:#FFF; background-color:#3F3F3F; } ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; } .dropdown-menu{ font-family: 'Josefin Sans', sans-serif; font-weight: normal; text-transform:uppercase; font-size:10px; padding: 0px; margin: 0px; background-color: #383838; border: none; *border-right-width: none; *border-bottom-width: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-background-clip: none; -moz-background-clip: none; background-clip: none; } .navbar .nav > li > .dropdown-menu:before { border-right: 0px; border-bottom: 0px; border-left: 0px; border-bottom-color: none; } .dropdown-menu a { color: #ababab; border-bottom:1px solid #474747; padding: 10px 10px; margin:0px 10px; } .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a { color: #f9f9f9; text-decoration: none; background-color: #383838; background-image: none; filter: none; } .navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { border-top-color: #fff; border-bottom-color: #fff; } .navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after { display: none; } /************************************** / Slider **************************************/ .carousel-caption h4 { font-size: 14px; text-shadow:none; } .carousel-caption {background: url(../img/post-item-hover.png);} .carousel-control {border: none; top: 177px;} /************************************** / Gallery **************************************/ .gallery-title { margin-bottom:15px; } .gallery-item { margin-bottom:15px; margin-top:15px; } .gallery-hover-6col, .gallery-hover-4col, .gallery-hover-3col, .gallery-hover-4col-cir { display:none; background:url(../img/gallery-item-hover.png); position:absolute; z-index: 10; } .gallery-hover-4col-cir{ -webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px; } /* Large Desktop Size */ @media (min-width: 1200px) { .gallery-hover-6col {width:170px; height:139px;} .gallery-hover-4col {width:270px; height:220px;} .gallery-hover-3col {width:370px; height:300px;} .gallery-hover-4col-cir {width:270px; height:270px;} .gallery-hover-4col-cir .gallery-icons {top: 45%; left:34%;} } /* Small Desktop Size */ @media (min-width: 980px) and (max-width: 1199px) { .gallery-hover-6col {width:140px; height:114px;} .gallery-hover-4col {width:220px; height:180px;} .gallery-hover-3col {width:300px; height:243px;} .gallery-hover-4col-cir {width:220px; height:220px;} .gallery-hover-4col-cir .gallery-icons {top: 42%; left:29%;} /* Clip descriptions */ li.span4 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 280px; } li.span3 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 200px; } li.span2 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 120px; } } /* Portrait tablet to landscape */ @media (min-width: 768px) and (max-width: 979px) { /* Clip descriptions */ li.span2 .project-details {display:none;} li.span3 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 146px; } li.span4 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 208px; } } /* Landscape phones and down */ @media (max-width: 480px) { .project-details {width: 250px; text-align: center} .gallery-post-grid {text-align: center} .project-details {margin-left:auto; margin-right: auto;} .gallery {text-align: center; } .gallery-cats { display: none;} li.span2 .project-details { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 150px; } } /* Mobile Landscape Size */ @media only screen and (min-width: 480px) and (max-width: 767px) { li.span4 .project-details {width:350px;} } /* Mobile Portrait Size */ @media only screen and (max-width: 479px) { li.span4 .project-details {width:260px;} } .project-details { background:#f8f8f8; display: block; padding:10px; border-bottom: 1px dotted #a9a9a9; font-style: italic; width: auto\9; height: auto; max-width: 100%; } .project-details a { margin: 0px; font-size: 12px; font-style: normal; text-shadow:none; display: block; font-family: 'Josefin Sans', sans-serif; font-weight: normal; text-transform:uppercase; } .project-details {color: #6f6f6f;} .project-details a {color: #333333;} .project-details a:hover {color:#3F3F3F; text-decoration: none;} .project-info {margin: 0px 0px 40px 0px;} .project-info li { list-style: none; border-bottom: 1px dashed #a9a9a9;; padding: 10px; } .project-info li h6 {display: inline; margin-right: 5px;} .gallery-icons { z-index: 9; position:absolute; bottom: 0px; right: 0px; width: 89px; height: 42px; display: block; } a.item-zoom-link { height: 42px; width: 42px; background: #ffffff url(../img/gallery-item-icons.png) no-repeat; background-position: 0px 0px; position:absolute; display: block; } a.item-details-link { height: 42px; width: 42px; background: #ffffff url(../img/gallery-item-icons.png) no-repeat; background-position: -42px 0px; position:absolute; left: 47px; display: block; } a.item-zoom-link:hover {background: #3F3F3F url(../img/gallery-item-icons.png) no-repeat;} a.item-details-link:hover {background: #3F3F3F url(../img/gallery-item-icons.png) no-repeat; background-position: -42px 0px;} .gallery-post-grid {margin:0px;} .gallery-post-grid li {list-style: none; float: left; margin-bottom: 30px;} .gallery-cats {margin: 0px 0px 20px 0px;} .gallery-cats li{ list-style: none; float: left; padding: 0px 10px; border-left: 1px dotted #a9a9a9; } .gallery-cats li:first-child{border-left:0px;} /************************************** / Blog **************************************/ /*** Blog on Home Page ***/ .blog-summary {line-height: 18px;} .post-info-shade { background:#f8f8f8; } .post-info { line-height:20px; padding-top:10px; } .post-info h4 {line-height: 26px; margin-top: 0px;} .post-info h4 a, .post-info h4 a:hover {color:#333; text-decoration: none;} .post-info ul li {list-style: none; padding-bottom: 2px; margin: 0px;} .post-preview {line-height: 20px;} /* All Sizes up to Large Desktop */ @media only screen and (max-width: 1199px) { .post-info h4 {clear:both;} .blog-details-preview {display: none; border:1px solid #000;} } /*** Blog List Page ***/ .blog article, .blog section {margin-bottom: 40px;} .blog article h3 {margin-top: 0px;} .blog article h3 a, .blog article h4 a, .blog article h3 a:hover, .blog article h4 a:hover {color:#333333; text-decoration: none;} .blog h4 {line-height: 26px;} /* Mobile Landscape Size */ @media only screen and (max-width: 479px) { .blog h4 {width:260px;} } .post-summary {background: #f8f8f8; padding-bottom: 20px; overflow: auto;} .post-summary p {padding:20px; margin:0px;} .post-summary-footer {margin: 0px; padding:0px 20px;} .post-summary-footer button {margin: 0px; float:left;} ul.post-data {float:right;} ul.post-data-3 {margin-top:20px;} ul.post-data li, ul.post-data-3 li { list-style: none; float: left; padding: 0px 10px; border-left: 1px dotted #a9a9a9; } ul.post-data li:first-child, ul.post-data-3 li:first-child {border: none; padding-left: 0px;} ul.post-data li:last-child {padding-right: 0px;} /* Small Desktop Size */ @media (min-width: 980px) and (max-width: 1199px) { ul.post-data-3 li:last-child {display: none;} } /* Portrait tablet */ @media (min-width: 768px) and (max-width: 979px) { .post-summary-footer button {float: none; margin-bottom: 20px;} .blog article button {float: left; clear: both; margin-bottom: 20px;} ul.post-data-3 {display: none;} ul.post-data {float: none; clear: both; margin: 0px;} ul.post-data li:last-child { -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow:hidden; white-space:nowrap; width: 120px; } } .blog-style-2 h4 {margin-top:0px; margin-bottom: 10px;} .blog-style-2 ul.post-data {margin:0px 0px 20px 0px;} .blog-style-2 ul.post-data li { float: none; margin:0px; padding: 5px 0px 0px 0px; border: none; } .blog-post-grid {margin:0px;} .blog-post-grid li {list-style: none; float: left; margin-bottom: 30px;} .blog-post-hover { display:none; width:270px; height:220px; background:url(../img/post-item-hover.png); position:absolute; z-index: 10; } .blog-post-hover p{ color: #f8f8f8; padding:20px; font-style: italic; } .blog-post-hover a{ font-family: 'Josefin Sans', sans-serif; font-weight: normal; text-transform:uppercase; font-size: 28px; line-height: 32px; font-style: normal; color: #f8f8f8; } .blog-post-hover a:hover{ text-decoration: none; color: #3F3F3F;} @media (min-width: 768px) and (max-width: 1199px) { .blog-post-hover {width:220px; height:179px;} .blog-post-hover a{ font-size: 20px; line-height: 24px;} } /* All Mobile Sizes */ @media only screen and (max-width: 767px) { .post-summary-footer{display: none;} .post-summary{padding-bottom: 0px;} .blog-style-2 {display: none;} } /*** Blog Full Page ***/ .post-content {background: #f8f8f8; overflow: auto;} .post-body {padding: 20px;} .about-author img {float: left; margin-right: 20px;} /*** Comments ***/ .comments ul {margin:0px;} .comments ul li { list-style: none; padding: 20px; background: #f8f8f8; margin-bottom: 40px; border-bottom: 1px dotted #a9a9a9; border-top: 1px dotted #a9a9a9; } .comments ul li ul {margin-left:40px; padding-top: 20px;} .comments ul li ul li { border-top: 1px dotted #a9a9a9; border-bottom: none; padding: 20px 20px; margin-bottom:0px; } .comments ul li ul li:last-child {padding-bottom: 0px;} .comments ul li img {margin:0px 10px 10px 0px;} .comment-name { font-weight: normal; text-transform:uppercase; } .comment-date { font-style: italic; clear: both; } .comment-content { clear:both; padding-top:10px; } .comment-form-container input, #contact-form input {margin-bottom: 12px;} .comment-form-container textarea, #contact-form textarea {height: 150px;} .comment-form-container .btn, #contact-form .btn {margin-top: 12px;} /************************************** / Sidebar **************************************/ .sidebar input{width: 80%;} .sidebar h5 {margin-top: 40px;} .sidebar ul.post-category-list, .sidebar .tab-content .tab-pane ul {margin:0px;} .sidebar ul.post-category-list li, .sidebar .tab-content .tab-pane ul li { list-style: none; border-bottom: 1px dashed #a9a9a9; padding:10px 5px; } .sidebar ul.post-category-list li a{ font-weight: normal; text-transform:uppercase; } .sidebar ul.post-category-list li:first-child, .sidebar .tab-content .tab-pane ul li:first-child{ padding-top: 0px; } .sidebar ul.post-category-list li:last-child { padding-bottom: 0px; border-bottom:none; } .sidebar ul.post-category-list li i {padding-right: 5px; background-position: 0 -95px;} .sidebar .tab-content .tab-pane ul li i {padding-right: 5px;} .popular-posts{ margin: 0px;} .popular-posts li { list-style: none; margin-bottom: 20px; clear: both; display: block; min-height: 70px; } .popular-posts li a, .popular-posts li a:hover {color:#333333; text-decoration: none;} .popular-posts li img {float: left; margin-right: 20px;} .popular-posts li em { } p.side {margin-bottom: 20px;} /* Mobile Portrait and Landscape Size */ @media only screen and (max-width: 479px) { iframe {width:270px;} } /* Tablet */ @media (min-width: 768px) and (max-width: 979px) { iframe {width:230px;} } /* Small Desktop Size */ @media (min-width: 980px) and (max-width: 1199px) { iframe {width:300px;} } /************************************** / Footer **************************************/ .footer-container { width:100%; background:#333; clear: both; position: relative; z-index: 10; } .footer-row { margin-top: 30px;} .footer-col {color:#ababab; font-size: 11px;} .footer-col a {color:#dcdcdc; font-weight: bold;} .footer-col a:hover {color:#3F3F3F; text-decoration: none;} .footer-col h5, .footer-col strong {color:#f9f9f9; text-shadow:none;} .footer-col h5 {margin-bottom: 25px;} .footer-col ul {margin: 0px;} .footer-col ul li {list-style: none; padding-bottom: 20px;} .footer-col ul.post-list li { border-bottom: 1px dashed #504f4f; padding: 10px 0px; } /* All Mobile Sizes */ @media only screen and (max-width: 767px) { .footer-col { clear:both; overflow: auto; margin-bottom: 20px; } .footer-sub .right {display: none;} } ul.img-feed li { float: left; margin: 0px 7px 7px 0px; padding-bottom: 0px; } /* Portrait tablet */ @media (min-width: 768px) and (max-width: 979px) { ul.img-feed li:nth-last-child(-n+4) {display: none;} } /**** Social Icons ****/ .social-icons {padding-top: 10px;} .social-icons li { list-style: none; float: left; margin-right: 6px; } /* Small Monitor */ @media (min-width: 980px) and (max-width: 1199px) { .social-icons li:last-child {display:none;} } a.social-icon { background: url(../img/sosyal.png); display: block; width: 46px; height: 46px; } a.facebook {background-position: 0px 0px;} a.facebook:hover {background-position: 0px -47px;} a.twitter{background-position: -52px 0px;} a.twitter:hover {background-position: -52px -47px;} a.dribble{background-position: -104px 0px;} a.dribble:hover {background-position: -104px -47px;} a.rss{background-position: -156px 0px;} a.rss:hover {background-position: -156px -47px;} a.forrst{background-position: -208px 0px;} a.forrst:hover {background-position: -208px -47px;} /**** Sub Footer ****/ .footer-sub {background: #1f1f1f; padding: 10px 0px;} .footer-sub div div span {padding: 0px 20px;} /************************************** / MISC **************************************/ .row {margin-bottom:40px;} .sub-row30 {margin-bottom:30px;} .sub-row20 {margin-bottom:20px;} .no-margin {margin-bottom:0px;} a.accordion-toggle{background: #f5f5f5;} .nav-tabs li.active a{background:#f8f8f8;} @media only screen and (max-width: 767px) { .btn {margin-bottom: 20px;} } .left {float: left;} .right {float: right;} .align-left{float: left; margin: 0px 20px 20px 0px;} .align-right{float: right; margin: 0px 0px 20px 20px;} .color-bg { background:#3F3F3F; } .color { color:#3F3F3F; } .color-bar-1, .color-bar-2 { width:100% } .color-bar-1 { background:#414141; height:5px; } .color-bar-2 { height:3px; } .page-header { margin:0px } .lead {line-height:28px; margin: 20px 0px 30px 0px; } #toTop { width:47px; height:47px; background:url(../img/back-top-btn.png) no-repeat; text-align:center; position:fixed; bottom:25px; right:20px; cursor:pointer; display:none; text-indent:-9999px; z-index:12; } /***** Lightbox *****/ #lightbox-image-details-caption { font-family: 'Josefin Sans', sans-serif; font-weight: normal; text-transform:uppercase; font-size: 14px; } #lightbox-secNav-btnClose {width: 30px; padding-bottom: 0;} #lightbox-image-details-currentNumber {display: none; visibility: hidden;} /***** Testimonials *****/ .quote-text { font-size:16px; line-height:24px; font-family: 'Josefin Sans', sans-serif; font-style:italic; margin:0px 20px; } .quote-text cite { font-size:12px; color:#999; display:block; margin-top:5px; } #clientCarousel.carousel .item { background: #f9f9f9; padding:20px 0px; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; left: 0 !important; } #clientCarousel.carousel .next.left, .carousel .prev.right { opacity: 1; z-index: 1; } #clientCarousel.carousel .active.left, .carousel .active.right { opacity: 0; z-index: 2; } /***** Client Logos *****/ .client-link { display: block; width: 100px; height: 100px; position: relative; } .client-mask { display: block; width: 100px; height: 100px; position: absolute; background: url(../img/rnd-client-mask.png); } .client-logos {margin: 20px 0px 0px 0px;} .client-logos li {list-style: none; float: left; margin: 9px 16px;} /* Small Monitor */ @media (min-width: 980px) and (max-width: 1199px) { .client-logos li:first-child {display: none;} } /* Portrait tablet */ @media (min-width: 768px) and (max-width: 979px) { .client-logos li:nth-last-child(-n+2) {display: none;} } /***** Features Page (these can be deleted)*****/ .the-grid div { background: #e4e4e4; padding:10px 0px; text-align: center; } .form-examples input { margin-bottom: 10px;} .the-icons {list-style: none; margin-left: 0;} .the-icons li {float: left; width: 25%; line-height: 25px;} /* Mobile Portrait Size to Tablet Portrait Size */ @media only screen and (max-width: 767px) { .the-icons li {float: none; width: 100%; line-height: 25px;} }
-
Bu gönderdiğin direk CSS. Aşağıdaki ana bölümde herşey normal gibi görünüyor. Bu stilleri kullandığın div bölümlerini görmek için kullandığın sayfayı da incelemek gerekir. index.asp, php, html her ne ise...
html, body { font-size:12px; line-height:18px; height: 100%; } body {background: #f9f9f9;} .main-container { height:auto; height: 100%; min-height: 100%; }