• 22-06-2015, 17:57:14
    #1
    Sitenin normal görünüşü alttaki resimdeki gibi


    Siteyi küçülttüğümüz zaman böyle oluyor


    Html Kodu:
    	<html>
    	<head>
    		<title>SİTE ADI</title>
    		<meta name="viewport" content="width=device=width initial-scale=1.0" >
    		<meta http-equiv="content-type" content="text/html" charset="UTF-8" />
    		<link  href="css/res.css" type="text/css" rel="stylesheet"  />
    	</head>
    	<body>
    	<div id="sayfa2" height="400px";>
    			
    			<div id="menu">
    				<ul>
    					<li><a href="index.html">ANASAYFA</a></li>
    					<li><a href="teknoloji.html">TEKNOLOJİ</a>
    						<ul>
    							<li><a href="yazılım.html">YAZILIM</a></li>
    							<li><a href="donanım.html">DONANIM</a></li>
    						</ul>
    					</li>
    					<li><a href="webprogramlama.html">WEB PROGRAMLAMA</a>
    						<ul>
    							<li><a href="html.html">HTML</a></li>
    							<li><a href="html5.html">HTML5</a></li>
    						</ul>
    					</li>
    					<li><a href="serviste.html">  C  </a></li>
    					<li><a href="serviste.html">C++  </a></li>
    					<li><a href="serviste.html"> C# </a></li>
    					<li><a href="hakkımda.html">HAKKIMDA</a></li>
    					<li><a href="iletişim.html">İLETİŞİM</a></li>
    				</ul>
    			</div>
    			</div>
    		<div id="sayfa"  height="4000px";>
    			
    			
    			<div id="içerik" height="3300px">
    				<div id="pencere">
    				<table class="t2" background="img/yaman.jpg"/> 
    					<tr>
    						
    						<td><a class="pen" href="teknoloji/türkiyede-90bin-site-yasaklı.html"> <p align="right"> Türkiye'de 90 Bin Site Yasaklı </a></p></td>
    					</tr>
    				</table>
    				
    				<table class="t2" background="img/wiki.jpg"/>  
    					<tr>
    						<td><a class="pen" href="#" ><p  align="right"> Basılı Wikipedia Yarım Milyon Dolara Satışta</a></p></td>
    					</tr>
    				</table>
    				
    				<table class="t2" background="img/retina.jpg"/>  
    					<tr>
    						<td><a class="pen" href="#" ><p align="right"> Samsung ve LG’nin Yeni Telefonları Göz Okuyucuyla Gelebilir</a></p></td>
    					</tr>
    				</table>
    				
    				<table class="t2" background="img/tel.jpg"/>  
    					<tr>
    						<td><a class="pen" href="#" ><p  align="right"> Oukitel'den Tam 10000mAh Bataryalı Akıllı Telefon!</a></p></td>
    					</tr>
    				</table>
    				
    				<table class="t2" background="img/rob.jpg"/>
    					<tr>
    						<td><a class="pen" href="#" ><p  align="right"> İnsan Gibi Tepki Veren Robot Piyasada</a></p></td>
    					</tr>
    				</table>
    				
    				<table class="t2" background="img/black.jpg"/>  
    					<tr>
    						<td><a class="pen" href="#" ><p align="right"> Android’li BlackBerry’nin Teknik Özellikleri Sızdı</a></p></td>
    					</tr>
    				</table>
    			
    			</div>
    .....
    Css:

    body{
    background:#eee9e9;
    }
    .tran{
    opacity: 1.0;
    filter: alpha(opacity=100); 
    }
    .tran:hover{
    opacity: 0.8;
    filter: alpha(opacity=80); 
    }
    .t2{
    width:316px;
    height:200px;
    border:1px solid white;
    float:left;
    margin:5px 2px 0px 2px ;
    opacity: 1;
    filter: alpha(opacity=100)
    }
    .t2:hover{
    opacity: 0.8;
    filter: alpha(opacity=80)
    }
    .sol{
    float:left;
    }
    .başlık{
    font-size:20;
    font-family:Segoe UI Light;
    font-weight:bold;
    color:red;
    margin:0px 0px 0px 5px;
    float:left;
    }
    .haberbaşlık{
    font-size:24;
    font-family:Tekton Pro Ext;
    color:black;
    font-weight:bold;
    margin:0px 0px 0px 10px;
    float:top;
    }
    .habermetin{
    font-size:16;
    font-family:Tekton Pro Ext;
    color:#2F4F4F;
    margin:0px 0px 0px 10px;
    float:left;
    }
    .pen{
    font-size:30;
    font-family:Microsoft YaHei UI;
    color:white;
    font-weight:bold;
    margin:0px auto;
    
    }
    .a{
    font-size:24;
    font-family:Tekton Pro Ext;
    color:black;
    font-weight:bold;
    margin:0px 0px 0px 5px;
    float:top;
    text-decoration:none;
    }
    .img{
    margin:10px 0px 0px 10px;;
    }
    .img1{
    margin:50px 0px 5px 300px;;
    }
    
    .img2{
    margin:20px 0px 5px 380px;;
    }
    .margin{
    margin:20px 10px 10px 210px;
    }
    .margin1{
    margin:60px 10px 10px 50px;
    }
    .blogp{
    font-family:Segoe Print;
    font-size:18px;
    color:red;
    }
    .ortala{
    font-size:16;
    font-family:Tekton Pro Ext;
    color:#2F4F4F;
    margin:5px 10px 10px 10px;
    float:left;
    }
    /*960 dan üstü için yani laptop masaüstü*/
    @media screen and (min-width:2660px) { 
    #sayfa2{
    width:930px;
    height:auto;
    position:relative;
    margin:0px auto;
    border-radius:8px 8px;
    background:white;
    
    }
    
    #sayfa{
    width:930px;
    height:auto;
    position:relative;
    margin:0px auto;
    border-radius:8px 8px;
    background:white;
    
    }
    #banner{
    background:url("../img/ban2.png");
    width:960px;
    height:130px;
    margin:4px auto;
    position:relative;
    }
    #menu{
    width:960px;
    height:32px;
    position:relative;
    margin:0px auto;
    background:#5cacee;
    }
    #menu ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
    #menu ul li{
    float:left;
    position:relative;
    }
    
    #menu ul li a {
    line-height:20px;
    padding:5px 25px 5px 23px;
    color:#242424;
    margin:0px auto;
    text-decoration:none;
    display:block;
    background:#5cacee;
    border:1px solid #5cacee;
    opacity: 0.8;
    filter: alpha(opacity=80); 
    }
    #menu ul li a:hover{
    background:#7ec0ee;
    border:1px solid #87CEEB;
    transition:background 1sn;
    }
    #menu ul li ul li a{
    display:block;
    line-height:20px;
    width:88px;
    background:#B0E0E6;
    border:1px solid #B0E0E6;
    transition:background 2sn;
    }
    
    #menu ul li ul li a:hover{
    background:#5cacee;
    color:white;
    transition: background 1sn;
    }
    #menu ul li ul {
    position:absolute;
    visibility:hidden;
    
    }
    #menu ul li:hover ul{
    visibility:visible;
    }
    # içerik pencere{
    width:960px;
    height:410px;
    position:relative;
    margin:58px 0px 40px 0px;
    }
    #içerik{
    width:960px;
    background:white;
    margin:0px auto;
    position:relative;
    background:white;
    }
    
    #içerik table tr td ul{
    list-style-type:none;
    margin:5px 5px 5px 280px;
    padding:0px;
    
    }
    #içerik table tr td ul li{
    position:relative;
    float:left;
    }
    #içerik table tr td ul li a{
    text-decoration:none;
    display:block;
    line-height:30px;
    background:red;
    margin:0px 5px 5px 0px;
    padding:5px 10px 5px 10px;
    color:white;
    background:#5cacee;
    border-radius:10px 10px;
    }
    #içeriksağ{
    width:650px;
    margin:50px 0px 5px 15px;
    background:white;
    }
    }
    /*ıpad airport için*/
    @media  screen and (min-width:768) and (max-width:959) {
    #sayfa{
    width:768px;
    height:auto;
    margin:0px auto;
    background:white;
    float:left;
    }
    #banner{
    background:url("../img/ban2.1.png");
    width:768px;
    height:130px;
    margin:0px auto;
    position:relative;
    }
    #menu{
    width:768px;
    height:32px;
    position:relative;
    margin:0px auto;
    background:#5cacee;
    float:left;
    }
    #menu ul{
    list-style-type:none;
    margin:0px;
    padding:0px;
    }
    #menu ul li{
    float:left;
    position:relative;
    }
    
    #menu ul li a {
    line-height:20px;
    width:90px;
    color:#242424;
    margin:0px auto;
    text-decoration:none;
    display:block;
    background:#5cacee;
    border:1px solid #5cacee;
    opacity: 0.8;
    filter: alpha(opacity=80); 
    font-size:10;
    }
    #menu ul li a:hover{
    background:#7ec0ee;
    border:1px solid #87CEEB;
    transition:background 1sn;
    }
    #menu ul li ul li a{
    display:block;
    line-height:20px;
    width:88px;
    background:#B0E0E6;
    border:1px solid #B0E0E6;
    transition:background 2sn;
    }
    
    #menu ul li ul li a:hover{
    background:#5cacee;
    color:white;
    transition: background 1sn;
    }
    #menu ul li ul {
    position:absolute;
    visibility:hidden;
    
    }
    #menu ul li:hover ul{
    visibility:visible;
    }
    #içerik pencere{
    width:768px;
    height:auto;
    position:relative;
    margin:40px 0px 0px 0px;
    float:left;
    background:white;
    }
    #içerik{
    width:768px;
    background:white;
    margin:0px auto;
    position:relative;
    background:white;
    }
    
    #içerik table tr td ul{
    list-style-type:none;
    margin:5px 5px 5px 280px;
    padding:0px;
    
    }
    #içerik table tr td ul li{
    position:relative;
    float:left;
    }
    #içerik table tr td ul li a{
    text-decoration:none;
    display:block;
    line-height:30px;
    background:red;
    margin:0px 5px 5px 0px;
    padding:5px 10px 5px 10px;
    color:white;
    background:#5cacee;
    border-radius:10px 10px;
    }
    #içeriksağ{
    width:650px;
    margin:58px 0px 5px 15px;
    background:white;
    }
    }

    Arkadaşlar sorunu acil çözmem gerekiyor lütfen yardımcı olurmusunuz.
  • 22-06-2015, 18:03:02
    #2
    CSS'de Türkçe karakter var onları düzeltip tekrar deneyin, içeriksağ gibi.