ورود

View Full Version : مشکل من با سایت 3 ستونی


ehssan_it
چهارشنبه 08 دی 1389, 12:22 عصر
من میخوام یه سایت شبیه این عکس درست کنم
تا اونجائی که اپلود کردم پیش رفتم ولی اونی که می خوام نیست

می تونی کد رو تغییر بدی کار ما رو هم راه بندازه
3 -4 روزه که دارم روش کار می کنم http://barnamenevis.org/attachment.php?attachmentid=64249&d=1293612915
یه کارائی کردم ولی مد نظر من نبوده تا الان
Keramatifar
چهارشنبه 08 دی 1389, 13:30 عصر
دوست عزیز
من اینجا کدی نمی بینم
ehssan_it
چهارشنبه 08 دی 1389, 15:34 عصر
کد اچتمل


<!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-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>احسان وحیدی فرد</title>
<link rel="stylesheet" type="text/css" href="myc.css"

</head>

</body>
<!-- menu-->
<div class="topmenu" >

menu
</div>

<!-- vasat-->
<div class="main" >
salam22<br />


fdgdghfdjkghfdkgkdfgdfgdfjgkjhgkjfhdgkjfdhgjkfdhgj dfkjg
fdghjfghfghfdkghkjfdghjkfdfjkgdkfghjfdkghkjd
hgkjdhgkjfdhgkdfhjgkdhjgkfhgkdhgkjgkdfgkdjhgkjdfgj dfk
fdgdghfdjkghfdkgkdfgdfgdfjgkjhgkjfhdgkjfdhgjkfdhgj dfk<br />
jgfdghjfdkghkjfdghjkfghkjdfdgdgdfgdfgdfgdfgdfgdgdg dgdfgdf<br />
gdf<br />
gdfgdfgdfgdfgdfgdfgdfgdffwefewrewgdhhjfklfsjdskjfk fjksjddsfjflksdgkjdfgkjdhgjdfhjkgdhfgkdhfkgjdfjkgd kfghjfdk<br />
ghkjdhgkjdhgkjfdhgkdfhjgkdhjgkfhgkdhgkjgkdfgkdjhgk jdfgjd<br />
fkfdgdghfdjkghfdkgkdfgdfgdfjgkjhgkjfhdg<br />

fgjdfkfdgdghfdjkghfdkgkdfgdfgdfjgkjhgkjfhdgkjfdhgj kfdhgjdfkjgfdghjfdk<br />
ghkjfdghjkfghkjdfgkjdfgkjdhgjdfhjkgdhfgkdhfkgjdfjk gdkfghjfdkghkjdhgkjdhgkjfdhgkdfhjg
kdhjgkfhgkdhgkjgkdfgkdjhgkjdfgjdfk</div>

<!-- chap-->
<div class="left" align="center" >


</div>
<!-- rast-->
<div align="center" class="right" >


<br />
<br />

</div>
</html>




کد css

div.left{
background-image:url('images/leftnav.gif');
background-position:left;
text-align: justify ;
float: left ;
width: 364px;
height: 350px;



}
div.right{
background-image: url('images/rightnav.gif') ;
background-position: right ;
text-align: justify ;
float: right ;
width: 364px;
height: 350px;

}

div.main{
position: absolute ;top: 2%; left: 390px;
text-align: justify ;
width:45%;
height:85%;

margin-top: 20px;
overflow:visible;

background: blue ;


}
body{
background-image:url('images/NaturalT-014.jpg') ;
}
div.topmenu{
text-align: center ;
margin-top: 0%;
background-color: fuchsia ;
width: 590px;
margin-left: 364px;

}

هر کاری کردم شبیه اون عکی نشد که نشد
منتظر راهنمائی شما هستم
ممنون
mtorabi
چهارشنبه 08 دی 1389, 17:08 عصر
والا من که عکسی نمی بینم اما اگه می خوای سه ستون در سایت داشته باشی باید مقدار float هر div سازنده ستون رو برابر left قرار بدی(یا هر سه right)اصلاح کد css:

div.left{
background-image:url('images/leftnav.gif');
background-position:left;
text-align: justify ;
float: left ;
width: 20%;
height: 350px;
display:block;



}
div.right{
background-image: url('images/rightnav.gif') ;
background-position: right ;
text-align: justify ;
float: left ;
width: 30%;
height: 350px;
display:block;

}

div.main{
float: left ;
text-align: justify ;
width:45%;
height:85%;
display:block;


حالا اگه مشکلت با این اصلاح درست نشد راهنمایی کن عکس کجاست تا نظر دقیق تر بدم
ehssan_it
پنج شنبه 09 دی 1389, 16:55 عصر
عکس رو دوباره اپلود کردم یه نگاهی بهش بنداز
http://ariaraia.persiangig.com/site.gif
Keramatifar
پنج شنبه 09 دی 1389, 19:34 عصر
این کد یک صفحه html سه ستونی است که قبلا برای یکی تاپیک ها مثال زده بودم

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html>
<head>
<title>sample</title>
<style type="text/css">
*{margin: 0; padding: 0;}
div#outerDiv{
width: 100%;
background-color: black;
}
div#headerDiv{
width: 100%;
border-bottom: 1px solid black;

}
div#contentDiv{
width: 100%;
height: auto;
background-color: white;
}
div#footerDiv{
width: 100%;
height: 150px;
border-top: 1px solid black;
}
.leftDiv{
float: left;
background-color: red;
width: 20%;
position: relative;
}
.centerDiv{
float: left;
background-color: white;
width: 60%;
}
.rightDiv{
float: left;
background-color: blue;
width: 20%;
}
div#contentDiv div.leftDiv div.leftSideBar{
height: 200px;
width: 200px;
background-color: gray;
margin: 0 auto;
margin-top: 10px;



}
.clear{clear: both}

</style>

</head>
<body>
<div id="outerDiv">
<div id="headerDiv">
<div class="leftDiv">
<p>div1 <br /> <br /></p>
</div>
<div class="centerDiv">
<p>div2 <br /> <br /></p>
</div>
<div class="rightDiv">
<p>div3 <br /> <br /></p>

</div>
<p class="clear"></p>
</div>
<div id="contentDiv">
<div class="leftDiv">
<!--<p style="height: 390px;">div4</p>-->
<p>div4</p>
<div class="leftSideBar"><p>Left Side Bar</p></div>
<div class="leftSideBar"><p>Left Side Bar</p></div>

</div>

<div class="centerDiv">
<p style="height: 390px;">div5</p>
</div>
<div class="rightDiv">
<p style="height: 390px;">div6</p>
</div>
<div class="clear"> </div>
</div>
<div id="footerDiv">
<div class="leftDiv">
<p style="height: 50px;">div7</p>
</div>
<div class="centerDiv">
<p style="height: 50px;">div8</p>
</div>
<div class="rightDiv">
<p style="height: 50px;">div9</p>
</div>
</div>
</div>
</body>

</html>
mtorabi
پنج شنبه 09 دی 1389, 20:58 عصر
عکس رو دوباره اپلود کردم یه نگاهی بهش بنداز
http://ariaraia.persiangig.com/site.gif

این هم کد html و css این عکس اگه نیاز به توضیح بود خبرم کن
موفق باشی
mahsa.n
شنبه 18 دی 1389, 14:50 عصر
[QUOTE=Mr.Keramati;1183851]این کد یک صفحه html سه ستونی است که قبلا برای یکی تاپیک ها مثال زده بودم

سلام
من میخوام بین div هام فاصله باشه چی کار کنم که div وسطی از سمت راست و چپ به یه اندازه فاصله داشته باشه یعنی دقیقا بیفته وسط صفحه .مثل این عکس
64719
tkmtkm
شنبه 18 دی 1389, 16:49 عصر
سلام




margin-right:5px;
mahsa.n
یک شنبه 19 دی 1389, 08:34 صبح
نه اینطوری منظورم نبود
میخوام تصویر وسطی دقیقا وسط صفحه بیفته
وقتی margin:0 auto میذارم عکس سمت راستی میفته پایین
Keramatifar
جمعه 24 دی 1389, 09:35 صبح
اینکار فقط در حالت طراحی fixed size ممکنه، شما باید خودتون محاسبه کنید و margin دقیق به المنت ها بدید
Attaran
شنبه 25 دی 1389, 00:32 صبح
نه اینطوری منظورم نبود
میخوام تصویر وسطی دقیقا وسط صفحه بیفته
وقتی margin:0 auto میذارم عکس سمت راستی میفته پایین

سلام
برای اینکه عکس سمت راستی پایین نیاد باید خاصیت Vertical-Align که داخل Style را top کنی دیگه پایین نمیاد