r4hgozar
دوشنبه 06 خرداد 1392, 15:48 عصر
سلام دوستان وقتی من کد زیر رو می نویسم از نظر خودم همه چی درسته ولی وقتی منوی های سمت چپ رو اضافه می کنم صفحه بهم میریزه.
کدی که باعث خطا میشه رو گذاشتم ممنون میشم کمکم کنید.
<!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" />
<title>وب سایت من</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wapper">
<div id="header">
<div id="image-header">
<div id="title-header">سایت زیبای من</div>
</div>
<div id="left-menu-wapper">
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
</div>
<div id="content-wapper">
<div id="slider"></div>
<div id="content">
<div class="content-title">عنوان</div>
<div class="content-text"> مطلب آزمایشی</div>
<div class="line"></div>
<div class="content-sub-title"><a href="#">ادامه مطلب</a></div>
<div class="content-sub-title">دیدگاه:</div>
<div class="content-sub-title"> نویسنده:</div>
</div>
</div>
<div id="right-menu">
<div class="menu-title">منوی راست</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCC;
font-family: tahoma;
font-size: 12px;
}
#wapper {
background-color: #efefef;
width: 1024px;
height: 728px;
margin: auto;
border-radius:6px 6px 10px 10px;
-moz-border-radius:6px 6px 5px 5px;
}
#header {
width: 1022px;
height: 180px;
border: 1px solid #999px;
border-radius:6px 6px 10px 10px;
-moz-border-radius:6px 6px 5px 5px;
}
#image-header {
height: 122px;
width: 1020px;
background-image: url('img/Untitled-1_03.png');
background-repeat: repeat-x;
margin-top: 5px;
float: left;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
}
#title-header {
width: 200px;
height: 100px;
margin: auto;
margin-top: 40px;
font-size: 22px;
font-family: tahoma;
border-radius:6px 6px 5px 5px;
-moz-border-radius:6px 6px 5px 5px;
}
#left-menu-wapper {
float: left;
height: auto;
width: 176;
margin-top: 12px;
}
.left-menu {
float: left;
height: 330px;
width: 172px;
border: 1px solid #CCC;
border-radius: 5px 5px 5px 5px;
-moz-border-radius :5px 6px 5px 5px;
margin-left: 2px;
margin-top: 3px;
background-color: #FFF;
}
.menu-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
height: 20px;
border-bottom: 1px solid #CCC;
background-color: #FFF;
}
#content-wapper {
width: 650px;
height: auto;
float: left;
margin-left: 4px;
margin-top: 5px;
}
#slider {
width: 640px;
border: 2px solid #CCC;
height: 150px;
background-color: #FFF;
float: left;
margin-top: 3px;
margin-left: 4px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
}
#content {
width: 610px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
float: left;
margin-top: 5px;
margin-left: 15px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
direction: rtl;
}
#right-menu {
float: right;
margin-right: 4px;
height: 330px;
width: 175px;
border: 1px solid #CCC;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
margin-top: 12px;
background-color: #FFF;
}
.content-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
height: 20px;
border-bottom: 1px solid #CCC;
background-color: #FFF;
}
.content-sub-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
float: right;
margin-right: 4px;
height: 20px;
width: 195px;
background-color: #FFF;
}
.content-sub-title a {
text-decoration: none;
color: #000;
}
.content-text {
direction: rtl;
text-align: right;
}
.line {
border: 1px solid #CCC;
width: 605px;
color: #CCC;
}
کدی که باعث خطا میشه رو گذاشتم ممنون میشم کمکم کنید.
<!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" />
<title>وب سایت من</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wapper">
<div id="header">
<div id="image-header">
<div id="title-header">سایت زیبای من</div>
</div>
<div id="left-menu-wapper">
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
<div class="left-menu">
<div class="menu-title">منوی چپ</div>
</div>
</div>
<div id="content-wapper">
<div id="slider"></div>
<div id="content">
<div class="content-title">عنوان</div>
<div class="content-text"> مطلب آزمایشی</div>
<div class="line"></div>
<div class="content-sub-title"><a href="#">ادامه مطلب</a></div>
<div class="content-sub-title">دیدگاه:</div>
<div class="content-sub-title"> نویسنده:</div>
</div>
</div>
<div id="right-menu">
<div class="menu-title">منوی راست</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #CCC;
font-family: tahoma;
font-size: 12px;
}
#wapper {
background-color: #efefef;
width: 1024px;
height: 728px;
margin: auto;
border-radius:6px 6px 10px 10px;
-moz-border-radius:6px 6px 5px 5px;
}
#header {
width: 1022px;
height: 180px;
border: 1px solid #999px;
border-radius:6px 6px 10px 10px;
-moz-border-radius:6px 6px 5px 5px;
}
#image-header {
height: 122px;
width: 1020px;
background-image: url('img/Untitled-1_03.png');
background-repeat: repeat-x;
margin-top: 5px;
float: left;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
}
#title-header {
width: 200px;
height: 100px;
margin: auto;
margin-top: 40px;
font-size: 22px;
font-family: tahoma;
border-radius:6px 6px 5px 5px;
-moz-border-radius:6px 6px 5px 5px;
}
#left-menu-wapper {
float: left;
height: auto;
width: 176;
margin-top: 12px;
}
.left-menu {
float: left;
height: 330px;
width: 172px;
border: 1px solid #CCC;
border-radius: 5px 5px 5px 5px;
-moz-border-radius :5px 6px 5px 5px;
margin-left: 2px;
margin-top: 3px;
background-color: #FFF;
}
.menu-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
height: 20px;
border-bottom: 1px solid #CCC;
background-color: #FFF;
}
#content-wapper {
width: 650px;
height: auto;
float: left;
margin-left: 4px;
margin-top: 5px;
}
#slider {
width: 640px;
border: 2px solid #CCC;
height: 150px;
background-color: #FFF;
float: left;
margin-top: 3px;
margin-left: 4px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
}
#content {
width: 610px;
height: auto;
background-color: #FFF;
border: 1px solid #CCC;
float: left;
margin-top: 5px;
margin-left: 15px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
direction: rtl;
}
#right-menu {
float: right;
margin-right: 4px;
height: 330px;
width: 175px;
border: 1px solid #CCC;
border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 6px 5px 5px;
margin-top: 12px;
background-color: #FFF;
}
.content-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
height: 20px;
border-bottom: 1px solid #CCC;
background-color: #FFF;
}
.content-sub-title {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
text-align: right;
float: right;
margin-right: 4px;
height: 20px;
width: 195px;
background-color: #FFF;
}
.content-sub-title a {
text-decoration: none;
color: #000;
}
.content-text {
direction: rtl;
text-align: right;
}
.line {
border: 1px solid #CCC;
width: 605px;
color: #CCC;
}