Merhabalar ;
kenzzofis.com adlı domaininde yaptığım e-ticaret çalısmasında orta alanla ilgili bir sıkıntım var
margin-left kullnarak ortalayabiliyorum fakat ekran çözünürlüğüne göre bu ayarlamam deişiyor Tüm ekran çözünürlüklerinde ortada nasıl çıkmasını sağlarım
yardımcı olabilirseniz sevinriim kodlar aşağıdadır.
index.php html çıktısı ->
<div style="margin-left:300px;float:left;">
<div class="medium-title2">OKUL MOBİLYALARI</div>
<div class="medium-r"> <div style="float:left; text-align:center">
<div class="ilan"><a href="?kenzz=detay&altkat=29"><img src="urun_res/okulsira.jpg" height="80" width="108" /></a></div>
<br style="clear:both" />
<a href="?kenzz=detay&altkat=29" style="color:#000; text-decoration:none; font-size:11px">Okul Sıraları</a>
</div>
<div style="float:left; text-align:center">
<div class="ilan"><a href="?kenzz=detay&altkat=30"><img src="urun_res/okulsira.jpg" height="80" width="108" /></a></div>
<br style="clear:both" />
<a href="?kenzz=detay&altkat=30" style="color:#000; text-decoration:none; font-size:11px">Çizim Masaları</a>
</div>
<div style="float:left; text-align:center">
<div class="ilan"><a href="?kenzz=detay&altkat=31"><img src="urun_res/okulsira.jpg" height="80" width="108" /></a></div>
<br style="clear:both" />
<a href="?kenzz=detay&altkat=31" style="color:#000; text-decoration:none; font-size:11px">Panolar</a>
</div>
<div style="float:left; text-align:center">
<div class="ilan"><a href="?kenzz=detay&altkat=32"><img src="urun_res/okulsira.jpg" height="80" width="108" /></a></div>
<br style="clear:both" />
<a href="?kenzz=detay&altkat=32" style="color:#000; text-decoration:none; font-size:11px">Yazı Tahtaları</a>
</div>
<div style="float:left; text-align:center">
<div class="ilan"><a href="?kenzz=detay&altkat=33"><img src="urun_res/okulsira.jpg" height="80" width="108" /></a></div>
<br style="clear:both" />
<a href="?kenzz=detay&altkat=33" style="color:#000; text-decoration:none; font-size:11px">Bilgisayar Masaları</a>
</div>
<br style="clear:both" /></div></div><div style="margin-left:300px;float:left"><img src="dosyalar/medium-b.png" height="8" width="728"></div><br>Css :
body, td, th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #EEEEEE;
margin: 0;
padding: 0
}
.center {
width: 980px;
margin-left: auto;
margin-right: auto;
position: relative
}
.br {
width:954px;
background:url(images/br.png) no-repeat;
height:15px;
padding:13px;
text-indent:85px;
margin-top:5px
}
.cs p {
margin:0;
padding:0
}
.br a {
font-size:12px;
color:#333;
text-decoration:none;
margin-right:5px;
margin-left:5px;
}
.br a:hover {
color:#900
}
.top-menu {
width: 980px;
height: 65px;
background: url(images/top-menu-background.png);
position: relative;
margin-top: 125px;
}
img {
border: 0
}
.top {
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
background-color: #000;
position: relative
}
.top-inline {
width: 980px;
position: absolute;
left: 50%;
margin-left: -490px;
top: 7px;
color: #CCC
}
.top-inline a {
color: #CCC;
text-decoration: none;
margin-left: 5px;
margin-right: 5px
}
.top-inline a:hover {
color: #F00
}
.menu-search {
width: 335px;
height: 43px;
background: url(images/menu-search.png);
position: absolute;
left: 700px;
top: 50px;
}
.menu-search form input {
display: inline;
margin-left: 40px;
padding-top: 12px;
padding-bottom: 12px;
border: none;
width: 235px;
background: none
}
.menu-search img {
position: absolute;
right: 10px;
top: 5px
}
.menu-links {
position: absolute;
top: 25px;
left: 80px
}
.menu-links a {
color: #CCC;
text-decoration: none;
font-size: 16px;
margin-right: 15px
}
.menu-links a:hover {
color: #F00
}
.top-banner {
width: 468px;
height: 60px;
position: absolute;
top: -90px;
right: 0px;
z-index: 9999;
background-color:#666
}
.left {
width:237px;
float:left;
margin-top:10px
}
.right {
float:left;
margin-top:10px;
}
.right2 {
float:right;
margin-left:15px;
width:728px;
margin-top:10px;
}
.small-title {
width:237px;
padding-top:27px;
padding-bottom:28px;
background:url(images/small.png);
color:#FFF;
text-indent:45px;
font-size:14px;
font-weight:bold
}
.small-r {
width:217px;
padding:10px;
background:url(images/small-r.png) repeat-y
}
.anno {
width:700px;
padding-top:12px;
padding-bottom:11px;
padding-left:12px;
padding-right:16px;
background:url(images/top-anno.png);
color:#FFF;
font-size:16px;
letter-spacing:0.5px
}
.anno a {
font-weight:bold;
color:#FFF
}
.left-banner {
width:468px;
height:250px;
background-color:#333;
float:left;
margin-top:10px
}
.right-banner {
width:250px;
height:250px;
margin-left:10px;
margin-top:10px;
float:left;
background-color:#333
}
#kategoriler ul {
width:230px;
list-style-type:none ;
margin:0;
padding:0;
}
#kategoriler ul li {
line-height:25px;
text-indent:0px;
font-size:14px;
font-weight:bold;
}
#kategoriler ul li a {
font-size:14px;
font-weight:bold;
color:#000;
text-decoration:none;
}
#kategoriler ul li ul li {
text-indent:25px;
}
#kategoriler ul li ul li a {
display: block;
line-height:27px;
font-size:12px;
font-weight:normal;
text-decoration:none
}
#kategoriler ul li ul li a:hover {
color:#F00
}
#kategoriler ul li a:hover {
color:#F00
}
.medium-title {
width:728px;
padding-top:27px;
padding-bottom:28px;
background:url(images/medium.png);
color:#FFF;
text-indent:45px;
font-size:14px;
font-weight:bold;
}
.medium-title2 {
width:728px;
padding-top:27px;
padding-bottom:28px;
background:url(images/medium2.png);
color:#FFF;
text-indent:45px;
font-size:14px;
font-weight:bold;;
position:relative
}
.medium-title3 {
width:980px;
padding-top:27px;
padding-bottom:28px;
background:url(images/medium3.png);
color:#FFF;
text-indent:45px;
font-size:14px;
font-weight:bold;
}
.medium-title2 a {
position:absolute;
right:10px;
top:10px
}
.medium-r {
width:708px;
padding:10px;
background:url(images/medium-r.png) repeat-y
}
.medium-r3 {
width:960px;
padding:10px;
background:url(images/medium-r3.png) repeat-y
}
#uyeol p {
margin:0;
padding:0;
margin-top:5px
}
#uyeol label[for=s] {
float:left;
width:125px;
display: block;
padding-left:0px
}
#uyeol span {
color:#F00
}
#uyeol input[for=s], select {
font-size:14pt;
width:310px
}
#uyeol a {
color:#F00;
text-decoration:none
}
#cap {
margin-left:122px
}
h2 {
margin:0;
padding:0;
border-bottom:dotted 1px #ccc;
font-size:16px;
padding-bottom:7px;
margin-bottom:10px
}
.butonlar {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9e1000), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #9e1000 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e1000', endColorstr='#ce0100');
background-color:#9e1000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
cursor:pointer
}.butonlar:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #9e1000) );
background:-moz-linear-gradient( center top, #ce0100 5%, #9e1000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#9e1000');
background-color:#ce0100;
}.butonlar:active {
position:relative;
top:1px;
}
butonlar {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9e1000), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #9e1000 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e1000', endColorstr='#ce0100');
background-color:#9e1000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #b23e35;
cursor:pointer
}.butonlar:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #9e1000) );
background:-moz-linear-gradient( center top, #ce0100 5%, #9e1000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#9e1000');
background-color:#ce0100;
}.butonlar:active {
position:relative;
top:1px;
}
.butonlar3 {
-moz-box-shadow:inset 0px 1px 0px 0px #707070;
-webkit-box-shadow:inset 0px 1px 0px 0px #707070;
box-shadow:inset 0px 1px 0px 0px #707070;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9e9e9e), color-stop(1, #4d4d4d) );
background:-moz-linear-gradient( center top, #9e9e9e 5%, #4d4d4d 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#4d4d4d');
background-color:#9e9e9e;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #b3b3b3;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:16px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #030303;
}.butonlar3:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4d4d4d), color-stop(1, #9e9e9e) );
background:-moz-linear-gradient( center top, #4d4d4d 5%, #9e9e9e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#9e9e9e');
background-color:#4d4d4d;
}.butonlar3:active {
position:relative;
top:1px;
}
.ilan {
width:110px;
height:80px;
text-align:center;
float:left;
margin-right:5px;
margin-top:10px;
text-align:center;
font-size:11px;
display:inline;
border:solid 1px #d8d8d8
}
.ilan img {
color:#333;
margin-bottom:5px
}
.ilan a {
color:#333;
text-decoration:none
}
.ilan a:hover {
color:#C00
}
.page {
text-align:left
}
.page a {
padding:4px;
background-color:#C00;
color:#FFF;
text-decoration:none;
margin-left:2px
}
.secenek {
line-height:22px;
border-bottom:solid 1px #ccc;
background:url(images/arti.gif) no-repeat;
background-position:right
}
.secenek a {
color:#333;
text-decoration:none;
display:block
}
.sec {
margin:0;
padding:0
}
.logo {
width:980px;
left:50%;
margin-left:-490px;
position:absolute;
top:40px
}
.tb1 {
width:100px;
padding-top:8px;
padding-bottom:8px;
background-color:#CCC;
color:#333
}
.tb1 {
float:left;
width:100px;
padding-top:8px;
padding-bottom:8px;
background-color:#333;
color:#ffffff;
margin-left:1px;
font-weight:bold
}
.tb2 {
float:left;
width:297px;
padding-top:8px;
padding-bottom:8px;
background-color:#333;
color:#ffffff;
margin-left:1px;
font-weight:bold
}
.tb3 {
float:left;
width:100px;
padding-top:8px;
padding-bottom:8px;
background-color:#333;
color:#ffffff;
margin-left:1px;
font-weight:bold
}
.tb4 {
float:left;
width:100px;
background-color:#333;
color:#ffffff;
margin-left:1px;
font-weight:bold;
padding-top:8px;
padding-bottom:8px;
}
.tb5 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc
}
.tb6 {
float:left;
width:297px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc;
text-align:left;
text-indent:5px
}
.tb7 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc
}
.tb8 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc;
}
.tb6 p, .tb7 p {
margin:0;
padding:0;
margin-top:35px
}
.tb8 p {
margin:0;
padding:0;
margin-top:5px
}
.tb5-2 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc
}
.tb6-2 {
float:left;
width:555px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc;
text-align:left;
text-indent:5px
}
.tb7-2 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc
}
.tb8-2 {
float:left;
width:100px;
color:#333;
margin-left:1px;
height:80px;
border-bottom:dotted 1px #ccc;
text-align:center
}
.tb6-2 p, .tb7-2 p {
margin:0;
padding:0;
margin-top:35px
}
.tb8-2 p {
margin:0;
padding:0;
margin-top:5px
}
.bir {
float:left;
width:300px;
background-color:#ffffff;
}
.iki {
float:right;
width:380px;
}
.l2 {
width:150px;
background-color:#EEEEEE;
float:left;
padding-top:5px;
padding-bottom:5px;
color:#333;
text-indent:5px;
margin-top:1px;
font-weight:bold
}
.r2 {
float:right;
width:249px;
background-color:#f5f5f5;
padding-top:5px;
padding-bottom:5px;
color:#333;
text-indent:5px;
margin-top:1px
}
.res img {
max-width: 500px;
max-height: 350px;
width: expression(this.width > 500 ? "500px" : true);
height: expression(this.height > 350 ? "350px" : true);
margin-top:30px;
margin-bottom:30px
}
.mesaj {
width:32px;
height:32px;
color:#FFF;
font-weight:bold;
background:url(images/oval.png) no-repeat;
position:absolute;
top:-15px;
left:150px;
text-align:center
}
.mesaj p {
margin:0;
padding:0;
margin-top:9px
}
.odememesaj {
width:32px;
height:32px;
color:#FFF;
font-weight:bold;
background:url(images/oval.png) no-repeat;
position:absolute;
top:-15px;
left:528px;
text-align:center
}
.odememesaj p {
margin:0;
padding:0;
margin-top:9px
}
.footer-top {
width:980px;
margin-left:auto;
margin-right:auto;
height:17px;
background:url(images/footer-top.png) no-repeat;
margin-top:15px
}
.footer-bottom {
width:980px;
margin-left:auto;
margin-right:auto;
height:17px;
background:url(images/footerbottom.png) no-repeat
}
.footer-repeat {
width:960px;
padding:10px;
margin-left:auto;
margin-right:auto;
padding-top:0;
padding-bottom:0;
background:url(images/footer-repeat.png) repeat-y;
font-size:11px
}
.footer-repeat a {
color:#000;
text-decoration:none;
margin-left:5px;
margin-right:5px;
font-weight:bold
}
.footer-repeat a:hover {
color:#C00;
}
.detayblok {
float: left;
width: 670px;
margin-top: 5px;
margin-bottom: 10px;
margin-left: 35px;
border: 1px solid #E6E6E6;
background-color:#FFF;
}
.detaybaslik {
font-family: Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #003366;
float: left;
height: 30px;
width: 600px;
margin-bottom: 5px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F30;
margin-top: 7px;
margin-left: 45px;
}
.detaybaslik1 {
font-family: Geneva, sans-serif;
font-size: 19px;
font-weight: bold;
color: #390;
float: left;
height: 30px;
width: 600px;
margin-bottom: 5px;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #F30;
margin-top: 15px;
margin-left: 45px;
}
.detayaciklama {
float: left;
width: 625px;
margin-top: 7px;
margin-bottom: 7px;
margin-left: 25px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333;
text-decoration: none;
}
.detaydahil {
font-family: Geneva, sans-serif;
font-size: 14px;
color: #333;
display: block;
float: left;
width: 400px;
list-style-position: outside;
list-style-type: none;
list-style-image: url(../images/li-ico.png);
}
.detayimaj {
float: left;
width: 670px;
margin-top: 5px;
}
.div_texbox {
width:347px;
float:right;
background-color:#E6E6E6;
height:35px;
margin-top:3px;
padding-top:5px;
padding-bottom:3px;
padding-left:5px;
}
.textbox {
background-image: url(../images/16t.png);
background-color:#FFFFFF;
background-repeat: no-repeat;
background-position:left;
width:285px;
font:normal 18px Arial;
color: #999999;
padding:3px 5px 3px 19px;
}
.textbox:focus, .textbox:hover {
background-color:#F0FFE6;
}
.username {
background-image: url(../images/16m.png);
background-repeat: no-repeat;
background-position:left;
background-color:#FFFFFF;
width:285px;
font:normal 18px Arial;
color: #999999;
padding:3px 5px 3px 19px;
}
.username:focus, .username:hover {
background-color:#F0FFE6;
}
.password {
background-image: url(../images/16s.png);
background-repeat: no-repeat;
background-position:left;
background-color:#FFFFFF;
width:285px;
font:normal 18px Arial;
color: #999999;
padding:3px 5px 3px 19px;
}
.password:focus, .password:hover {
background-color:#F0FFE6;
}
.button_div {
width:287px;
float:right;
background-color:#fff;
border:1px solid #ccc;
text-align:right;
height:35px;
margin-top:3px;
padding:5px 32px 3px;
}
.buttons {
background: #e3e3db;
font-size:12px;
color: #989070;
padding: 6px 14px;
border-width: 2px;
border-style: solid;
border-color: #fff #d8d8d0 #d8d8d0 #fff;
text-decoration: none;
text-transform:uppercase;
font-weight:bold;
}
/* VELVET */