ورود

View Full Version : مبتدی: div و css


iranme
شنبه 10 مهر 1389, 22:58 عصر
سلام،
من یک هدر با div میخوام درست کنم ولی با css اش یک مشکلی دارم!
یک کد به صورت زیر دارم که با table نوشته شده ولی میخوام همین کد رو با div بندی بنویسم.
ممنون میشم کمک کنید که چطوری بنویسم که دو حاشیه بغل عکس ها تکرار بشوند ولی عکس وسط ثابت همیشه وسط صفحه باقی بمونه!!

<table width="100%" border="0" cellpadding="0" cellspacing="0" height="700px">
<tr>
<td style="background: url(images/bgleft.gif) repeat-x scroll left top transparent;" width="50%">&nbsp;</td>
<td>
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="mainpage.gif" /></td>
</tr>
</table>
</td>
<td style="background: url(images/bgright.gif) repeat-x scroll left top transparent;" width="50%"></td>
</tr>
</table>
mohsen.dbnet
یک شنبه 11 مهر 1389, 00:41 صبح
سلام
می تونی یه شکلی از اون چیزی می خوایو برامون نشون بدی تا ما بهتر بتونیم کمکت کنیم.
آخه این چیزی که شما نشوشتید با گفتتون کمی نمی خونه مثلا تصوی در وسط قرار گرفتن یا اون موضوع حدر کمی برا بنده گنگه که با پشنهاد بنده رفع می شه.
mohsen_Iran
یک شنبه 11 مهر 1389, 10:34 صبح
سلام
شما از دو تا Table تو در تو استفاده کردید table اولی رو حذف کنید به جای table دومی یا همون داخلی یک div قرار بدید و تو استایلش اینا رو قرار بدید

width:980px;
margin:0px auto;

این کد باعث میشه که اون div وسط صفحه باشه!
البته اگه من منظورتون درست متوجه شده باشم اگه نه بیشتر توضیح بدید!
sina.md
یک شنبه 11 مهر 1389, 13:30 عصر
سلام.
را حل اول.
چون شما میخوای از 2 عکس استفاده کنی . یکی برای هدر در وسط صفحه و یکی با سایز کوچک که در محور x تکرار بشه و وقتی صفحه رو کوچک بزرگ می کنی اون عکس تغییر کنه , یه راه حل اینه که اون عکسی که قرار تکرار بشه رو بک گراند body کنی و در X تکرارش کنی. و هدر خودت رو در div بزاری.

حالا یه سوال پیش میاد که پایین هدر ما دیگه body تصویری نداره.
راه حل اینه که اگه بک گراند body رو به صورت یک pixel برداری می تونی توی راستای y هم تکرار کنیش در غیر این صورت می تونی background-color رو تنظیم کنی که یه رنگی پایین body وجود داشته باشه.

راه حل دوم.

می تونی یه div درست کنی و اون تصویر کوچیک رو توش repeat کنی. حالا یه تگ دیگه مثل span توی div بزاری و بک گران اون رو هدرت بزاری.

باز هم خیلی راه ها وجود داره.
اگه با توضیحات مشکلت حل نشد عکس هارو بزار تا خودم برات درستشون کنم.
iranme
یک شنبه 11 مهر 1389, 13:51 عصر
ممنون از کمکتون ولی مشکل من اینه که اون عکسی که باید تکرار بشه در پشت بکگراند دوتاست! اگه به کد و این عکسی که در ضمیمه قرار دادم دقت کنید متوجه منظورم میشوید که یک عکس باید در سمت چپ با توجه به سایز صفحه تغییر بکنه (bgleft.gif) و یکی هم در راست صفحه (bgright.gif) و یک عکس هم بدون تغییر سایز همیشه در وسط صفحه قرار بگیره! (mainpage.gif)
اگه بازم متوجه منظورم نشدید بگید تا بازم توضیح بدم!
sina.md
یک شنبه 11 مهر 1389, 14:14 عصر
من فعلا" برم دانشگاه. وقتی اومدم سعی می کنم کارت رو راه بندازم.
Keramatifar
یک شنبه 11 مهر 1389, 16:16 عصر
با سلام خدمت شما دوست عزیز
شما باید یک div اصلی داشته باشی و داخلش 3 تا 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>http://keramatifar.ir</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="outerDiv">
<div id="leftDiv">
</div>
<div id="centerDiv">
</div>
<div id="rightDiv">
</div>
</div>
</body>
</html>
CSS:


div#outerDiv{
position: relative;
width: 770px;
margin: 0 auto;
height: 100px;
border: 1px dashed red;
}
div#outerDiv div{
float: left;
height: 100px;
width: 20%;
}

div#outerDiv C#‎enterDiv{
width: 60%;
background-color: blue;

}

div#outerDiv #rightDiv{
background: green url('') repeat-x;

}

div#outerDiv #leftDiv{
background: yellow url('') repeat-x;

}
mohsen.dbnet
یک شنبه 11 مهر 1389, 18:13 عصر
چیزی بنده از حرفتون فهمیدم این بود.
iranme
یک شنبه 11 مهر 1389, 18:43 عصر
متاسفانه هیچ کدوم از شما عزیزان متوجه منظور من نشدید!! :ناراحت:
آقای کرامتی شما عرض outerDiv را 770 در نظر گرفته اید در صورتی که من نمیخوام اصلا مقدار دهی کنم (در واقع مشکل اصلی من هم این است!)
و شما آقا محسن دقیقا بر عکس اون چیزی که مد نظرم بود را درست کردی :لبخند:
من میخوام اون دو تا فلش بغلی مقدارشون تغییر بکنه و وسط فیکس و ثابت بمونه.
البته نکته مهم اینجاست که فلش سمت چپ با فلش سمت راست شکل هاشون کاملا فرق میکنه پس نمیشه از یک بکگراند سراسری در زیر شکل استفاده کرد!
آقا سینا منتظر کمک شما هم هستم!
Keramatifar
یک شنبه 11 مهر 1389, 19:13 عصر
خب width مربوط به div های کناری رو auto قرار بده و div وسطی رو fixed size بده
sina.md
دوشنبه 12 مهر 1389, 01:38 صبح
دوست عزیز آقای کرامتی درست می فرمایند.
همین کار رو انجام بده که همون نتیجه مطلوب خودت رو بگیر.
iranme
پنج شنبه 15 مهر 1389, 18:59 عصر
خیلی ممنون آقای کرامتی ولی من متوجه نشدم میشه دقیق تر بگید کجا را باید عوض کنم؟ آماتور هستم ممنون میشم راهنمایی کنید!
Keramatifar
جمعه 16 مهر 1389, 10:14 صبح
من دقیقا متوجه نمیشم شما چکار می خوای بکنی، ولی به هر حال راهش اینه:



div#outerDiv{
position: relative;
width: 100%;
margin: 0 auto;
height: 100px;
border: 1px dashed red;
}
div#outerDiv div{
float: left;
height: 100px;
width: 20%;
}

div#outerDiv C‎‎enterDiv{
width: 700px;
background-color: blue;

}

div#outerDiv #rightDiv{
background: green url('') repeat-x;
width: auto;

}

div#outerDiv #leftDiv{
background: yellow url('') repeat-x;
width: auto;
}
iranme
شنبه 17 مهر 1389, 20:24 عصر
خیلی ممنون از همه دوستان
خودم آن چیزی رو که میخواستم به روش دیگری حل کردم.
mohsen.dbnet
شنبه 17 مهر 1389, 21:53 عصر
خوب بود به احترام بچه ها اون روشی که بدست آوردید به بقیه هم معرفی می کردید.