• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
ارتفاع سایت
#1
ارتفاع سایتم ثابت مونده
میخوام با متن در تعامل باشه و اگر متن بزرگتر از ارتفاع عر قسمت شد ارتفاع هم بزرگ بشه
کد پی‌اچ‌پی:
<!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" />
<
link rel="stylesheet" type="text/css" href="style.css" />
<
title>Untitled Document</title>
</
head>

<
body>
<
div id="warpper">
   <
div id="menu">
        <
p id="PRE">PREMIUMLINE</p>
      <
ul>

          <
li><class="menu" href="#">Contact</a></li>
          <
li><class="menu" href="#">About us</a></li>
          <
li><class="menu" href="#">Register</a></li>
          <
li><class="menu" href="#">Gallery</a></li>
          <
li><class="menu" href="#">News</a></li>
          <
li><class="menu" href="#">Home</a></li>

       </
ul>
   </
div>
   <
div id="slide">
        <
div id="slide1"><img src="img/Fernando_Torres_Wallpaper_1.jpg" width="451" height="298" /></div>
     <
p>&nbsp;</p>
   </
div>
   <
div id="alarm">IN order to enter register here</div>
  <
div id="content">

         <
div id="title1">Welcom to premiumline</div>
         <
div id="title2">Testimonials</div>
         <
div id="content1">
             <
p>the content of the site is in the box </p>
             <
p>&nbsp;</p>
           <
p>&nbsp;</p>
             <
p>&nbsp;</p>

             <
p>&nbsp;</p>
         </
div>
          <
div id="content2">
         <
p>the hilight of news is here</p>
         <
p>&nbsp;</p>
         <
p>&nbsp;</p>
         <
p>&nbsp;</p>
         <
p>&nbsp;</p>

          </
div>
          <
div id="num1">
          <
p><img src="img/kx2-cs2-golive.png" width="30" height="31" />Mostvisit</p>
          </
div>
          <
div id="num2">
      <
p><img src="img/kx2-im-msn2.png" width="30" height="31" />Best User</p>
          </
div>
          <
div id="num3">

      <
p><img src="img/Script Badge.png" width="30" height="31" />Archive</p>
    </
div>
    <
div id="most">in place ther is some news with most visit </div>
    <
div id="bestuser">ther are the names of some active user</div>
    <
div id="archiv">in this part is archiv site mmmmmmmm&nbspbvbvbvbvh</div>
  </
div>

    <
div id="footer">
        <
div id="about">
            <
p>About</p>
        </
div>
        <
div id="contact">
            <
p>contact</p>
        </
div>
        <
div id="foot3">

             <
p>footer</p>
        </
div>
    </
div>
      
</
div>
</
body>
</
html

کد پی‌اچ‌پی:
@charset "utf-8";
/* CSS Document */
html,body{
    
margin:0px;
    
padding:0px;    
}
#warpper{
    
margin:0px auto;
    
width:900px;
    
border:1px solid #000;
    
height:auto;
    
    
}
/*[start]menu*/
#menu{
    
width:auto;
    
background-color:#000000;
    
height:60pt;     
}
ul{
    
width:auto;
    
margin:0px;    
    
}
li{
    
display:inline;
    
text-align:center;


}
a.menu{
     
widith:70pt;
     
color:#FFF;
     
text-decoration:none;
     
float:right;
     
line-height:46pt;
     
direction:ltr;
     
padding:10px;
     
}
a.menu:hover{
    
color:#FFFFFFs;
    
font:bold;
    
background-color:#ed3908;
}
#PRE{
    
font-size:20px;
    
color:#CCC;
    
float:left;
    
margin-left:20px;        
}
/*[end]menu*/
/*[start]slide*/
#slide{
    
width:900px;
    
background-color:#FFF;
    
height:320px;    
    
    
}
#slide1{
    
width:450px;
    
height:300px;
    
border:1px solid #000;
    
margin:0px auto;    
    
    
    
    
}
/*[end]slidd*/
/*[start]alarm*/
#alarm{
    
width:790px;
    
background-color:#404040;
    
font-size:11px;
    
font-family:VerdanaGenevasans-serif;
    
color:#FFFFFF;    
    
height:20pt;
    
padding-left:110px;
    
padding-top:20px;
}
/*[end]alarm*/
/*[start]titles*/
#title1{
    
float:left;
    
width:450px;
    
height:auto;
    
font-size:16px;
    
font-family:VerdanaGenevasans-serif;
    
color:#DDDDDD;
    
padding-left:20px;
    
    
}
#title2{
    
width:200px;
    
height:auto;
    
padding-left:20px;
    
float:left;    
    
    
}
/*[end]titles*/
/*[start]content*/
#content{
    
width:700px;
    
margin:0px auto;
    
background-color:#FFFFFF;
    
height:400px;
    
border-bottom:1px solid #000000;
}
#content1{
    
float:left;
    
width:450px;
    
height:auto;
    
font-size:12px;
    
border-bottom:1px solid #000000;
    
padding-left:20px;

    
}

#content2{
    
width:200px;
    
float:left;
    
height:auto;
    
background-color:#F7F7F7;
    
font-size:12px;
    
border-bottom:1px solid #000000;
    
padding-left:20px;
}
#num1{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:16px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;
}
#num2{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:16px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;
}
#num3{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:16px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;
}
#most{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:12px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;
        
}
#bestuser{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:12px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;

}
#archiv{
    
float:left;
    
width:210px;
    
height:auto;
    
border-bottom:1px solid #CCCCCC;
    
font-family:VerdanaGenevasans-serif;
    
font-size:12px;
    
padding-left:20px;
    
padding-top:10px;
    
padding-bottom:5px;
    
}
/*[end]contact*/
/*[start]footer*/
#footer{
    
width:700px;
    
background-color:#404040;
    
height:210px;
    
padding-left:100px;
    
padding-right:100px;
    
}
#about{
    
float:left;
    
width:210px;
    
height:200px;
}
#contact{
    
width:210px;
    
float:left;
    
height:200px;
}
#foot3{
    
float:left;
    
width:210px;
    
height:200px;


کلا یه توضیحی هم در این مورد بدید که چه کاری باید کرد تا بتونم همیشه این کار رو انجام بدم ممنون میشم
  پاسخ
تشکر شده توسط :
#2
هو،
سلام علیکم،

ارتفاع رو اختصاص نده!
مثالها رو ببین متوجه میشی:
کد پی‌اچ‌پی:
<div>
<!-- 
با ارتفاع داینامیک -->
</
div>

<
div style="height:200px;">
<!-- 
با ارتفاع ثابت -->
</
div
نکته:تگ پدر و یا جد هم موثره:
کد پی‌اچ‌پی:
<div style="height:200px;">
<!-- 
با ارتفاع ثابت -->
    <
div>
    <!-- 
با ارتفاع داینامیک که در صورت زیادی محتوا از تگ پدرش بیرون میزنه -->
    </
div>
</
div

::برای بیرون نزدن بچه ی این پدر هم اینجوری استفاده کن،با Border میذارم متوجه شی،تستش کن::
یه بار اینجوری تست کن:
کد پی‌اچ‌پی:
<div style="height:200px; border:1px solid red; ">
    <
div style="border:1px solid green;">
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    </
div>
</
div


یه بار هم اینجوری :
کد پی‌اچ‌پی:
<div style="height:200px; border:1px solid red; overflow:hidden;">
    <
div style="border:1px solid green;">
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    
salam<br/>
    </
div>
</
div


یا حق ج

اللهم صل علی محمد و آل محمد و عجل فرجهم

افلاطون را گفتند چرا هرگز غمگین نمیشوی؟
گفت :دل برآنچه نمی ماند،نمی بندم.
  پاسخ
تشکر شده توسط : parsisport masoudmanson
#3
نیم دونم چرا نمی شه
یه نگاهی به کد های من بنداز شاید جای دیگش ایراد داره
  پاسخ
تشکر شده توسط :
#4
من که نفهمیدم دقیقاً چی میخوای ولی من فکر کنم تو میگی که اگر هر متنی در یک باکس هست که ارتفاعی داره ، اون ارتفاع با به اندازه همون متن تغییر کنه. یعنی اگر متن طوری نوشته شده بود که ارتفاعش 100 بود ، ارتفاع اون باکس هم بشه 100 یا مثلاً 150. اگر اینه که باید اینطوری واسه اون باکس عمل کنی:
کد:
height: auto;
min-height: 100px;
مقدار min-height رو خودم دادم. اگر فکر می کنی مقدار ثابت واسه همه باکس ها از اون دست یکیه خودت تغییرش بده. الآن که ارتفاع خودکار تنظیم میشه ، بستگی به محتواش داره.
غایب
  پاسخ
تشکر شده توسط : saleck parsisport Goback
#5
میخوام هر متنی در باکس میزارم ازش بیرون نزنه
یعنی ارتفاع اون باکس مطابق با متنم تغییر کنه
  پاسخ
تشکر شده توسط :
#6
نقل قول:میخوام هر متنی در باکس میزارم ازش بیرون نزنه
یعنی ارتفاع اون باکس مطابق با متنم تغییر کنه
باید خیلی خوب بتونی طول و عرض رو مشخص کنی. با همون کدی که تو پست قبلیم نوشتم عرض درست تنظیم میشه. طول هم اینطوری برطرف می کنن:
کد:
width: auto;
min-width: 100px;
غایب
  پاسخ
تشکر شده توسط : parsisport


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان