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.