[mk-73مشارکت کننده]

اقای شعبانی سلام ؛من بدنه سایتم را دوقسمت کردم یک بخش برای کانتنت ها یک بخش هم برای سایدبارم بخش کانتن ها را در قسمت چپ گذاشتم یعنی float:leftو برای سایدبارم float:rightخب حالا من میخوام یک بخش نمونه کارهام در زیر این بخش ها استفاده کنم یک دایو 100%هم دادم اما در زیر بخش ها قرار نمیگیرد یعنی میاد روی بخش کانتنت وسایدبارم قرار میگیرد اگر به این دایو float:rightبدم میاد زیر این بخش ها قرار میگیرد اما این درست نیست چونکه من از دایو 100%استفاده کردم چیکار کنم این این دایو در سرجای خود قرار بگیرد یعنی زیر بخش کانتنت وسایدبار باتشکر.

[سعید شعبانیسرپرست کل]

درود بر شما

خوب زمانی که شما یک یا چند تا المان در یک صفحه را float کنید المان های بعد از اونها همگی شناور می شود. برای رفع این مشکل تکنیک های زیادی وجود داره، یکی از این تکنیک ها این هست که شما مواردی که float می شود را داخل یک div کلی قرار بدید بعد به این div که المان های داخلش float شدن خاصیت clear: both را بدید.

خوب شما هم طبق این تکنیک می تونید بخش محتوا و سایدبار را در یک div با یک کلاس خاص بگذارید و به اون کلاس خاصیت clear: both بدید. بعد از این div کلی می تونید با خیال راحت بخش نمونه کار را قرار بدید.

[mk-73مشارکت کننده]

حالا یک چیز دیگه این درست شد دایو اومد سرجای خودش اما این موضوع که الان من برای فاصله گرفتن این دایو از دایو های قبلی خودش از تگ brاستفاده میکنم نمیدونم چرا کار نمیکنه.یعنی این دایو نمونه کارها از ادایو های قبلی خودش فاصله نمیگیره.

[سعید شعبانیسرپرست کل]

از نگ br برای شروع متن از ابتدای خط بعد استفاده می شود. روش استاندارد برای فاصله دادن بین دو بخش مجزا استفاده از margin در CSS هست.

[mk-73مشارکت کننده]

مرسی ممنون.میشه یک روش دیگه اقای شعبانی سوال قبلی هم همین که [اقای شعبانی سلام ؛من بدنه سایتم را دوقسمت کردم یک بخش برای کانتنت ها یک بخش هم برای سایدبارم بخش کانتن ها را در قسمت چپ گذاشتم یعنی float:leftو برای سایدبارم float:rightخب حالا من میخوام یک بخش نمونه کارهام در زیر این بخش ها استفاده کنم یک دایو 100%هم دادم اما در زیر بخش ها قرار نمیگیرد یعنی میاد روی بخش کانتنت وسایدبارم قرار میگیرد اگر به این دایو float:rightبدم میاد زیر این بخش ها قرار میگیرد اما این درست نیست چونکه من از دایو 100%استفاده کردم چیکار کنم این این دایو در سرجای خود قرار بگیرد یعنی زیر بخش کانتنت وسایدبار باتشکر.]ارائه دهید.

[سعید شعبانیسرپرست کل]

برای مورد قبلی بجز روشی که گفتم روش های بسیار دیگه ای وجود داره، مثلا شما می تونید از المان های مجازی کمک بگیرید. توجه کنید اکثر المان ها که در html قرار دارند ( مثلا div, section, p و … ) دارای دو المان مجازی یکی قبل (before ) و یکی بعد (after) از خودشون هستند. در حالت عادی این المان ها هیچ اثری ندارند و همه چیز اونها صفر هست. حالا ما می تونیم با 100 درصد کردن عرض و دادن خاصیت clear: both , content : “” و display : block به این المان ها کاری کنیم که خاصیت شناوری بخش های مختلف صفحه داخل همون بخش باقی بمونت و اثری روی المان های دیگه نگذاره. برای مثال شما می تونید یک class به اسم clear ایجاد کنید و کد CSS اون را به شکل زیر بنویسید.

.clear:before,
.clear:after {
   content : "";
   width: 100%;
   display: block;
   clear: both;
}

بعد بخش محتوا و سایدبار را مثل قبل داخل یه div قرار بدید و ایندفعه کلاس clear را به این div بدید. حالا از این به بعد هرجایی از صفحه که خواستید به المان های یک بخش خاصیت float بدید و المان های بعدش شناور نشدند می تونید به اون بخش کلاس clear بدید.

[mk-73مشارکت کننده]

ممنون اقای شعبانی من ایا میشه با css3یک خط را بصورت عمودی در یک راستا با عرض 100%انجام داد.منظورم از خط ها مانند این عکس است.

[سعید شعبانیسرپرست کل]

ببخشید، منظورتون را درست متوجه نشدم، لطفا یکم بیشتر توضیح بدید.

[mk-73مشارکت کننده]

یعنی اینکه من میخوام با cssخط هایی مانند عکسی گذاشتم بکشم.

[سعید شعبانیسرپرست کل]

آهان پس منظورتون از خط عمودی همون خط افقی بوده درسته؟ ?

خوب یکی از روش هاش اینه که شما با CSS ابتدا یک باکی درست کنید که عرض اون تمام اون بخش را پوشش بده بعد یک ارتفاع مثلا 10px به این باکس بدید. بعد یک تکه از همین تصویر را به شکلی با استفاده از نرم افزار هایی مثل فتوشاپ ببرید که با کنار هم قرار دادن این تصاویر کوچک همون تصویر بزرگ ایجاد بشه. بعد از برش تصویر با استفاده از خاصیت background repeat-x ابن تصویر را در باکس مورد نظر کنار هم بچینید تا پس زمینه باکس مثل تصویر اصلی بشه.

.box{
    background-image : ('img.png');
    background-repeat: repeat-x;
}

[mk-73مشارکت کننده]

اره دستت دردنکنه عزیز اینومیدونستم منظور من بدون استفاده از عکس این کار را انجام داد وخط ها را کشید.

[سعید شعبانیسرپرست کل]

راحت ترین روش استفاده از عکس هست، ولی با استفاده از تگ canvas در HTML5 و SVG هم می تونید این کار را انجام بدید که البته یکم پیچیده تر میشه. به نظرم از تصویر استفاده کنید بهتر هست.

[developzoomمشارکت کننده]

سلام موفق باشی دوست عزیز
[url=http://www.developzoom.com][color=”white”]آموزش برنامه نویسی[/color][/url]

[salmaniمشارکت کننده]

آقای شعبانی میشه بوت استرپ هم آموزش بدید؟

________________________________________________________________
فروشگاه ساز سبد خرید با سئوی فوق العاده

[نویسنده]

نوشته ها