Üye Girişi
Bağlan Google+ ile Bağlan Facebook ile Bağlan
Yeni Kayıt
Tüm Forumlar
  • Tüm Forumlar
  • Web Tasarım - Programlama
  • Tasarım ve grafik
  • Web Tasarım ve Hazır Kodlar
  • Bu Konuda
Şimdi Ara

websitesi 100% olmama durumu hakkında

Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
5 sn
4
Cevap
0
Favori
909
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
Konuya Özel
0 oy
Öne Çıkar
Cevapla
Sayfa: 1
Giriş
Mesaj
  • Merhabalar,

    örnek bir çalışma üzerinde işlemler yapmaktayım problemim telefonlarda ve tabletlerde sayfa 100% olması gerekirken sola yaslı şekilde sağdan 25px kadar boşluk bulunmakta sizce bunun nedeni ne olabilir. windowslarda 100% tam ekran görünmekte. aşağıdaki resimlerde görüldüğü üzere.

    önerileriniz için teşekkürler
    websitesi 100% olmama durumu hakkında 







  • @media only screen and (min-width: 1025px) and (max-width: 1050px){ 
      	#header, 
      	.nav-inner, 
      	.content-inner, 
      	.footer-inner, 
      	.header_bottom,  
      	.footer_bottom_inner{ width:980px; } 
      	.product-list .right{width:330px;} 
      	.category-info .images img{width:100%;} 
      	#footer .custom_footer_main{width:231px;} 
      	 
      } 
      @media only screen and (min-width: 980px) and (max-width: 1024px) { 
      	#header, 
      	.nav-inner, 
      	.content-inner, 
      	.footer-inner, 
      	.header_bottom,  
      	.footer_bottom_inner{ width:940px; } 
      	#column-left, #column-right { width:180px;} 
      	#column-left + #column-right + #content, #column-left + #content { margin-left: 190px; } 
      	#column-right + #content { margin-right: 190px; } 
      	#footer .column{ width:224px; } 
      	.nav-responsive , .toggle .mobile_togglemenu{display:none} 
      	#footer .column {width: 220px;} 
      	.category-info .images img{width:100%;} 
      	  
      } 
      @media only screen and (max-width: 979px){ 
        
      	#header, 
      	.nav-inner, 
      	.content-inner, 
      	.footer-inner, 
      	.header_bottom,  
      	.footer_bottom_inner{ width:724px; } 
      	#column-left{ width:165px;} 
      	#column-right { display:none;} 
      	 
      	#column-left + #column-right + #content, 
      	#column-left + #content { margin-left: 175px; } 
      	#column-right + #content { margin-right: 0; } 
      	 
      	#column-left .banner img, 
      	#column-right .banner img{ max-width:100%} 
      	#header .header-right{ width:455px; } 
      	#header #search{ margin-left:-15px;margin-top:5px;} 
        
      	#footer .column { width:100%;margin:0;} 
      	#footer .column ul { display:none;padding-bottom:20px; }	 
      	.nav-responsive {display:block}  
      	.product-info .cart span{  display:none;} 
      	.product-info .cart .links{ margin-top:8px;display: block; }  
      	.product-info .cart .links .product_wishlist	{ display:inline; background:url("../images/pipe.gif") no-repeat scroll right center;   margin-right: 5px; 
          padding-right: 7px;} 
      	.contact-info .right iframe{ width:100% !important; } 
       	.checkout-content .left , .checkout-content .right{width:100%; } 
      	.product-info .review a.review-write{ display:block; } 
      	select[name="category_id"]{clear:both; display:block; width:175px; margin:10px 0; } 
      	.product-list .right{width:350px;} 
      	#footer-container{background:#F7F4ED;} 
      	.category-info .images img{width:100%;} 
      } 
        
      /* Landscape phone to portrait tablet */ 
      @media only screen and (max-width: 767px) { 
       
      	#header, 
      	.nav-inner, 
      	.content-inner, 
      	.footer-inner, 
      	.header_bottom,  
      	.footer_bottom_inner{ width:auto;  margin:0 15px; } 
      	 
      	#header .header_top{display:block;} 
      	#column-left,#column-right { display:none;} 
      	 
      	#column-left + #column-right + #content, 
      	#column-left + #content { margin-left:0; } 
      	 
      	#column-right + #content { margin-right: 0; } 
      	#content{ clear:both; width:100%;} 
      	 
      	#header .header-left , #header .header-right{ width:100%; }	 
      	.header-left{ margin-top:10px; } 
      	#header #logo img{ display:block; text-align:center; margin:0 auto; } 
      	#header #welcome{   float: none; 
          margin: 39px auto 0; 
          text-align: center; 
          width: 100%;}	 
      	#header #search { width:97%; margin:15px auto; z-index:5; } 
      	#header .button-search{right:8px;} 
      	#header #search input{ width:100%;  } 
      	#header #cart{ width:100%; top:155px; text-align:center; } 
      	#header #cart .heading a{background:url(../images/cart.png) no-repeat scroll left center transparent;padding:10px 0 10px 40px;} 
      	#header #cart .heading h4{ display:none; } 
      	#currency , #language , #currency .show:hover, #language .show:hover{  color: #FFFFFF;} 
      	#language{border-radius:5px 0 0 0;} 
      	#currency{border-radius:0 0 0 0;right:32%;} 
      	 
       	#currency , #language , .tm_headerlinkmenu{ width:33% !important;    background-color:#A1CE41; 
          border-right: 1px solid #FFFFFF;  
          margin: -1px 0 0 0; 
          padding: 10px 0; 
          text-align: center; position:absolute; z-index:999;  cursor:pointer;top:10px;}	  
      	#header #cart .heading{ float:none;background:none;padding:0;} 
      	#header #cart .content{ margin:7px auto 0; float:none;  } 
      	.language_div, .currency_div{ top:37px; } 
       	#header .links , #header .header_links{ display:none; } 
      	.header_bottom .links{display:none;} 
      	.header_bottom{background:none;height:10px;border:none;} 
      	#header .header_links{  background: none repeat scroll 0 0 #fff; 
      		display: none; 
      		position: absolute; 
      		margin: 0; 
      		padding: 0; 
      		width:170px; 
      		z-index: 95; 
      		top:40px; right:0; 
      		border:1px solid #F4F1E7; } 
      	#header .header_links li { 
      		border-bottom: 1px solid #F4F1E7; 
      		list-style: none outside none; 
      		text-align: left; 
      	} 
      	#header .header_links li a{ 
      	   display: block; 
      		padding: 5px 10px; 
      	} 
      	#header .header_links li a:hover { 
      		text-decoration: none; 
      	} 
      	#currency .show a , #currency .show a:hover, #language .show a , #language .show a:hover{ color:#fff;} 
      	.tm_headerlinkmenu {  
      		border-right: none !important; 
      		color: #FFFFFF; 
      		display: block; 
      		float:right; 
      		position:absolute; 
      		z-index:999; 
      		width:34% !important; 
      		margin-right: -4px; 
      		border-radius:0 5px 0 0; 
      		margin-top:0; 
      		right:0; 
      	} 
      	#currency .top_downarrow, #language .top_downarrow{background:url("../images/arrow-down-resp.png") no-repeat scroll right 7px;} 
      	#currency.active .top_downarrow, #language.active .top_downarrow{background:url("../images/arrow-up-resp.png") no-repeat scroll right 7px;} 
       
      	.copyright-container{ margin:10px auto; } 
      	.product-info > .left{ width:285px; margin:0 auto 10px; float:none; } 
      	.product-info > .left + .right{ margin-left:0; } 
      	.product-filter .limit{ float:none;margin-left:0; } 
      	.product-filter .display{ padding-top:0;  }	  
      	.zoomContainer .zoomLens{cursor:default !important ; } 
      	.zoomWindowContainer , .zoomWindow , .zoomContainer{ display:none;  } 
      	.cart-left-area , .cart-right-area , .login-content .left , .login-content .right , .contact-info .left , .contact-info .right{ width:100%; } 
      	.login-content .left .content, .login-content .right .content{ min-height:inherit; } 
      	.captch_input , .cart-module input[type="text"]{ margin-bottom:6px !important; } 
      	.compare-info{  display: block;    overflow: auto;    width: 100%; }  	 
      	#colorbox , #cboxOverlay{ display:none !important;}  
      	#header #logo{margin-top:60px;} 
      	.flexslider{margin:10px 0;} 
      } 
       
      /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
      @media only screen and (min-width: 480px) and (max-width: 767px) {} 
       
      /* Landscape phones and down */ 
      @media only screen and (max-width: 479px) { 
      	.tm_responsive_row label{ width:100%; margin-bottom:5px; } 
      	.tm_responsive_row span{ width:100%; } 
      	.language_label , .currency_label{ display:none; } 
      	.product-filter .sort{ margin-top:5px; float:left;} 
      	.product-compare{ clear:both; } 
      	.pagination .links{ float:none; } 
      	.htabs{ width:100%;   height: auto; } 
      	 .htabs a{   display: block !important;    float: none; width:auto; margin:0; } 
      	 table.form td{ width:100%; display:block; } 
      	  
      	 .form input.large-field, .form select.large-field ,textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], 		input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"]{ width:98%; } 
      	   
      	 .sitemap-info .right , .sitemap-info .left , .manufacturer-list ul { width:100%; } 
      	 .order-list .order-content div{ width:100%; margin-bottom:15px; text-align:left;} 
      	 table#order-detail .left{ display:block;} 
      	 .product-info .images-additional a{ float:none; text-align:center; } 
      	 #header #search{width:95%;} 
      	 .product-info > .left{width:275px;} 
      } 
       
      /* Mobile Landscape Size to Mobile Portrait (devices and browsers) */ 
      @media only screen and (min-width: 320px) and (max-width: 479px) { } 
      @media only screen and (max-width: 319px){ 
      	.mini-cart-info .name{ display:none; } 
      	.product-info > .left , #header #logo img , .product-info > .left .images img{ width:100%; } 
      	.product-info .cart .links .product_wishlist{ background:none; display:block;} 
      	.product-info .images-additional{ width:159px; margin:0 auto; } 
      	.product-info .product-images .customNavigation{ width:186px; margin:0 auto; position: relative; } 
      	.contact-info{ padding: 15px 10px;} 
       	#content .aboutus .images1 , #content .aboutus .images2 ,#content .aboutus .images3 ,#content .aboutus .images4{ float:none; } 
      	#content .aboutus .content{ padding:10px 0 0 0; } 
      	#order-detail3 table.list .left{ padding:5px;} 
      	#header #cart .content{  width:190px;} 
      	#header #search{width:93%;} 
      	table.list .left{display:block;} 
      }  
      @media only screen and (max-width:240px) { 
      	#header #search{width:91%;} 
      }




  • Teşekkürler ismailix fakat kaynak kodlarında baktığımızda width:100% olarak gözükmekte, sistem tablolarla yapıldı divlerle değil; nedenini bulamadım gitti
  • tablo yada div fark etmez diye düşünüyorum.

    <table class="class ismi">
    </tabel>

    %100 vermek yerine her tarayıcı ekranına göre boyutlandırma yapmak gerekiyor.

    gönderdiğim css kodlarında bu var zaten.

    http://opencart-demos.org/OPC04/OPC040084/index.php?route=common/home
    sana kodunu gönderdim site linki yukarda.
    • 
Sayfa: 1

Benzer içerikler

- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.
Hizmet kalitesi için çerezleri kullanabiliriz. DH’ye girerek kullanım izni vermiş sayılırsınız.
Anladım Veri Politikamız