تگ div

rezashoja

کاربر تازه وارد
تازه وارد
سلام من یک صفحه با دریم ویور دارم میسازم که سه تاستون داره ساید بار یک و ساید بار دو سرجاشون قرار میگیرند اما کانتنت سرجاش که وسط این دوتاست قرار نمیگیره و یک چیز دیگه ای هم که هست من با اینکه یک parent براشون انتخاب کردم و از نظر خودم همه چیز درسته این سه تا div با هم بسته نمیشه یعنی ارتفاعشون با هم فرق داره این اچ تی ام الش هست
کد:
[LEFT]
<!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>
<link rel="shortcut icon" type="image/jpg" href="Untitled.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.ir</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="header">
<img src="gheymat.tablet.20.Aban.jpg" height="180" alt="www.ir" title="www.ir"/>
</div>
<div class="main"><a href="#" target="_blank"><img src="صفحه اصلی.jpg"/></a><a href="#" target="_blank"><img src="محصولات.jpg"/></a><a href="#" target="_blank"><img src="تبلیغات.jpg"/></a><a href="#" target="_blank"><img src="نظرات.jpg"/></a><a href="#" target="_blank"><img src="عضویت.jpg"/></a><a href="#" target="_blank"><img src="درباره ما.jpg"/></a></div>
<div class="parent">
<div class="sidebar_1">نرم افزار
</div>
<div class="sidebar_2">پربیننده ترین نیتکشسمین شسیحخه شسکمینب مسینبا سیشنتبا خسیشهاب حضخهبت سشکمتسیمناحشسخیب صحخقثاب سینمشتا سحیخهبع شسخیهبا شسمنیت کشنمسب خحسشیغباحسقخثعاب سشیکنتسشیکنماب حخ سینمتک
</div>
<div class="content">یییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییییبیسبس یسبسیب مطالب سایتl;jhfldksjh sa aslkdfsalkjd salkdf sladkuhf laskuthr s;alkcn lasjhf lsvakfh sadlkj ltkuhc apsdicsadl;kafvklsqdc lkasjbflask jdf lksauhrv jsv
</div>
</div>
</body>
</html>
[/LEFT]
اینم سی اس اسش
کد:
[LEFT]
@charset "utf-8";
/* CSS Document */
body
{
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    background:#F2FAFB;
    vertical-align:top;
    direction:rtl;
}
.header
{
    vertical-align:top;
    margin:15px 15px 0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    background:white;
    border:ridge;
    border-bottom:none;
}
.main
{
    background:#FFF;
    margin:0 15px;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:right;
    border:ridge;
    vertical-align:middle;
    padding-right:20px;
}
.sidebar_1
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:right;
    width:200px;
    border-top:none;
    height:100%;
    display:table-row;    
}
.sidebar_2
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:left;
    width:200px;
    border-top:none;
    height:100%;
    display:table-row;    
}    
.content
{
    background:#FFF;
    margin:auto;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    vertical-align:top;
    padding:5px;
    width:430px;
    height:100%;
    display:table-row;
    border-bottom:ridge;    
}
.parent
{
    background:#FFF;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    height:auto;
    margin:0 15px;
    display:table;
    clear:both;
}
.footer
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:right;
    width:200px;
    border-top:none;
}
[/LEFT]
البته متن سی اس اس و اچ تی ام ال رو که اینجا کپی کردم برعکس شد بعضی چیز ها.
اگه کسی چیزی یا مشکلی در این باره میدونه خواهش میکنم که جواب بده.
راستی تصویرش رو هم گذاشتم
 

پیوست ها

elahi

مدیریت
مدیر کل انجمن
پاسخ : تگ div

تا حدودی برظرف شد ، بفزمائید :

html :


کد:
<!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>
<link rel="shortcut icon" type="image/jpg" href="Untitled.jpg"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.ir</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">
<div class="header"><img src="gheymat.tablet.20.Aban.jpg" height="180" alt="www.ir" title="www.ir"/></div>

<a href="#" target="_blank"><img src="صفحه اصلی.jpg"/></a><a href="#" target="_blank"><img src="محصولات.jpg"/></a><a href="#" target="_blank"><img src="تبلیغات.jpg"/></a><a href="#" target="_blank"><img src="نظرات.jpg"/></a><a href="#" target="_blank"><img src="عضویت.jpg"/></a><a href="#" target="_blank"><img src="درباره ما.jpg"/></a></div>

<div class="parent">

<div class="sidebar_1">نرم افزار
</div>

<div class="content">
<p>
 یسبسیب مطالب سایت
l;jhfldksjh sa aslkdfsalkjd salkdf sladkuhf laskuthr s;alkcn lasjhf lsvakfh sadlkj ltkuhc apsdicsadl;kafvklsqdc lkasjbflask jdf lksauhrv jsv
</p>
</div>

<div class="sidebar_2">پربیننده ترین نیتکشسمین شسیحخه شسکمینب مسینبا سیشنتبا خسیشهاب حضخهبت سشیغینمتک </div>


</div>
</body>
</html>


css :



کد:
@charset "utf-8";
/* CSS Document */
body
{
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    background:#F2FAFB;
    vertical-align:top;
    direction:rtl;
}
.header
{
    vertical-align:top;
    margin:15px 15px 0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    background:white;
    border:ridge;
    border-bottom:none;
}
.main
{
    background:#FFF;
    margin:0 15px;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:right;
    border:ridge;
    vertical-align:middle;
    padding-right:20px;
    width:850px;
    margin:0px auto 0px auto;
}
.sidebar_1
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:left;
    width:150px;
    border-top:none;
       
}
.sidebar_2
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:left;
    width:150px;
    border-top:none;
    display:table-row;    
}    
.content
{
    background:#FFF;
    margin:auto;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    vertical-align:top;
    padding:5px;
    width:444px;
    display:table-row;
    border-bottom:ridge;   
    float:left; 
}
.parent
{
    background:#FFF;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    margin:0 15px;
    display:table;
    clear:both;
    width:850px;
    margin:0px auto 0px auto;
}
.footer
{
    background:#FFF;
    margin:0;
    font:xx-large "adobe Arabic", "0 Narenj", "0 Nazanin", "B Badr", "B Ferdosi", "B Homa", "B Mitra", "Monotype Corsiva";
    text-align:center;
    border: ridge;
    vertical-align:top;
    padding:20px;
    float:right;
    width:200px;
    border-top:none;
}
 
بالا