ورود

View Full Version : طراحی یک CSS


yasercomeng
یک شنبه 15 دی 1387, 11:42 صبح
با سلام. من مي خوام يه فايل CSS درست كنم كه بتونم اين شكل رو تويه صفحه ي نمايش نشون بده.
اما من با اين چيزي كه خودم درست كردم يه خرده مشكل دارم و اونم اينه كه با تغيير طول متن هر كدوم از متن هايي كه از كلاس شامل Position=absolute; استفاده مي كنه.متن نوشته شده در جعبه ي پاييني مياد زير جعبه ي اون كلاسي كه اين خاصيت رو داره.
سوالم اينه كه من كجا اشتباه كردم و چه چيزي رو بايد تغيير بدم؟ يا اينكه اگه كلاً اشتباه رفتم لطفاً راه درست رو به من بگيد.
emad_67
یک شنبه 15 دی 1387, 12:10 عصر
کدت رو بزار اینجا، با عکس که نمیشه گفت کجا رو اشتباه کردی.
yasercomeng
یک شنبه 15 دی 1387, 12:36 عصر
ببخشید کد رو یادم رفته بود:
فکر کنم یه همچین چیزی نوشتم.چون کد رو همراه خودم نیاوردم.

rightbox
{
background: "#000000";
margin-left=: 65%;
position: absolute;
}
leftbox
{
background: "#000000";
margin-right: 35%;
}
box
{
background: "#000000";
margin-top: 5px;
}
emad_67
یک شنبه 15 دی 1387, 12:53 عصر
شما کد کامل css و html اونو بزار تا دقیق بتونم جواب بدم.
اما یه مثال:


<style type="text/css">
.rightbox
{
position: absolute;
top: 10px;
right: 10px;
width: 300px;
border: 1px solid #000;
}
.lefttbox
{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
border: 1px solid #000;
}
.bottombox
{
margin-top: 20px;
border: 1px solid #000;
}
</style>
</head>

<body>
<div class="rightbox">roght box</div>
<div class="lefttbox">left box</div>
<div class="bottombox">bottom area</div>
</body>
yasercomeng
دوشنبه 23 دی 1387, 10:01 صبح
اینم خود فایل به همراه CSS اش.
مشکل اصلی اینه که با کوچکتر شدن متنی که خاصیت absolute تویه div اش به کار رفته متن پایینی میاد زیر جعبه ی سمت راست
emad_67
دوشنبه 23 دی 1387, 15:26 عصر
خوب طبیعی هست دیگه، وقتی یه چیزی رو absolute میکنی اون المان از جریان کلی صفحه خارج میشه و دیگه اندازش تاثیری روی موقعیت بقیه نمیزاره. شما اون div ئی رو که absolute هست با margin موقعیت دهی کن.
emad_67
سه شنبه 24 دی 1387, 11:29 صبح
با margin ؟!!!؟؟؟!!!

با top و left و یا right
بله، مگه مشکلی داره؟
emad_67
سه شنبه 24 دی 1387, 19:22 عصر
کار نشد نداره ولی صحیح نیست
شما خوب یه مثال بزن تا منم صحیحشو یاد بگیرم.
دو تا div رو در کنار همدیگه قرار بده و یک div هم در پایین اون دو تا، طوری که با کم یا زیاد شدن ارتفاع div های بالایی، div پایینی هم تغییر موقعیت بده.
emad_67
چهارشنبه 25 دی 1387, 09:13 صبح
درسته . چند راه وجود داره ولی توی شرایطی که این دوستمون سوال پرسیده بودن اصلا با margin صحیح نبود.
وقتی که قرار عنصر ما خاصیت absolute اگر اشتباه ننوشته باشم رو قبول کنهخوب راه کار شما چیه؟
عاملی که باعث مشکل میشه همین absolute هست، پس ناچارا باید از حذفش کنیم و از روش دیگه ای استفاده بشه دیگه.
yasercomeng
چهارشنبه 25 دی 1387, 11:06 صبح
ممنون از دوستان بابت راهنمایی هاشون.من قبلا هم با margin این کارو کردم ولی درست جواب نداد.ببینید همون طور که یکی از دوستان اشاره کرد من می خوام که دو جعبه ی بالایی من پویا باشه.چون متنی که قراره تو اون دو تا جعبه ی بالایی قرار بگیره از پایگاه داده دریافت می شه و با این وجود ممکنه کاملا اندازه ها متفاوت باشه.بنابراین من ساختاری رو می خوام که بتونه جعبه ی سوم رو زیر جعبه ای قرار بده که بیشترین طول متن یا همون ارتفاع تو صفحه رو داشته باشه؟
برای این پویایی چه کاری باید انجام بدم؟
محمدامین شریفی
شنبه 28 دی 1387, 17:58 عصر
چون متنی که قراره تو اون دو تا جعبه ی بالایی قرار بگیره از پایگاه داده دریافت می شه و با این وجود ممکنه کاملا اندازه ها متفاوت باشه.بنابراین من ساختاری رو می خوام که بتونه جعبه ی سوم رو زیر جعبه ای قرار بده که بیشترین طول متن یا همون ارتفاع تو صفحه رو داشته باشه؟
برای این پویایی چه کاری باید انجام بدم؟
دوست من،من اگر جای شما بودم از scroll استفاده میکردم.چون جدول هم دردسر های مخصوص خودش را داره و در نمایش کل صفحه ات شما را دچار مشکل میکند:


<html>
<head>
<title>barname nevise.org</title>
<style type="text/css">
.left
{
background-color:blue;
width:45%;
height:4em;
overflow: scroll;
float:left;
}
.bottom
{
background-color:orange;
width:100%;
height:4em;
overflow: scroll;
float:right;

}
.right
{
background-color:red;
width:50%;
height:4em;
overflow: scroll;
float:right;
}
</style>
</head>

<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>

<div class="left">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.

</div>
<div class="right">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.

</div>
<div class="bottom">
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>

قسمتی از این کد از w3school اقتباس شده است
توی ff3 و IE8 beta آزمایش شد مشکلی نداشت.
آقا عماد این کار مشکلی ندارد؟
emad_67
شنبه 28 دی 1387, 23:10 عصر
آقا عماد این کار مشکلی ندارد؟
البته این مورد سلیقه ای هست، ولی خوب کمتر پیش میاد که یکی از scroll برای همچین شرایطی استفاده کنه. راهی که به ذهن من میرسه همون margin هست.
محمدامین شریفی
شنبه 28 دی 1387, 23:51 عصر
البته این مورد سلیقه ای هست، ولی خوب کمتر پیش میاد که یکی از scroll برای همچین شرایطی استفاده کنه. راهی که به ذهن من میرسه همون margin هست.
آخه من هم از راه شما رفتم ولی وقتی داده ها زیاد میشوند div ما بهم میخورد،اگر فکر میکنید این راه بهتر است امکان دارد یک فایل کاملش را بگذارید؟
emad_67
دوشنبه 30 دی 1387, 00:06 صبح
آخه من هم از راه شما رفتم ولی وقتی داده ها زیاد میشوند div ما بهم میخورد،اگر فکر میکنید این راه بهتر است امکان دارد یک فایل کاملش را بگذارید؟
ببخشید، بنده اشتباه کردم در این مورد یعنی اضافه شدن مطالب به div رو چک کردم که باعث به هم ریختگی میشه( بی تجربگیه و هزار درد) دیگه نمیدونم چه کاری میشه کرد.
محمدامین شریفی
دوشنبه 30 دی 1387, 09:12 صبح
ببخشید، بنده اشتباه کردم در این مورد یعنی اضافه شدن مطالب به div رو چک کردم که باعث به هم ریختگی میشه( بی تجربگیه و هزار درد) دیگه نمیدونم چه کاری میشه کرد.
شما استاد هستید.منم خیلی از راه ها رو امتحان کردم.
فکر کنم تنها راهش استفاده از scroll است.

پیروز باشید.
yasercomeng
پنج شنبه 17 بهمن 1387, 20:37 عصر
سلام دوستان خسته نباشيد.
يه سؤال ديگه داشتم و اونم اينه كه فرض كنيد ما يه جدول داريم با مثلاً 5 تا ستون (مثال زير)، حالا به صورت دايناميك به اين جدول يه سري سطر اظافه مي شه، تمام سلول هاي اين سطرها textbox داخلشون وجود داره من مي خوام اندازه ي اين textbox ها به اندازه ي title اي كه هر كدوم از ستون ها دارن باشه براي اين كار بايد تويه css ام چه كلاسي و با چه مشخصاتي اظافه كنم؟ من يه كلاس ساده نوشتم ولي خب چون چيز زيادي از طرز كار constant هاي مربوط به css ها نمي دونم درست كار نكرد.



HTML CODE FOR WRAPING TABLE

<table>
<tr align="center"><td class ="titletd">firstcolumn</td><td class ="titletd">second column</td><td class="titletd">3rd column</td><td class="titletd">fourth column</td><td class="titletd">5th column</td></tr>
</table>

JAVASCRIPT FOR CREATING DYNAMIC ROW

function addItem()
{
.
.
.
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("name","thirdc"+nextVal);
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("class","celltxt");
thirdc.setAttribute("value",document.getElementsByName("data")[0].value);

//some more textbox that must create dynamically

var row=tbl.insertRow(tbl.rows.length);
row.insertCell(0).appendChild(firstc);
row.insertCell(1).appendChild(secondc);
.
.
.
.

for(var i=0;i<row.cells.length;i++)
{
row.cells[i].setAttribute("class","celltd");
}
row.setAttribute("align","center");
}



CSS CODE FOR CELLTXT CLASS

.celltxt
{
width : auto;
}
محمدامین شریفی
جمعه 18 بهمن 1387, 03:03 صبح
سلام دوستان خسته نباشيد.
يه سؤال ديگه داشتم و اونم اينه كه فرض كنيد ما يه جدول داريم با مثلاً 5 تا ستون (مثال زير)، حالا به صورت دايناميك به اين جدول يه سري سطر اظافه مي شه، تمام سلول هاي اين سطرها textbox داخلشون وجود داره من مي خوام اندازه ي اين textbox ها به اندازه ي title اي كه هر كدوم از ستون ها دارن باشه براي اين كار بايد تويه css ام چه كلاسي و با چه مشخصاتي اظافه كنم؟ من يه كلاس ساده نوشتم ولي خب چون چيز زيادي از طرز كار constant هاي مربوط به css ها نمي دونم درست كار نكرد.



HTML CODE FOR WRAPING TABLE

<table>
<tr align="center"><td class ="titletd">firstcolumn</td><td class ="titletd">second column</td><td class="titletd">3rd column</td><td class="titletd">fourth column</td><td class="titletd">5th column</td></tr>
</table>

JAVASCRIPT FOR CREATING DYNAMIC ROW

function addItem()
{
.
.
.
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("name","thirdc"+nextVal);
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("class","celltxt");
thirdc.setAttribute("value",document.getElementsByName("data")[0].value);

//some more textbox that must create dynamically

var row=tbl.insertRow(tbl.rows.length);
row.insertCell(0).appendChild(firstc);
row.insertCell(1).appendChild(secondc);
.
.
.
.

for(var i=0;i<row.cells.length;i++)
{
row.cells[i].setAttribute("class","celltd");
}
row.setAttribute("align","center");
}



CSS CODE FOR CELLTXT CLASS

.celltxt
{
width : auto;
}
سلام.
خودت مطابق با برنامه ات،کد زیر را تغییر بده:

<html>
<head>
<script language="javascript" type="text/javascript">
function pers(){
document.getElementById("Hidden1Size").value =document.getElementById("Text1").size;
var size= document.getElementById("Hidden1Size").value;
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("id","persepolis");
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("size",size);
thirdc.setAttribute("value","hello persia");
document.getElementById("frm").appendChild(thirdc);
}
</script>
<title></title>
</head>
<body >
<form id="frm">
<input id="Text1" Name="Text1" size="4" value="hello persia" type="text" />
<input name="Submit1" type="button" onclick="pers();" value="submit" />
<input id="Hidden1Size" type="hidden" />
</form>
</body>
</html>
yasercomeng
جمعه 18 بهمن 1387, 23:57 عصر
سلام.
خودت مطابق با برنامه ات،کد زیر را تغییر بده:

<html>
<head>
<script language="javascript" type="text/javascript">
function pers(){
document.getElementById("Hidden1Size").value =document.getElementById("Text1").size;
var size= document.getElementById("Hidden1Size").value;
var thirdc=document.createElement("input");
thirdc.setAttribute("type","textbox");
thirdc.setAttribute("id","persepolis");
thirdc.setAttribute("disabled","disabled");
thirdc.setAttribute("size",size);
thirdc.setAttribute("value","hello persia");
document.getElementById("frm").appendChild(thirdc);
}
</script>
<title></title>
</head>
<body >
<form id="frm">
<input id="Text1" Name="Text1" size="4" value="hello persia" type="text" />
<input name="Submit1" type="button" onclick="pers();" value="submit" />
<input id="Hidden1Size" type="hidden" />
</form>
</body>
</html>


ممنون از راهنماييتون ولي سؤال من اين بود كه چه طور مي تونم اندازه ي title هر ستون جدولمو در بيارم. نه اينكه با الگو گرفتن از يه textbox اندازه ي بقيه ي textbox هام رو معين كنم.
دوباره مي گم من مي خوام اندازه ي متن title هر ستون از جدولمو پيدا كنم. براي اين كار چي كار بايد بكنم؟
yasercomeng
یک شنبه 20 بهمن 1387, 02:47 صبح
دوستان گمان كنم مشكلم حل شد. از وقتي كه گذاشتين ممنونم.