VPF::Несколько DIV`ов внутри DIV`a - Форум программистов

Coder_D

Дата 21.11.2010, 03:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Помогите пожалуйста.
Как только для выравнивания дивов в строку, добавляю свойство float, сразу дивы вылазят из контента.
Не пойму в чём дело, подскажите!

Код


<!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" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
}
#container {
    height:100%;
    margin: 0 auto;
    width:1000px;
    max-width:1000px;
    min-height:100%;
    background-color:#fff;
    color:#000;
    border: 1px solid black;
}
#logo {
    height:252px;
}

#content {
    border: 7px solid black;
    vertical-align:top;
    border: 1px solid #F0F;
    height:auto;
}
#cover {
    border: 1px solid red;
    overflow:hidden;
    float:left;
}
#tvset {
    border: 1px solid green;
    margin-left:430px;
    overflow:hidden;
}
</style>
</head>

<body>

<div id="container">
    <div id="logo"> <!--inc-->
     <img src="img/shapka.jpg" alt="" />
    </div>
    <div id="content">
        <div id="cover"><img src="img/kart1.jpg" /></div>
        <div id="tvset"><img src="img/kart4.jpg" /></div>
    </div>
</div>

</body>
</html>

GZep

Дата 21.11.2010, 03:44 (ссылка)

(нет голосов)

Загрузка ...

участник Винграда

Профиль
Группа: Завсегдатай
Сообщений: 1528
Регистрация: 7.7.2006
Где: Москва

Репутация: нет
Всего: 32

Код


    <div id="content">
        <div id="cover"><img src="img/kart1.jpg" /></div>
        <div id="tvset"><img src="img/kart4.jpg" /></div>

<div style="clear: both;"></div>

    </div>

Добавлено через 1 минуту и 4 секунды
Вот тут на англиЦком описана эта проблема: http://programming.top54u.com/Samples/Div-...th/Default.aspx

--------------------

Coder_D

Дата 21.11.2010, 11:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Спасибо. Сейчас попробую!

Coder_D

Дата 21.11.2010, 17:06 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Спасибо! Помогло!

Coder_D

Дата 10.12.2010, 01:07 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

Уважаемые, верстальщики!
Снова постигло меня несчастье с резиновостью дивов!
Если есть свободная минутка, буду очень признателен за помощь!
На этот раз три дива - должны быть резиновые по высоте.
И вроде всё так. Но высоту они получают равную высоте окна и поэтому валазят за низ родительского дива.
Как сделать, чтобы они не вылезали за низ?

Код


<!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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
}
#container {
    border: 1px solid blue;
    height:100%;
    width:1000px;
    margin: 0 auto;
    /*background-image:url(img/logo1.jpg);*/
    background-position:center top;
    background-repeat:no-repeat;
    background-color:#fff;
    position:relative;
}
#menu {
    border: 1px solid red;
    width:788px;
    margin: 0 auto;
    margin-top: 200px;
    position:relative;
}
#div_left {
    border: 1px solid green;
    min-height:100%;
    width:190px;
    margin-left:20px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#div_center {
    border: 1px solid green;
    height:100%;
    width:540px;
    margin-left:10px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#div_right {
    border: 1px solid green;
    height:100%;
    width:190px;
    margin-left:10px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#footer {
    width:1000px;
    height:80px;
    border: 1px solid red;
    background-image:url(img/footer.jpg);
    position:absolute;
    bottom:0;
}
</style>
</head>

<body>
<div id="container">
    <div id="menu">
     <img src="img/menu.jpg" />
    </div>
    
    <div id="div_left">
    </div>
    
    <div id="div_center">
    </div>

    <div id="div_right">
    </div>

    <div id="footer">
    </div>
</div> <!--end of container-->


</body>
</html>

strngrmn

Дата 10.12.2010, 10:22 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 10.12.2010

Репутация: нет
Всего: нет

Не уверен что правильно, по моему надо заключить эти 3 дива в один, и сделать его relative.

Код


<!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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
html {
    height:100%;
}
body {
    height:100%;
}
#container {
    border: 1px solid blue;
    height:100%;
    width:1000px;
    margin: 0 auto;
    /*background-image:url(img/logo1.jpg);*/
    background-position:center top;
    background-repeat:no-repeat;
    background-color:#fff;
    position:relative;
}
#menu {
    border: 1px solid red;
    width:788px;
    margin: 0 auto;
    margin-top: 200px;
    position:relative;
}
#div_left {
    border: 1px solid green;
    min-height:100%;
    width:190px;
    margin-left:20px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#div_center {
    border: 1px solid green;
    height:100%;
    width:540px;
    margin-left:10px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#div_right {
    border: 1px solid green;
    height:100%;
    width:190px;
    margin-left:10px;
    margin-top:50px;
    display:inline-block;
    position:relative;
}
#footer {
    color:#000000;
    width:1000px;
    height:80px;
    border: 1px solid red;
    background-image:url(img/footer.jpg);
    position:absolute;
    bottom:0;
#blocks { heigh:100%; width:1000px;    position: relative; margin:20px;}
}
</style>
</head>
<body>
<div id="container">
    <div id="menu">
     <img src="img/menu.jpg" />
    </div>
<div id="blocks">
    <div id="div_left">asdsdasdadasdasd<br>asdsdasdadasdasd
    </div>
    
    <div id="div_center">asdsdasdadasdasd<br>asdsdasdadasdasd
    </div>
    <div id="div_right">aasdsdasdadasdasd<br>asdsdasdadasdasd
    </div>
<div/>
    <div id="footer">footer
    </div>
</div> <!--end of container-->
</body>
</html>

FightInGlory

Дата 10.12.2010, 10:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
*{
    padding:0;
    margin:0;
}
html{
    height:100%;
}
body{
    height:100%;
}
#content{
    min-height:100%;
    height:100%
}
#footer{
    height:40px; 
    margin-top:-40px; 
    position:relative;
    background:#000;
    margin:0 auto;
    width:1000px;
}
#before_footer{
    height:100%; 
    clear:both;
    background:#ccc;
    margin:0 auto;
    width:1000px;
}
#div_left,#div_center,#div_right{
    float:left;
    background:green;
    height:100%;
}
#div_center,#div_right{
     margin-left:10px;
}
#div_left,#div_right{
    width:190px;
}
#div_left {
    margin-left:20px;
}
#div_center {
    width:540px;
}
#menu {
    background:red;
    width:788px;
    height:100px;
    margin: 0 auto;
    margin-top: 200px;
    position:relative;
}
</style>
</head>
<body>
    <div id="content">
        <div id="menu"></div>
        <div id="before_footer">
            <div id="div_left"></div>
            <div id="div_center"></div>
            <div id="div_right">
        </div>
     </div>
    <div id="footer"></div>
</body>
</html>

Не знаю так или нет, но посмотрите. Работает во всех браузерах начиная с 6 осла.

Coder_D

Дата 10.12.2010, 11:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 19
Регистрация: 19.3.2008

Репутация: нет
Всего: нет

К сожалению ни один предложенный вариант не работает так, как нужно.
В первом ответе, дивы изначально не растянуты до футера (а это нужно, ибо там будет хитрая картинка над футером).
А во втором получается то же, что и у меня (дивы растянуты на высоту экрана, т.е. выходят за пределы видимости), только футер снизу.

FightInGlory

Дата 10.12.2010, 11:13 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 14.11.2006

Репутация: 1
Всего: 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" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
*{
    padding:0;
    margin:0;
}
html{
    height:100%;
}
body{
    height:100%;
}
#content{
    min-height:100%;
    height:100%
}
#footer{
    height:40px; 
    margin-top:-40px; 
    position:relative;
    background:#000;
    margin:0 auto;
    width:1000px;
}
#before_footer{
    height:100%; 
    clear:both;
    background:#ccc;
    margin:0 auto;
    width:1000px;
}
#div_left,#div_center,#div_right{
    float:left;
    background:green;
    height:100%;
}
#div_center,#div_right{
     margin-left:10px;
}
#div_left,#div_right{
    width:190px;
}
#div_left {
    margin-left:20px;
}
#div_center {
    width:540px;
}
#menu {
    background:red;
    width:788px;
    height:100px;
    margin: 0 auto;
    margin-top: 200px;
    position:relative;
}
</style>
</head>
<body>
    <div id="content">
        <div id="menu"></div>
        <div id="before_footer">
            <div id="div_left">123</div>
            <div id="div_center">123</div>
            <div id="div_right">123</div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

Я извиняюсь, див не закрыл вконце)) Попробуйте сейчас, отключите цвет футера и уведите, что ничего не вылезает за пределы.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »