يك مسئله!

[setareh2]

من تا حالا همش با table كار كردم!!!!
امروز خواستم يه صفحه شبيه عكس بالا با CSS تعريف كنم و صفحه رو با css و div بسازم! 2 تا مشكل برخوردم! احتمالا خيلي بايد ساده باشه! ولي من نتونستم رفعش كنم!

1- تو شكل بالا اگه بخواهيم قسمت Footer رو تو css تعريف كنيم احتياج به ارتفاع (height) قسمتهاي banner و همچنين ماكزيمم ارتفاع 3 قسمت left, Right يا content رو داريم. (براي تعربف پوزيشن)
حالا اگه اين ارتفاع تو صفحات مختلف متغير باشه چطور ميشه footer رو تعريف كرد كه هميشه زير بقيه صفحات قرار بگيره؟
2- من وقتي براي هر كدوم از ستونهاي side يا content يه تصوير زمينه تعريف مي كنم(ارتفاع تصوير خيلي كوچيكه و براي پر كردن صفحه بايد n بار تكرار شه) تصوير فقط تا جايي صفحه رو مي پوشونه كه تكست رسيده باشه... يعني اگه ارتفاع text بخش content دو برابر left side باشه. تصوير زمينه فقط تو نصف قسمت left side نمايش داده ميشه!!! مشكل كجاست؟؟؟

 

[littlerabbit]

یه دایو بذار (درست قبل از فوتر ) که خالیه (فقط یه فاصله - Space - توش نوشته شده ) مثلا با کلاس Clear بعد این بنویس :

.Clear {
 clear : Both;

}

حل میشه

 

[setareh2]

یه دایو بذار (درست قبل از فوتر ) که خالیه (فقط یه فاصله - Space - توش نوشته شده ) مثلا با کلاس Clear بعد این بنویس :

.Clear {
 clear : Both;

}

حل میشه[/QUOTE]
=======
لطفا ميشه بيشتر توضيح بدين؟؟؟؟؟
من اصلا" متوجه نشدم!

 

[littlerabbit]

ببخشید تگ کد رو نبسته بودم!!!

یعنی اینکه به Html ات اینو اضافه کن (درست قبل از دایو فوتر):

<div class="clear">&nbsp;</div>

بعد به CSS اینو :

.Clear {
 clear : Both;

}

 

[setareh2]

ببخشید تگ کد رو نبسته بودم!!!

یعنی اینکه به Html ات اینو اضافه کن (درست قبل از دایو فوتر):

<div class="clear">&nbsp;</div>

بعد به CSS اینو :

.Clear {
 clear : Both;

}

===========
ممنون
ميشه توضيح بدي اين clear : Both چيكار ميكنه؟

 

[littlerabbit]

شما باید برای اون کار که گفتید از float استفاده کرده باشید. اون clear اثر float رو خنثی میکنه و باعث میشه مثل حالت عادی تگ دایو بیاد پایین همه تگها.

'clear'
Value: none | left | right | both | inherit
Initial: none
Applies to: block-level elements
Inherited: no
Percentages: N/A
Media: visual

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

Values have the following meanings when applied to non-floating block boxes:

left
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.
right
The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.
both
The generated box is moved below all floating boxes of earlier elements in the source document..
none
No constraint on the box's position with respect to floats.

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint (#10) is added:

* The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').

 

[setareh2]

ببخشید تگ کد رو نبسته بودم!!!

یعنی اینکه به Html ات اینو اضافه کن (درست قبل از دایو فوتر):

<div class="clear">&nbsp;</div>

بعد به CSS اینو :

.Clear {
 clear : Both;

}

========
با اين درست نشد....
footer هنوز سر جاش قرار نمي گيره!!!!!
بايد به positionعدد بدم! ولي چون ارتفاع مشخص نيست مسخره در مياد!!!!

 

[littlerabbit]

میشه نمونشو بذاری؟ یه صفحه خالی با استیلش.

 

[mazoolagh]

اگر از position استفاده كرده باشي (كه ظاهرا كردي) clear كار نميكنه - براي تعريف ستونها فقط width رو معين كن و float:left اونوقت footer خودش ميره رو زير بلندترين ستون - به يك div اضافه براي clear كردن هم نيازي نيست

 

[setareh2]

درست شد!!!
مرسيييييييييييييييييي خرگوش كوچولو و mazoolagh!

من float استفاده كردم درست شد!!!!

 

[littlerabbit]

اگر از position استفاده كرده باشي (كه ظاهرا كردي) clear كار نميكنه - براي تعريف ستونها فقط width رو معين كن و float:left اونوقت footer خودش ميره رو زير بلندترين ستون - به يك div اضافه براي clear كردن هم نيازي نيست

متااسفم من فکر نمیکردم ار پوزیشن استفاده کرده باشی!چون Div هست و float اش. ام به هر حال اين جوابته :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 1st August 2004), see www.w3.org">
    <title>Test</title>
<style type="text/css">
        <!--
                .main {
                        width : 600px;
			width : 610px !important;
                }
                
                .banner {
                        float : right;
                        width : 600px;
                        background-color : red;
			width : 610px !important;
                }
                
                .rightside {
                        float : right;
                        width : 100px;
			width : 103px !important;
                        background-color: blue;
                }
                
                .content {
                        float : right;
                        width : 400px;
			width : 403px !important;
                        background-color : gray;
                }
                
                .leftside {
                        float : left;
                        width : 100px;
			width : 103px !important;
                        background-color : yellow;
                }
                
                .clear {
                        clear : both;
                }
                
                .footer {
                        font-size : xx-small;
                        font-family : Verdana,Arial;
                        color: gray;
                        text-align : center;
                }
        -->
</style>
  </head>
  <body>
    <div class="main">
      <div class="banner">
        Header for document
      </div>
      <div class="rightside">
        Right Side
        <br>
      </div>
      <div class="content">
        Content<br>
        <br>
        <br>
        <br>
        <br>
      </div>
      <div class="leftside">
        Left Side<br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
	  <!--Remove this div and see result -->
      <div class="clear">
        &nbsp;
      </div>
      <div class="footer">
        Copyright &copy; B-
      </div>
    </div>
  </body>
</html>

البته عمدا كلي اين چرت و پرتا و بريك ها رو گذاشتم.

 

[setareh2]

متااسفم من فکر نمیکردم ار پوزیشن استفاده کرده باشی!چون Div هست و float اش. ام به هر حال اين جوابته : البته عمدا كلي اين چرت و پرتا و بريك ها رو گذاشتم.

مرسي مفيد بود.....

 

[miladmovie]

حالا من یک سوال دیگه دارم
می خوام دور div هام یک جوری گرد بشه
یعنی گوشه های تگ div گرد بشه !
منظورم رو فهمیدی؟

 

[Ali_ix]

حالا من یک سوال دیگه دارم
می خوام دور div هام یک جوری گرد بشه
یعنی گوشه های تگ div گرد بشه !
منظورم رو فهمیدی؟

این خودش کلی سواله !

به 1001 راه میشه Round Corner داشت ! مورد مصرف چی هست ؟!

 

[Azemati]

حالا من یک سوال دیگه دارم
می خوام دور div هام یک جوری گرد بشه
یعنی گوشه های تگ div گرد بشه !
منظورم رو فهمیدی؟

اينجا رو ببين مثلا:
http://www.sovavsiti.cz/css/corners.html

 

[miladmovie]

دستت در نکنه
همین رو می خواستم

 

[mrxogolo]

این روش هم هست که دیگه نیازی به تصویر نداره:
http://pro.html.it/esempio/nifty/