css-man
جمعه 22 مهر 1390, 14:32 عصر
وقتی متن اندازش از ارتفاع تگ اصلی سایت بیشتر میشه ازش میزنه بیرون
میخوام ارتفاع متنم هر چقدر بود ارتفاع سایت هم همونقدر بشه
چیزایی که بلد بودم رو پیاده کردم ولی یه جاش مورد داره که جواب نمیده لطفا یه نگاهی بهش بندازید
من هم باید بچسبه به پائیین سایت ولی نمیچسبه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<!--left-->
<div id="left">
<p class="navleft"></p>
<div id="menu">
<ul>
<li><a class="menu" href="#">خانه</a></li>
<li><a class="menu" href="#">طرح ها</a></li>
<li><a class="menu" href="#">اخبار</a></li>
<li><a class="menu" href="#">گالری</a></li>
</ul>
</div>
<p class="navright"></p>
<div id="logo"><img src="img/logo1.jpg" width="138" height="83" /></div>
<div id="titlen">نگاهی تحلیلی بر طراحی وب</div>
<div id="chat">موضوع:</div>
<div id="content">
<p>به سایت خانه طراحان وب خوش امدید .در ین سایت علاوه بر یاد گیری سر فصل های مربوط به طراحی وب می توانید سوالات خود را در بخش انجمن سایت مطرح کردی و از دوستان دیگر کاربران سایت راهنمائی بخواهید سعی ما در این سایت بالا بردن سطح دانش و کلاس طراحان وب سایت هاست.البته با کمک خود شما. </p></div>
<hr />
<div id="bt">
<input name="more" type="image" value="submit" src="img/btn.gif" />
</div>
<div id="date">1390/7/21</div>
<div id="author">مجتبی حسینی</div>
<div id="mostr"></div>
<div id="newsl"></div>
<div id="mrn">
<div id="nw">
<img src="img/Arrow Left.png">
<p>برد 6 بر صفر تیم ملی ایران...</p>
</div>
</div>
<div id="ln">
<div id="ln1">
<img src="img/Arrow Left.png">
<p>برد 6 بر صفر تیم ملی ایران...</p>
</div>
</div>
</div>
<!--endleft-->
<!--right-->
<div id="right">
<div id="search">
</div>
<div id="picd">
<h3>عکس روز</h3>
<img src="../../soft ware/Widescreen_Wallpapers_Graphic_3D_Arts_www.AsanDown load.com/Graphic3DArts/AsanDownload.com (10).jpg" /></div>
<div id="add">
<h3>تبلیغات</h3>
<img src="Untitled-1.jpg" /></div>
</div>
<!--endright-->
<p id="dnavleft"></p>
<div id="menu2">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<p id="dnavright"></p>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html,body{
margin:0px;
padding:0px;
background-color:#DC0405;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}
ul{
margin:0;
padding:0;
list-style-type:none;
line-height:0;
}
#wrapper{
background-color:#DC0405;
width:900px;
height:auto;
min-height:700px;
margin:0px auto;
border:1px solid #CCC;
}
/*left*/
#left{
width:500px;
height:auto;
min-height:600px;
float:left;
}
#left p.navleft{
position:relative;
background-image:url(img/navright.jpg);
background-repeat:no-repeat;
display:block;
width:20px;
height:26px;
float:left;
left:300px;
top: -1px;
}
#left p.navright{
position:relative;
background-image:url(img/bg_cornerright.jpg);
background-repeat:no-repeat;
width:24px;
height:22px;
float:left;
left: 300px;
top: 0px;
}
ul{
background-color:#FFF;
margin:0px;
width:auto;
}
li{
display:inline;
text-align:center;
}
#menu{
position:relative;
width:170px;
height:17pt;
background-color:#FFF;
float:left;
line-height:70px;
left: 300px;
top: 0px;
direction:rtl;
}
a.menu{
width:20px;
line-height:20px;
text-decoration:none;
color:#000;
font-family:"B titr";
font-size:10px;
margin-right:12px;
}
a.menu:hover{
color:#900;
font:bold;
}
#logo{
width:100px;
height:50px;
float:left;
margin-top:100px;
}
#logo img{
width:100px;
height:50px;
}
#titlen{
background-image:url(img/bg_titlen.jpg);
background-repeat:no-repeat;
height:45px;
width:255px;
margin-left:100px;
margin-top:40px;
direction:rtl;
float:left;
padding-right:15px;
padding-top:5px;
font-family:"B Nazanin";
font-size:13px;
color:#CCC;
}
#chat{
width:100px;
height:90px;
background-image:url(img/chat.png);
background-repeat:no-repeat;
margin-top:0px;
direction:rtl;
padding-right:30px;
padding-top:30px;
font-family:"B Titr";
color:#666;
float:left;
}
#content{
width:490px;
padding:5px 5px 5px 5px;
direction:rtl;
margin-top:260px;
color:#CCC;
}
#content p{
font:13px bold "B Nazanin";
color:#CCC;
}
hr{
width:250px;
text-align:center;
}
#bt{
width:60px;
height:25px;
margin-left:15px;
}
#date{
width:90px;
height:35px;
background-image:url(img/bg_history.jpg);
background-repeat:no-repeat;
margin-left:70px;
direction:rtl;
padding-right:120px;
padding-top:7px;
font-family:"B Nazanin";
font-size:14px;
color:#960;
float:left;
}
#author{
width:90px;
height:35px;
background-image:url(img/bg_author.jpg);
background-repeat:no-repeat;
direction:rtl;
padding-right:120px;
padding-top:7px;
font-family:"B Nazanin";
font-size:14px;
color:#960;
float:left;
}
#mostr{
width:220px;
height:35px;
background-image:url(img/bg_morerecent.jpg);
background-repeat:no-repeat;
margin-top:20px;
margin-left:50px;
float:left;
}
#newsl{
width:220px;
height:35px;
background-image:url(img/bg_lastnews.jpg);
background-repeat:no-repeat;
margin-top:20px;
float:left;
}
.mostr{
width:150px;
height:60px;
direction:rtl;
}
.newsl{
width:200px;
height:60px;
direction:rtl;
}
#mrn{
width:194px;
height:190px;
direction:rtl;
float:left;
margin-left:60px;
background-color:#A00405;
}
#ln{
width:194px;
height:190px;
direction:rtl;
float:left;
background-color:#A00405;
margin-left:27px;
}
#ln p{
font:12px "B Nazanin";
color:#CCC;
padding-right:5px;
}
#ln img{
width:25px;
height:20px;
float:right;
}
#ln1{
background-color:#750303;
width:160px;
float:right;
background-repeat:no-repeat;
padding-top:4px;
margin-right:20px;
}
#nw{
background-color:#750303;
width:160px;
float:right;
background-repeat:no-repeat;
padding-top:4px;
margin-right:20px;
}
#nw p{
font:12px "B Nazanin";
color:#CCC;
padding-right:5px;
}
#nw img{
width:25px;
height:20px;
float:right;
}
/*end left*/
/*right*/
#right{
width:340px;
height:auto;
margin-top:30px;
margin-left:5px;
float:left;
padding-left: 20px;
border-right: 20px;
background-color: #343434;
}
#search{
height:150px;
background-repeat:no-repeat;
background-color:#343434;
width: 340px;
background-image: url(img/bg_search.jpg);
border-bottom:1px solid #CCC;
}
#picd{
height:150px;
background-repeat:no-repeat;
background-color:#343434;
width: 340px;
}
#picd h3{
text-align:center;
color:#CCC;
}
#picd img{
width:320px;
height:120px;
}
#add {
width:320px;
height:150px;
}
#add img{
width:320px;
height:120px;
}
#add h3{
text-align:center;
color:#CCC;
}
/*endright*/
/*down menu*/
#dnavleft{
background-image:url(img/bgmenu.jpg);
background-repeat:no-repeat;
width:29px;
height:37px;
position:relative;
left:100px;
top:665px;
}
#dnavright{
background-image:url(img/bg_cornerleft.jpg);
background-repeat:no-repeat;
width:29px;
height:39px;
position:relative;
left:627px;
top:598px;
}
.list{
margin:0;
padding:0;
list-style-type:none;
line-height:0;
}
#menu2{
position:relative;
width:500px;
height:30px;
background-color:#FFF;
left: 128px;
top: 633px;
}
#menu3{
width:20px;
line-height:20px;
text-decoration:none;
color:#000;
font-size:10px;
margin-right:12px;
}
a.menu3:hover{
color:#900;
font:bold;
}
میخوام ارتفاع متنم هر چقدر بود ارتفاع سایت هم همونقدر بشه
چیزایی که بلد بودم رو پیاده کردم ولی یه جاش مورد داره که جواب نمیده لطفا یه نگاهی بهش بندازید
من هم باید بچسبه به پائیین سایت ولی نمیچسبه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<!--wrapper-->
<div id="wrapper">
<!--left-->
<div id="left">
<p class="navleft"></p>
<div id="menu">
<ul>
<li><a class="menu" href="#">خانه</a></li>
<li><a class="menu" href="#">طرح ها</a></li>
<li><a class="menu" href="#">اخبار</a></li>
<li><a class="menu" href="#">گالری</a></li>
</ul>
</div>
<p class="navright"></p>
<div id="logo"><img src="img/logo1.jpg" width="138" height="83" /></div>
<div id="titlen">نگاهی تحلیلی بر طراحی وب</div>
<div id="chat">موضوع:</div>
<div id="content">
<p>به سایت خانه طراحان وب خوش امدید .در ین سایت علاوه بر یاد گیری سر فصل های مربوط به طراحی وب می توانید سوالات خود را در بخش انجمن سایت مطرح کردی و از دوستان دیگر کاربران سایت راهنمائی بخواهید سعی ما در این سایت بالا بردن سطح دانش و کلاس طراحان وب سایت هاست.البته با کمک خود شما. </p></div>
<hr />
<div id="bt">
<input name="more" type="image" value="submit" src="img/btn.gif" />
</div>
<div id="date">1390/7/21</div>
<div id="author">مجتبی حسینی</div>
<div id="mostr"></div>
<div id="newsl"></div>
<div id="mrn">
<div id="nw">
<img src="img/Arrow Left.png">
<p>برد 6 بر صفر تیم ملی ایران...</p>
</div>
</div>
<div id="ln">
<div id="ln1">
<img src="img/Arrow Left.png">
<p>برد 6 بر صفر تیم ملی ایران...</p>
</div>
</div>
</div>
<!--endleft-->
<!--right-->
<div id="right">
<div id="search">
</div>
<div id="picd">
<h3>عکس روز</h3>
<img src="../../soft ware/Widescreen_Wallpapers_Graphic_3D_Arts_www.AsanDown load.com/Graphic3DArts/AsanDownload.com (10).jpg" /></div>
<div id="add">
<h3>تبلیغات</h3>
<img src="Untitled-1.jpg" /></div>
</div>
<!--endright-->
<p id="dnavleft"></p>
<div id="menu2">
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
<p id="dnavright"></p>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html,body{
margin:0px;
padding:0px;
background-color:#DC0405;
}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0; padding:0;
}
ul{
margin:0;
padding:0;
list-style-type:none;
line-height:0;
}
#wrapper{
background-color:#DC0405;
width:900px;
height:auto;
min-height:700px;
margin:0px auto;
border:1px solid #CCC;
}
/*left*/
#left{
width:500px;
height:auto;
min-height:600px;
float:left;
}
#left p.navleft{
position:relative;
background-image:url(img/navright.jpg);
background-repeat:no-repeat;
display:block;
width:20px;
height:26px;
float:left;
left:300px;
top: -1px;
}
#left p.navright{
position:relative;
background-image:url(img/bg_cornerright.jpg);
background-repeat:no-repeat;
width:24px;
height:22px;
float:left;
left: 300px;
top: 0px;
}
ul{
background-color:#FFF;
margin:0px;
width:auto;
}
li{
display:inline;
text-align:center;
}
#menu{
position:relative;
width:170px;
height:17pt;
background-color:#FFF;
float:left;
line-height:70px;
left: 300px;
top: 0px;
direction:rtl;
}
a.menu{
width:20px;
line-height:20px;
text-decoration:none;
color:#000;
font-family:"B titr";
font-size:10px;
margin-right:12px;
}
a.menu:hover{
color:#900;
font:bold;
}
#logo{
width:100px;
height:50px;
float:left;
margin-top:100px;
}
#logo img{
width:100px;
height:50px;
}
#titlen{
background-image:url(img/bg_titlen.jpg);
background-repeat:no-repeat;
height:45px;
width:255px;
margin-left:100px;
margin-top:40px;
direction:rtl;
float:left;
padding-right:15px;
padding-top:5px;
font-family:"B Nazanin";
font-size:13px;
color:#CCC;
}
#chat{
width:100px;
height:90px;
background-image:url(img/chat.png);
background-repeat:no-repeat;
margin-top:0px;
direction:rtl;
padding-right:30px;
padding-top:30px;
font-family:"B Titr";
color:#666;
float:left;
}
#content{
width:490px;
padding:5px 5px 5px 5px;
direction:rtl;
margin-top:260px;
color:#CCC;
}
#content p{
font:13px bold "B Nazanin";
color:#CCC;
}
hr{
width:250px;
text-align:center;
}
#bt{
width:60px;
height:25px;
margin-left:15px;
}
#date{
width:90px;
height:35px;
background-image:url(img/bg_history.jpg);
background-repeat:no-repeat;
margin-left:70px;
direction:rtl;
padding-right:120px;
padding-top:7px;
font-family:"B Nazanin";
font-size:14px;
color:#960;
float:left;
}
#author{
width:90px;
height:35px;
background-image:url(img/bg_author.jpg);
background-repeat:no-repeat;
direction:rtl;
padding-right:120px;
padding-top:7px;
font-family:"B Nazanin";
font-size:14px;
color:#960;
float:left;
}
#mostr{
width:220px;
height:35px;
background-image:url(img/bg_morerecent.jpg);
background-repeat:no-repeat;
margin-top:20px;
margin-left:50px;
float:left;
}
#newsl{
width:220px;
height:35px;
background-image:url(img/bg_lastnews.jpg);
background-repeat:no-repeat;
margin-top:20px;
float:left;
}
.mostr{
width:150px;
height:60px;
direction:rtl;
}
.newsl{
width:200px;
height:60px;
direction:rtl;
}
#mrn{
width:194px;
height:190px;
direction:rtl;
float:left;
margin-left:60px;
background-color:#A00405;
}
#ln{
width:194px;
height:190px;
direction:rtl;
float:left;
background-color:#A00405;
margin-left:27px;
}
#ln p{
font:12px "B Nazanin";
color:#CCC;
padding-right:5px;
}
#ln img{
width:25px;
height:20px;
float:right;
}
#ln1{
background-color:#750303;
width:160px;
float:right;
background-repeat:no-repeat;
padding-top:4px;
margin-right:20px;
}
#nw{
background-color:#750303;
width:160px;
float:right;
background-repeat:no-repeat;
padding-top:4px;
margin-right:20px;
}
#nw p{
font:12px "B Nazanin";
color:#CCC;
padding-right:5px;
}
#nw img{
width:25px;
height:20px;
float:right;
}
/*end left*/
/*right*/
#right{
width:340px;
height:auto;
margin-top:30px;
margin-left:5px;
float:left;
padding-left: 20px;
border-right: 20px;
background-color: #343434;
}
#search{
height:150px;
background-repeat:no-repeat;
background-color:#343434;
width: 340px;
background-image: url(img/bg_search.jpg);
border-bottom:1px solid #CCC;
}
#picd{
height:150px;
background-repeat:no-repeat;
background-color:#343434;
width: 340px;
}
#picd h3{
text-align:center;
color:#CCC;
}
#picd img{
width:320px;
height:120px;
}
#add {
width:320px;
height:150px;
}
#add img{
width:320px;
height:120px;
}
#add h3{
text-align:center;
color:#CCC;
}
/*endright*/
/*down menu*/
#dnavleft{
background-image:url(img/bgmenu.jpg);
background-repeat:no-repeat;
width:29px;
height:37px;
position:relative;
left:100px;
top:665px;
}
#dnavright{
background-image:url(img/bg_cornerleft.jpg);
background-repeat:no-repeat;
width:29px;
height:39px;
position:relative;
left:627px;
top:598px;
}
.list{
margin:0;
padding:0;
list-style-type:none;
line-height:0;
}
#menu2{
position:relative;
width:500px;
height:30px;
background-color:#FFF;
left: 128px;
top: 633px;
}
#menu3{
width:20px;
line-height:20px;
text-decoration:none;
color:#000;
font-size:10px;
margin-right:12px;
}
a.menu3:hover{
color:#900;
font:bold;
}