дивы друг под другом

festvtteam · September 25, 2012

Всем приветы!

хочу сделать вот так как показано на картинке

Вот код:

HTML:


<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>%TITLE%</title>
<link href="req/style.css" type='text/css' rel='stylesheet'>
</head>
    <body>
        <div id='who'>
            Здравствуйте, %USER_NAME%
        </div>   
        <div id='head'>
           Название страницы
        </div>
        <div id='container'>
           <div id="log_in">
                <form action='' method='post'>
                    <table  border="1">
                        <tr>
                            <td>Логин:</td>
                            <td><input type="text" name="login" class="login"/>
                            <div class="errorLogin"></div></td>
                        </tr>
                        <tr>
                            <td>Пароль:</td>        
                            <td><input type="text" name="name" class="name" value=""  />
                            <div class="errorName"></div></td>
                        </tr>
                        <tr>
                            <td colspan="2"><input type='submit' name='subm' value='войти'></td>
                        </tr>
                    </table>
                </form>  
         </div>  
        </div>
        <div id='footer'>
           © 
        </div>
    </body>
</html>

CSS:


html {
 height: 100%;
}

body {
 margin: 0;
 padding: 0;
 background: #cccccc;
 font: 12px Verdana, Arial, sans-serif;
 color: #000000;
}

#who { 
    width: 970px; 
   margin: 0 auto;
   background: #CCFFFF; 
   height:20px;   
}

#head { 
    width: 970px; 
   margin: 0 auto;
   background:#FFFFFF;
   height:50px;
   text-align: center;
   font-size: 3em;
}

#container { 
    width: 970px; 
   margin: 0 auto;
   background: #DDDDDD; 
   min-height:85%;   
}

#footer {
 clear: both;
 height: 20px;
 padding: 10px;
 text-align: center;
}

#log_in{ 
width: 970px; 
   text-align:center;
    display:table-cell;
    vertical-align:middle;

}

Цель какая: во первых чтобы третий див был с минимальной высотой, во вторых, чтобы содержимое этого дива (задумывалось что там будут таблицы разных размеров), но чтобы всегда были по центру.

Подскажите что не так по коду

USF · September 25, 2012

процентные величины высчитываются относительно родителя. а у вас 100% только у html.

Edited September 25, 2012 by USF

festvtteam · September 25, 2012

так, хорошо, а кому тогда еще и какую поставить?

USF · September 25, 2012

все родителям 100%

USF · September 25, 2012

всем родителям 100%

festvtteam · September 26, 2012

а с расположением таблицы как быть?

USF · September 26, 2012

а что с таблицей?

центрировать содержимое можете задав width дочернему + margin: 0 auto

festvtteam · September 26, 2012

ну вот я добавил


#log_in{ 
    width: 970px;
    margin: 0 auto;     
    text-align:center;
    display:table-cell;
    vertical-align:middle;  
}

и к таблице:

style=" margin: 0 auto;"

по горизонтали да, по центру. а по вертикали нет. margin-top не подходит - там фиксированный отступ

Edited September 26, 2012 by festvtteam

USF · September 26, 2012

по вертикали центрирование это особая "магия". читайте http://learn.javascript.ru/css-center

festvtteam · September 26, 2012

пасиба. буду изучать и шаманить

Sign In

дивы друг под другом

Question

festvtteam

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

USF

Link to comment

Share on other sites

festvtteam

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

festvtteam

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

festvtteam

Link to comment

Share on other sites

USF

Link to comment

Share on other sites

festvtteam

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information