وسط چین کردن قالب html

amiredge · 24/11/14

سلام.چطوری این قالبو وسط چین کنم؟

تک تک float های css رو center کردم ولی بازم تغییری نکرد.راهکاری داره؟

rocki3oy · 24/11/14

دوست عزیز دمو آنلاین بدید که کدهارو ببینم بهتر می تونیم راهنمایید کنیم.

شما تگ body به صورت زیر استایل بده.

body{

padding:0;

margin:0 auto;

}

HamedR · 24/11/14

سلام.چطوری این قالبو وسط چین کنم؟تک تک float های css رو center کردم ولی بازم تغییری نکرد.راهکاری داره؟

دوست عزيز چيزي به اسم centrr توي float نداريم!!

معمولا با اين كد وسط چين ميكنن

کد:

#div {
margin: 0px auto ;
padding: 0px
}

يه روش قديمي هم استفاده از تگ

کد:

&lt;center&gt;

هست

amiredge · 25/11/14

کد:
دوست عزيز چيزي به اسم centrr توي float نداريم!!معمولا با اين كد وسط چين ميكنن

کد:

#div { margin: 0px auto ; padding: 0px }

يه روش قديمي هم استفاده از تگ

کد:

<center>

هست

کار نکرد.بیشتر راهنمایی میکنید؟

IAMIR · 25/11/14

دمو بده .

علم غیب که نداریم بدونیم شما چجوری کد نویس کردی .

rocki3oy · 25/11/14

کار نکرد.بیشتر راهنمایی میکنید؟

با سلام و احترام.

با توجه به لینکی که ارسال کردید موارد زیر رو اتجام بدید درست خواهد شد.

البته دوست عزیز یک نکته ای رو به شما بگم شما در قسمت اندازه ها مشکل دارید درست استایل نوشته نشده.

اول در قسمت هدر دو تا لینک style.css هست یکی رو پاک کنید.

کد:

&lt;link media="screen" type="text/css" href="style.css"  rel="stylesheet"&gt;&lt;link type="text/css" rel="stylesheet"  href="style.css"&gt;

یعنی فقط:

کد:

&lt;link media="screen" type="text/css" href="style.css" rel="stylesheet"&gt;

سپس فایل style.css رو باز کنید و کدهای زیر رو جایگزین کنید.این تمامی استایل شماست.

کد:

@font-face {
  font-family: 'Titr';
  src: url('fonts/Titr.eot?#') format('eot'),  /* IE6–8 */
       url('fonts/Titr.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
       url('fonts/Titr.ttf') format('truetype');  /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
body {
font-family: 'Titr';
width:80%;
font-size:15px;
text-align:right;
color: #555555;
margin: 0 auto;
padding: 0;
direction:rtl;
line-height:17px;
font-weight:normal;
background:url(images/body.jpg);
}

body a{
color: #555555;  
text-decoration:none;
}
#kolmain{
    width:100%;
    margin:0 auto;

}
.all{width:100%;
margin:3px auto;
}
.logo{height:220px;
width:100%;
background:url(images/logo.png) no-repeat right;
margin-bottom:5px;
}
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);

#cssmenu {padding: 0; margin:5px 0; border: 0; float:right; width:100%;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: right; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li a {
-moz-transition:all 0.7s linear;
-ms-transition:all 0.7s linear;
-o-transition:all 0.7s linear;

}
#cssmenu ul li a:hover {
-moz-transition:all 0.7s linear;
-ms-transition:all 0.7s linear;
-o-transition:all 0.7s linear;

}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover &gt; ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
  background: #333;
  border-bottom: 4px solid #0393ee;
  font-family: 'Titr'; 
  font-size: 12px; 
}

#cssmenu &gt; ul { *display: inline-block; }

#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both; 
}
#cssmenu a {
background: #333;
color: #f5f5f5;
padding: 0 20px; 
}
#cssmenu ul { text-transform: uppercase; }

#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px; 
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px; 
}
#cssmenu ul ul ul { border-top: 0 none; }

#cssmenu ul ul li { position: relative }
#cssmenu &gt; ul &gt; li &gt; a { line-height: 48px;  }

#cssmenu ul ul li:first-child &gt; a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover &gt; a { background: #35a6ff; }

#cssmenu ul ul li:last-child &gt; a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff; 
}
#cssmenu ul ul li:last-child:hover &gt; a { border-radius: 0 0 0 3px; }

#cssmenu ul ul li.has-sub &gt; a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover &gt; a, #cssmenu ul li.active &gt; a {
background: #008cdd;
color: #FFF;
}
#cssmenu ul li.has-sub &gt; a:after {
content: '+';
 }
#cssmenu ul li.last ul {
left: auto;
right: 0; 
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.content{height:2800;
width:100%;
background: #ffffff;
border:solid #cecec4 thin;
border-radius:5px;
}
.content1{height:1200px;
width:100%;
background: #ffffff;
border:solid #cecec4 thin;
border-radius:5px;
}
.content2{height:1000px;
width:800px;
background: #ffffff;
border:solid #cecec4 thin;
border-radius:5px;
}
#slideshow{
background:url(http://www.shikbaner.ir/34586694605889563183.png);
background-color:#eaeaea;
border:0px solid #FFFFFF;
height:250px;
margin:77px auto;
position:relative;
width:712px;
margin-bottom:25px;
-moz-box-shadow:0 0 22px #111;
-webkit-box-shadow:0 0 22px #111;

}

#slideshow ul{
height:212px;
left:7px;
list-style:none outside none;
overflow:hidden;
position:absolute;
top:8px;
width:697px;
margin:auto;
}

#slideshow li{
position:absolute;
display:none;
z-index:10;
margin:auto;
}

#slideshow li:first-child{
display:block;
z-index:1000;
}

#slideshow .slideActive{
z-index:1000;
}

#slideshow canvas{
display:none;
position:absolute;
z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('images/arrows.png') no-repeat;
    top:50%;
    margin-left:8px;
    margin-top:-52px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;

left:0;
}
#slideshow .previous:hover{ background-position:left bottom;
}

#slideshow .next{ background-position:right top;
right:5px;
}
#slideshow .next:hover{ background-position:right bottom;
}
.title-aboat{width:213px;
height:30px;
background:#00a4f9;
float:right;
color:#FFF;
font-weight:normal;
margin:0 42px 3px 1px;
text-align:center;
font-size:20px;
padding-top:9px;
border-radius:5px;
}
.title-aboat:hover{border-radius:10px;
color:#fbf89f;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d9d9d9;
}
.content-aboat{width:900px;
height:auto;
float:none;
margin:0 42px 3px 1px;
line-height:20px;
}
.box1{width:174px;
height:26px;
background:#e40036;
font-weight:normal;
color:#FFF;
float:left;
text-align:center;
margin-left:10px;
padding-top:4px;
border-radius:5px;
}
.box1:hover{border-radius:10px;
color:#ffffff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
box-shadow: 5px 5px 2px #ffffff;
}
.box2{width:174px;
height:26px;
background:#b3019c;
font-weight:normal;
color:#FFF;
float:left;
text-align:center;
margin-left:10px;
padding-top:4px;
margin-top:15px;
border-radius:5px;
}
.box2:hover{border-radius:10px;
color: #ffffff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d9d9d9;
}
.box3{width:174px;
height:26px;
background:#7fb301;
font-weight:normal;
color:#ffffff;
float:left;
text-align:center;
margin-left:10px;
padding-top:4px;
margin-top:15px;
border-radius:5px;
}
.box3:hover{border-radius:10px;
color:#ffffff;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d9d9d9;
}
.table{margin:auto;}
.moshtari{height:100px;
width:200px;
border:solid #a0a0a0 thin;
border-radius:5px;
background: #ffffff;
margin-top:4px;
text-align:center;
}
.box-moshtari{width:160px;
height:23px;
background:url(images/box-moshtari.png);
text-align:center;
font-weight:normal;
font-size:13px;
margin:10px auto;
padding-top:3px;
}
.moshtari1{height:100px;
width:191px;
border:solid #a0a0a0 thin;
border-radius:5px;
background: #ffffff;
margin-top:4px;
text-align:center;
padding-top:8px;
line-height:30px;
}
.footer{width:100%;
height:50px;
margin:5px auto 5px auto;
background:#ffffff;
border-radius:5px;
border:solid #d0d0d0 thin;
text-align:center;
padding-top:4px;
line-height:25px;
}
.footer2{width:1100px;
height:200px;
margin:5px auto 5px auto;
background:#ffffff;
border-radius:5px;
border:solid #d0d0d0 thin;
text-align:center;
padding-top:4px;
line-height:25px;
}
.moshtari:hover{border-radius:15px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d0d0d0;
}
.moshtari1:hover{border-radius:15px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d0d0d0;
}
.footer:hover{border-radius:10px;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
box-shadow: 5px 5px 2px #d0d0d0;
}
.nomone-box{text-align:center;
}
.axe:hover{

margin-top:5px;
margin-right:5px;
}
.text-tarefe{background:#b3b3b3;
min-width:110px;
min-height:30px;
border-radius:15px;
float:right;
text-align:center;
padding-top:10px;
margin-right:50px;
color:#FFF;
}
.text-tarefe:hover{
background:#00a2ed;
color:#000;
}
.text1-tarefe{width:119px;
height:30px;
background:#009fff;
color:#FFF;
text-align:center;
border:solid #8eb8d5 thin;
border-radius:3px;
padding-top:5px;
margin:auto;
}
.table-tarefe{margin:auto;
text-align:center;
}
.text2-tarefe{width:auto;
height:30px;
background:#e6e6e6;
text-align:center;
border:solid #8eb8d5 thin;
border-radius:3px;
padding-top:5px;
margin:auto;
}
.radif1:hover{width:130px;
height:40px;
background:#F93;
}
.text3-tarefe{background:#b3b3b3;
width:55px;
height:30px;
border-radius:15px;
text-align:center;
padding-top:10px;
color:#FFF;
margin:auto;
}
.text3-tarefe:hover{-
}
.bottom-sefaresh{width:143px;
height:33px;
background:#0063c0;
color:#FFF;
text-align:center;
margin:auto;
border:solid #8eb8d5 thin;
border-radius:3px;
padding-top:9px;
font-size:22px;
margin-bottom:10px;
}
.bottom-sefaresh:hover{

background:#00a2ed;
color:#fcf1a5;
}
.contentus{margin:auto;
text-align:left;
height:auto;
width:auto;
}
.massage{min-width:150px;
min-height:70px;
border:dashed #09F thin;
}
.contentus1{margin:10px 360px 10px auto;
text-align:left;
height:auto;
width:auto;
}
.form{border:dashed #09F thin;
float:center;
margin-right:5px;
}
.hesab{width:800px;
height:auto;
margin:auto;
border:solid #09F thin;
border-radius:5px;
}
.text1-order{width:215px;
height:30px;
background:#009fff;
color:#FFF;
text-align:center;
border:solid #8eb8d5 thin;
border-radius:3px;
padding-top:5px;
margin:auto;
}
.form5{width:145px;
border:dashed #09F thin;
}
.form4{width:145px;
border:dashed #09F thin;
}
.b468{margin:20px auto;
text-align:center;
margin-top:10px;
}
ul, li, span {
    display: block
}

#ticker li {
    height: 20px;
}

#ticker {
    height: 20px;
    overflow: hidden;
}
@font-face2 {
 font-family: 'Titr';
 src: url('/fonts/B Titr Bold.eot');
 src: local('B Titr Bold'), url('fonts/B Titr Bold.woff') format('woff'), url('fonts/B Titr Bold.ttf') format('truetype'), url('B Titr Bold.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

#fixedmenu {
position:fixed;
width:230px;
height:500px;
top:100px;
left:0;
padding:15px;
background:#f5f5f5;
}

#div {
margin: 0px auto ;
padding: 0px
}

موفق باشید.

وسط چین کردن قالب html

amiredge

تازه وارد

rocki3oy

کاربر عضو

HamedR

کاربر عضو

amiredge

تازه وارد

IAMIR

کاربر عضو

rocki3oy

کاربر عضو