Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Максимальный размер блочного элемента

Автор: belkobot 17.2.2010, 16:11

У меня есть блочный элемент, я хочу сделать так, чтобы он растягивался при увеличении размера родительской области, но растягивался не бесконечно, а при достижении размера например 400px. растяжение элемента остановилось бы, то есть я хочу сделать максимальную ширину. В какую сторону копать?

Автор: Mavrun 17.2.2010, 16:32

есть свойство css
max-width
проблема только в том, что оно в IE 5.5-6 не работает

Автор: Guedda 17.2.2010, 16:42

Цитата(Mavrun @ 17.2.2010, 16:32

)

проблема только в том, что оно в IE 5.5-6 не работает

Так как совсем скоро эти браузеры поддерживаться не будут вовсе, поэтому - max-width тебе в помощь.

Автор: LuckyCat 3.3.2010, 15:54

belkobot, вот пример задания минимальной и максимальной ширины для всех браузеров

HTML

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <title></title>    
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">     
         <link rel="stylesheet" type="text/css" href="styles/style1.css" />
    </head>

    <body>
        <!-- main -->
        <div id="main">
           <div id="header">
                
                Header
                
            </div>
            
            <div id="content">
            
              <div id="col_center2">
                  <div id="col_center">
                        
                        Text for center
                      
                  </div>
              </div>
              
              <div id="col_left">
                  Left
              </div>
              <div id="col_right">                
                  Right
              </div>        
              <div class="clear"></div>
              
            </div>
            
            <div id="footer">
        
                Footer                

            </div><!-- /footer -->
        </div>
        <!-- /main -->
        
    </body>
</html>

CSS

style1.css:

Код


@import url("header.css");
@import url("content.css");
@import url("footer.css");

* {
    margin: 0;
    padding: 0;
}

html, body { width: 100%; height: 100%; padding: 0; margin: 0; }

body{
    background-color: #fff;
    font-family: "Arial";
    font-size: 12px;
    color: #666;
    line-height: normal;
}

.clear { clear: both; font-size: 0pt; line-height: 0px; height: 0px; }


/**************************/
#main{
    width: 100%;
    background-color: transparent;
    
    position: relative;
    
    
    min-width: 1000px; /* для нормальных браузеров*/
   max-width: 1700px; /* для нормальных браузеров*/
    margin: 0 auto;
}

*html #main
{
    width:expression(document.body.clientWidth<=1000?'1000px':(document.body.clientWidth>1700?'1700px':'100%'));
}

header.css:

Код


#header{
    width: 100%;
    height: 229px;
    background-color: #cce5ff;    
    position: relative;
}

content.css:

Код


#content{

    background-color: silver;
    width: 100%;

}
#col_center2{
    width: 100%;
    float: left;
}
#col_center{
    
    margin: 0 304px 0 305px; /* 310 - отстцп для колонок*/
    background-color: #6cf;    
    height: 100px;
}

#col_left{
    background-color: #cf9; 
    width: 305px;
    
    float: left;
    height: 100px;
    
    margin-left: -100%;
}

#col_right{
    background-color: #0c6;    
    width: 304px;
    height: 100px;
    float: left;
    
    margin-left: -304px; /* задается на ее ширину */
}

footer.css:

Код


#footer{
    position: relative;    
    background: #ffcc33 ;
    
    width: 100%;
    height: 100px;
    min-width: 1000px; /* для нормальных браузеров*/
   max-width: 1700px; /* для нормальных браузеров*/
    margin: 0 auto;
}
*html #footer
{
    width:expression(document.body.clientWidth<=1000?'1000px':(document.body.clientWidth>1700?'1700px':'100%'));
}