PDA

View Full Version : طراحی صفحات html



arezooafshari
شنبه 05 مهر 1393, 16:17 عصر
وقتی یک صفحه طراحی می کنم صفحه رو که کوچیک می کنم ( نه پنجره مرورگر رو، فقط صفحه با ctr+scroll ) وسط قرار نمی گیره، باید چیکار کنم برای اینکه وسط قرار بگیرد؟



body{
margin:0 auto;
direction:rtl;
font-family:tahoma;
background-color:e2e2e2;
}
.header{
background-color:131313;
height:175px;
}
.inheader{
height:48px;
background-color:ffffff;
position: absolute;
top: 0;
width: 100%;
}
.non{
position: absolute;
top: 5px;
right: 1px;
float:right;
}
.inheader input{
margin-right:450px;
height:34px;
width:517px;
border-radius:10px;
padding-right:50px;
font-family:B Yekan;
font-size:15px;
color:9b9b9b;
border: 2px solid d6d6d6;
position:absolute;
top:4px;
}
.linheader{
width:230px;
float:left;
height:34px;
position: relative;
left: 132px;
top:2px;
}
.linheader p{
width:108px;
height:23px;
float:left;
margin-top:4px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
background-color:eeeeee;
font-family:B Yekan;
font-size:13px;
color:373737;
padding-top:11px;
padding-right:11px;
border-left:white;
}
.notification{
background-color:e2e2e2;
width:103px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
height:34px;
float:left;
margin-top:4px;
border-left:c3c3c3;
}
.notification img{
padding:7px;
}
.purple{
height:15px;
width:12px;
border-radius:100%;
background-color:662e8c;
margin-top: -18;
margin-right: 60px;
font-family:Tahoma;
font-size:9px;
color:white;
padding-right: 5;
padding-top: 2;
}
.pic{
border-radius:100%;
border: 2px solid 636363;
float:left;
position:absolute;
left:110px;
top:2px;
}
.down{
margin-right:465px;
margin-top:29px;
width:45px;
float:right;
}
.down a{
margin-right:-30px;
padding:12px;
width:77px;
float:right;
color:white;
}
.daavat{
width:79px;
float:right;
margin-right:85px;
margin-top:32px;
}
.daavat a{
margin-right:-35px;
padding:15px;
width:79px;
float:right;
color:white;
}
.base{
width:1175px;
position:relative;
margin:auto;
border-top-right-radius:10px;
border-top-left-radius:10px;
}
.leftbox{
width:300px;
float:left;
height:574px;
margin-left: -10px;
}
.tabligh{
font-family:B Yekan;
font-size:13px;
color:191919;
}
.lezat{
height:95px;
}
.image{
height:78px;
width:111px;
border:2px solid c4c4c4;
background-color:white;
padding-top: 4px;
padding-right: 4px;
float:right;
}
.pp{
font-family:B Yekan;
color:4f1f6e;
font-size:15px;
float:left;
margin-left:-48px;
margin-top:-5px;
}
.pb{
width: 218px;
margin-top: -10px;
font-family: B Yekan;
color:222222;
font-size: 13px;
float: left;
margin-left: -53px;
}
.microsoft{
height:88px;
margin-top:15px;
}
.mimage{
height:78px;
width:78px;
border:2px solid c4c4c4;
background-color:white;
padding: 2px;
float:right;
}
.modir{
font-family:B Yekan;
color:4f1f6e;
font-size:15px;
float:left;
margin-left:50px;
}
.com{
font-family: B Yekan;
color:222222;
font-size: 13px;
float: left;
margin-left: 50px;
margin-top: -18px;
}
.folower{
float:right;
margin-top:-15px;
background-color:d5d5d5;
width:113px;
height:19px;
border-radius:10px;
margin-right:30px;
font-family:B Yekan;
font-size:12px;
color:2c2c2c;
}
.plus{
float:left;
margin-left:190px;
}
.skype{
height:88px;
margin-top:20px;
}
.simage{
height:78px;
width:78px;
border:2px solid c4c4c4;
background-color:white;
padding: 2px;
float:right;
}
.simage img{
padding:10px;
}
.sp{
font-family:B Yekan;
color:4f1f6e;
font-size:15px;
float:left;
margin-left:162px;
margin-top:-1px;
}
.android{
font-family: B Yekan;
color:222222;
font-size: 13px;
float: left;
margin-right: 95px;
margin-top: -65px;
}
.mohlat{
width:131px;
height:19px;
margin-top: -20px;
float: left;
margin-left:75px;
}
.day{
background-color:e90c30;
height:19px;
width:114px;
border-radius:10px;
font-family:B Yekan;
font-size:12px;
color:fef5f6;
margin-right: 25px;
margin-top: -15px;
}
.rightbox{
width:871px;
float:right;
background-color:ffffff;
height:753px;
margin-top:-22px;
}
.rheader{
height:51px;
background-color:f3f3f3;
margin-top:3px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom:2px solid e2e2e2;
}
.rheader p{
font-family:B Yekan;
font-size:13px;
color:6c6c6c;
padding-right:12px;
float:right;
}
.search input{
background-color:e0e0e0;
width:136px;
height:30px;
float:left;
margin-left:8px;
margin-top:13px;
font-family:B Yekan;
font-size:13px;
color:535353;
padding-left:55px;
border-radius:10px;
border:none;
}
.search img{
margin-top:21px;
float:left;
margin-left:-125px;
}
.content{
height:695px;
width:870px;
}
.lcontent{
width:296px;
background-color:343434;
float:left;
height:695px;
}
.rcontent{
width:568px;
height:695px;
}
.c{
width:571px;
height:59px;
border-bottom:2px solid e2e2e2;
}
.c img{
float:right;
margin-right:10px;
border-radius:10px;
margin-top:10px;
}
.p1{
float:right;
font-family:B Yekan;
font-size:15px;
padding-right:4px;
margin-top:20px;
}
.p2{
font-family:B Yekan;
font-size:13px;
color:6c6c6c;
float:right;
margin-top:20px;
padding-right:20px;
}
.p3{
font-family:B Yekan;
font-size:13px;
color:4a4a4a;
float:right;
margin-top:20px;
padding-right:230px;
}
.first{
height:138px;
border-bottom:2px solid 434343;
padding-top:10px;
}
.star{
float:left;
}
.pic1{
border-radius:10px;
margin:10px;
float:right;
margin-top: 5px;
}
.first p{
font-family:B Yekan;
font-size:13px;
color:bbbbbb;
float:right;
margin:8px;
}
.second{
height:88px;
border-bottom:2px solid 434343;
border-top:2px solid 2a2a2a;
}
.second p{
font-family:B Yekan;
font-size:13px;
color:bbbbbb;
margin:14px;
}
.third{
height:88px;
border-bottom:2px solid 434343;
border-top:2px solid 2a2a2a;
}
.third p{
font-family:B Yekan;
font-size:13px;
color:bbbbbb;
margin:14px;
}
.forth{
height:127px;
border-bottom:2px solid 434343;
border-top:2px solid 2a2a2a;
}
.forth p{
font-family:B Yekan;
font-size:13px;
color:bbbbbb;
margin:14px;
}
.fifth{
height:248px;
border-top:2px solid 2a2a2a;
}
.fifth input{
background-color:bababa;
width:86px;
height:27px;
font-family:B Yekan;
font-size:15px;
color:1a1a1a;
border-radius:10px;
margin:185px;
}
.sms{
margin-top:20px;
}
.footer{
height:50px;
clear:both;
padding-top:21px;
padding-right:11px;
}
.cicle{
background-color:31681b;
border-radius:100%;
height:7px;
width:7px;
float:right;
margin-left:6px;
}
.online{
color:31681b;
font-family:B Yekan;
font-size:11px;
float:right;
padding-left: 25px;
margin-top: -5px;
}
.another{
float:right;
color:3d3d3d;
font-family:B Yekan;
font-size:13px;
padding-left: 25px;
margin-top: -6px;
}
.feedback{
background-color:773b9f;
color:ffffff;
border-radius:10px;
font-family:B Yekan;
font-size:12px;
margin-top:-7px;
border:none;
}

deragonpc
شنبه 05 مهر 1393, 16:27 عصر
درود همون margin: 0 auto; که نوشتید باید کافی باشه فقط میشه بگید چرا قبل از اعلان رنگ ها از # استفاده نکردید ؟

deragonpc
شنبه 05 مهر 1393, 16:32 عصر
درود مشکل رو فهمیدم یک div جدید تعریف کنید و تمامی div های دیگه رو درون اون قرار بدید و Margin: 0 auto رو بهش بدید اون موقع درست میشه .

arezooafshari
شنبه 05 مهر 1393, 17:13 عصر
واقعا ممنون