arezooafshari
چهارشنبه 02 مهر 1393, 10:19 صبح
توی شکل زیر دوتا سوال دارم
میخوام header و footer توی کل صفحه ادامه پیدا کنند، یعنی قسمت آبی ادامه دار باشد(قسمت هایی که با قرمز مشخص شده)
و همچنین قسمت سبز بعد از کلیک زرد می شود، می خوام این اتفاق نیفتد و رنگش تغییر نکند، (این قسمت کد از تگ input استفاده شده که type آن image است)
<html><head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="login uni.css"></head><body><!-- for header --> <div class="header"> <p class="sys"> سیستم اطلاعات دانشجویی </p> <p class="uni"> دانشگاه آزاد اسلامی </p> </div><!-- for content --> <div class="bbox"><!-- ورود به سیستم --> <div class="csys"> <p class="come"> ورود به سیستم </p> </div><!-- right box --> <div class="rbox"> <input class="input1"> <p id="max"> حداکثر 6 حرف می باشد </p> <input class="input2"> <p id="max"> حداکثر 8 حرف می باشد </p> <p class="code"> کد امنیتی زیر را وارد کنید: </p> <div class="rbi3"><input class="input3"> <input type="image" class="image" src="1.png" /></div> <input type="button" value="ورود"> </div><!-- under right box --> <div class="urbox"> <p class="error"> در صورت اشکال شماره زیر را به صرت تلفنی به دانشگاه اعلام کنید. </p> <p class="vp"> vp:41 </p> </div><!-- left box --> <div class="lbox"> <div class="first"> <p class="note"> نکات مهم در خصوص انتخاب واحد ترم اول 93-94 </p> </div> <div id="another"></div> <div id="another"></div> <div id="another"></div> <div id="another"></div> <div id="another"></div> </div> </div><!-- footer --> <div class="footer"> <p class="hooghoogh"> تمامی حقوق محفوظ است </p> </div></body></html>
body{ margin:0 auto;
width:960px;
direction:rtl;
font-family:tahoma;
}
.header{
height:70px;
background-color:blue;
margin-top:30px;
}
.sys{
color:white;
font-weight:bold;
padding-top:10px;
font-size:15px;
}
.uni{
color:white;
margin-right:122px;
font-weight:bold;
font-size:10px;
}
.bbox{
background-color:white;
margin-top:50px;
height:300px;
width:960px;
position:relative;
padding-top:25px;
margin-bottom:160px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
}
.csys{
background-color:white;
width:100px;
position:absolute;
bottom:325px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.come{
font-size:10px;
font-weight:bold;
padding-right:10px;
}
.rbox{
height:250px;
background-color:gray;
width:370px;
margin-right:30px;
float:right;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid black;
}
#max{
color:red;
margin-right:30px;
}
.code{
margin-right:30px;
}
.input1{
height:35px;
width:320px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:20px;
margin-top:10px;
margin-bottom:-10px;
}
.input2{
height:35px;
width:320px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:20px;
margin-bottom:-10px;
}
.rbi3{
width:227px;
float:right;
}
.input3{
height:36px;
width:150px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:55px;
margin-bottom:-12px;
float:left;
}
.image{
-webkit-border-top-right-radius:7px;
-moz-border-radius-topright:7px;
border-top-right-radius:7px;
margin-right:20px;
float:right;
margin-top:-23px;
}
input[type="button"]{
height:36px;
width:90px;
background-color:blue;
color:white;
font-weight:bold;
font-size:20px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-left:32px;
margin-bottom:-8px;
float:left;
}
.urbox{
width:340px;
height:40px;
background-color:blue;
margin-top:252px;
margin-right:-356px;
float:right;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border:1px solid black;
}
.error{
color:white;
font-size:10px;
padding-right:6px;
padding-top:5px;
float:right;
}
.vp{
color:white;
font-size:9px;
font-weight:bold;
padding-left:6px;
padding-top:6px;
direction:ltr;
float:left;
}
.lbox{
height:250;
background-color:gray;
width:475px;
margin-left:30px;
float:left;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid black;
}
.first{
background-color:white;
height:36px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
margin-top:-16px;
}
.note{
color:red;
padding-top:5px;
padding-right:30px;
}
#another{
background-color:white;
height:30px;
margin-top:10px;
border:1px solid black;
}
.footer{
width:960px;
height:35px;
background-color:blue;
}
.hooghoogh{
color:white;
font-size:10px;
font-weight:bold;
padding-top:10px;
}
میخوام header و footer توی کل صفحه ادامه پیدا کنند، یعنی قسمت آبی ادامه دار باشد(قسمت هایی که با قرمز مشخص شده)
و همچنین قسمت سبز بعد از کلیک زرد می شود، می خوام این اتفاق نیفتد و رنگش تغییر نکند، (این قسمت کد از تگ input استفاده شده که type آن image است)
<html><head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="login uni.css"></head><body><!-- for header --> <div class="header"> <p class="sys"> سیستم اطلاعات دانشجویی </p> <p class="uni"> دانشگاه آزاد اسلامی </p> </div><!-- for content --> <div class="bbox"><!-- ورود به سیستم --> <div class="csys"> <p class="come"> ورود به سیستم </p> </div><!-- right box --> <div class="rbox"> <input class="input1"> <p id="max"> حداکثر 6 حرف می باشد </p> <input class="input2"> <p id="max"> حداکثر 8 حرف می باشد </p> <p class="code"> کد امنیتی زیر را وارد کنید: </p> <div class="rbi3"><input class="input3"> <input type="image" class="image" src="1.png" /></div> <input type="button" value="ورود"> </div><!-- under right box --> <div class="urbox"> <p class="error"> در صورت اشکال شماره زیر را به صرت تلفنی به دانشگاه اعلام کنید. </p> <p class="vp"> vp:41 </p> </div><!-- left box --> <div class="lbox"> <div class="first"> <p class="note"> نکات مهم در خصوص انتخاب واحد ترم اول 93-94 </p> </div> <div id="another"></div> <div id="another"></div> <div id="another"></div> <div id="another"></div> <div id="another"></div> </div> </div><!-- footer --> <div class="footer"> <p class="hooghoogh"> تمامی حقوق محفوظ است </p> </div></body></html>
body{ margin:0 auto;
width:960px;
direction:rtl;
font-family:tahoma;
}
.header{
height:70px;
background-color:blue;
margin-top:30px;
}
.sys{
color:white;
font-weight:bold;
padding-top:10px;
font-size:15px;
}
.uni{
color:white;
margin-right:122px;
font-weight:bold;
font-size:10px;
}
.bbox{
background-color:white;
margin-top:50px;
height:300px;
width:960px;
position:relative;
padding-top:25px;
margin-bottom:160px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
}
.csys{
background-color:white;
width:100px;
position:absolute;
bottom:325px;
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.come{
font-size:10px;
font-weight:bold;
padding-right:10px;
}
.rbox{
height:250px;
background-color:gray;
width:370px;
margin-right:30px;
float:right;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid black;
}
#max{
color:red;
margin-right:30px;
}
.code{
margin-right:30px;
}
.input1{
height:35px;
width:320px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:20px;
margin-top:10px;
margin-bottom:-10px;
}
.input2{
height:35px;
width:320px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:20px;
margin-bottom:-10px;
}
.rbi3{
width:227px;
float:right;
}
.input3{
height:36px;
width:150px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-right:55px;
margin-bottom:-12px;
float:left;
}
.image{
-webkit-border-top-right-radius:7px;
-moz-border-radius-topright:7px;
border-top-right-radius:7px;
margin-right:20px;
float:right;
margin-top:-23px;
}
input[type="button"]{
height:36px;
width:90px;
background-color:blue;
color:white;
font-weight:bold;
font-size:20px;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
margin-left:32px;
margin-bottom:-8px;
float:left;
}
.urbox{
width:340px;
height:40px;
background-color:blue;
margin-top:252px;
margin-right:-356px;
float:right;
-webkit-border-bottom-right-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomright: 7px;
-moz-border-radius-bottomleft: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;
border:1px solid black;
}
.error{
color:white;
font-size:10px;
padding-right:6px;
padding-top:5px;
float:right;
}
.vp{
color:white;
font-size:9px;
font-weight:bold;
padding-left:6px;
padding-top:6px;
direction:ltr;
float:left;
}
.lbox{
height:250;
background-color:gray;
width:475px;
margin-left:30px;
float:left;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid black;
}
.first{
background-color:white;
height:36px;
-webkit-border-top-left-radius:7px;
-webkit-border-top-right-radius:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
border-top-left-radius:7px;
border-top-right-radius:7px;
margin-top:-16px;
}
.note{
color:red;
padding-top:5px;
padding-right:30px;
}
#another{
background-color:white;
height:30px;
margin-top:10px;
border:1px solid black;
}
.footer{
width:960px;
height:35px;
background-color:blue;
}
.hooghoogh{
color:white;
font-size:10px;
font-weight:bold;
padding-top:10px;
}