VPF::Рвется div - Форум программистов

drpain

Дата 12.3.2008, 18:00 (ссылка)

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

Загрузка ...

Новичок

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

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

Приветствую!!

Подскажите, как сделать так что бы родительский div тянулся по высоте вместе с дочерним, если в дочернем не указана высота и он тянется в зависимости от контента.

bars80080

Дата 12.3.2008, 18:46 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а что он по-умолчанию не тянется по мере расширения вложенного?

SelenIT

Дата 12.3.2008, 19:21 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Не указывать height для внешнего дива smile

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

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

drpain

Дата 13.3.2008, 08:25 (ссылка)

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

Загрузка ...

Новичок

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

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

SelenIT, к сожелению, не помогает, ФФ и Опера нивкакую не хотят тянуть DIV.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
<link href="style.css" rel="stylesheet" rev="stylesheet" type="text/css"/>
</head>
<body>
<center>
<div id="site">
    <div id="leftside"></div>
    <div id="rightside"></div>

    <div id="header">
        <div id="header_img">
            <div id="lang_links">
                <a href="index.html">ENG</a>
                <a href="index.html?">РУС</a>
            </div>
        
            <div id="head_date">
                March 7, Friday
            </div>
        </div>
    </div>

        <div id="search">

        </div>

        
        <div id="left_site_side">
        
        </div>
        
        <div id="content">
        
        </div>
        
        <div id="right_site_side">
        
        </div>
        
        

</div>
</center>
</body>
</html>

Код


html,
body{
    height: 100%;
    min-height: 100%;
}
body{
    background-color: #cccccc;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

#site{
    min-width: 950px;
    max-width: 1230px;
    background-color: #ffffff;
    position: relative;
}

#leftside{
    width: 10px;
    height: 100%;
    background-image: URL(/images/grad_left.jpg);
    background-repeat: repeat-y;
    position: absolute;
    left: 0px;
}

#rightside{
    width: 10px;
    height: 100%;
    background-image: URL(/images/grad_right.jpg);
    background-repeat: repeat-y;
    position: absolute;
    right: 0px;
}

#header{
    width: 100%-;
    margin-left: 10px;
    margin-right: 10px;
    background-image: URL(/images/header_space.jpg);
}

#header_img{
    width: 950px;
    height: 129px;
    background-image: URL(/images/header.jpg);
    text-align: left;
}

#lang_links{
    margin-left: 135px;
    padding-top: 12px;
    
}

#lang_links a{
    color: #ffffff;
    text-decoration: none;
    line-height: 12px;
    font-size: 10px;
    font-family: Georgia;
    text-transform: uppercase;
    background-image: URL(/images/lang_space.jpg);
    background-repeat: no-repeat;
    
    padding-left: 6px;
    padding-right: 2px;
}


#lang_links a:first-child{
    background-image: none;
}

#head_date{
    margin-top: 70px;
    margin-left: 120px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia;
    text-transform: capitalize;
}

#search{
    width: 100%-;
    height: 28px;
    background-image: URL(/images/search_fon.jpg);
    background-position: center center;
    vertical-align: middle;
    border: 1px solid #979797;
}

.input_cls_1{
    width: 120px;
    height: 12px;
    border: 2px solid #b5b5b5;
    float: right;
}

.input_cls_2{
    float: right;
    margin-right: 20px;
    text-decoration: none;
}
.input_cls_2 div{
    color: #ffffff;
    width: 59px;
    line-height: 25px;
    background-image: URL(/images/search_button.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-family: Arial;
    font-size: 12px;
    text-transform: uppercase;
}

#left_site_side{
    width: 140px;
    float: left;
    margin: 10px 15px 5px 30px;
    text-align: right;

}

#left_site_side div > h3{
    width: 140px;
    line-height: 25px;
    background-color: #838383;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 700;
    font-family: Georgea;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

#left_site_side a{
    display: block;
    color: #999999;
    font-family: Arial;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 11px;
    margin: 3px 3px 3px 0px;
}

там #site являеться родительским но они не хочет тянуться вместе с left_site_side

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

я еще не совсем разобрался с DOCTYPE так что может там и не тот что нужен стоит, но я все подряд подставлял разницы небыло.

Это сообщение отредактировал(а) drpain - 13.3.2008, 08:32

drpain

Дата 13.3.2008, 10:20 (ссылка)

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

Загрузка ...

Новичок

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

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

Вроде разобрался!!! Но это больше похоже на некорректную работу ФФ и Оперы, или объясните...... почему если я использую float то этот элемент вылазит(выкидывет) за пределы родительского элемента???

вобщем если дочерним поубирать float то родительский элемент тянется, но привязки нет....

bars80080

Дата 13.3.2008, 10:39 (ссылка)

(голосов:1)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

так документацию, читать надо, ессно, флоат вырывает из контекста и это есть нормальная работа (кстати)

единственно, что могу предложить

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
</title>
<link href="" rel="stylesheet" rev="stylesheet" type="text/css"/>
<style>
html,
body{
    height: 100%;
    min-height: 100%;
}
body{
    background-color: #cccccc;
    text-align: left;
    margin: 0px;
    padding: 0px;
}

#site{
    min-width: 950px;
    max-width: 1230px;
    background-color: #999999;
    position: relative;
}

#leftside{
    width: 10px;
    height: 100%;
    background-image: URL(/images/grad_left.jpg);
    background-repeat: repeat-y;
    position: absolute;
    left: 0px;
}

#rightside{
    width: 10px;
    height: 100%;
    background-image: URL(/images/grad_right.jpg);
    background-repeat: repeat-y;
    position: absolute;
    right: 0px;
}

#header{
    width: 100%-;
    margin-left: 10px;
    margin-right: 10px;
    background-image: URL(/images/header_space.jpg);
}

#header_img{
    width: 950px;
    height: 129px;
    background-image: URL(/images/header.jpg);
    text-align: left;
}

#lang_links{
    margin-left: 135px;
    padding-top: 12px;
    
}

#lang_links a{
    color: #ffffff;
    text-decoration: none;
    line-height: 12px;
    font-size: 10px;
    font-family: Georgia;
    text-transform: uppercase;
    background-image: URL(/images/lang_space.jpg);
    background-repeat: no-repeat;
    
    padding-left: 6px;
    padding-right: 2px;
}


#lang_links a:first-child{
    background-image: none;
}

#head_date{
    margin-top: 70px;
    margin-left: 120px;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia;
    text-transform: capitalize;
}

#search{
    width: 100%-;
    height: 28px;
    background-image: URL(/images/search_fon.jpg);
    background-position: center center;
    vertical-align: middle;
    border: 1px solid #979797;
}

.input_cls_1{
    width: 120px;
    height: 12px;
    border: 2px solid #b5b5b5;
    float: right;
}

.input_cls_2{
    float: right;
    margin-right: 20px;
    text-decoration: none;
}
.input_cls_2 div{
    color: #ffffff;
    width: 59px;
    line-height: 25px;
    background-image: URL(/images/search_button.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    border: none;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-family: Arial;
    font-size: 12px;
    text-transform: uppercase;
}

#left_site_side{  border: solid 1px #00ff00;
    width: 140px;
    float: left;
    margin: 10px 15px 5px 30px;
    text-align: right;
    position: relative;
    z-index: 10;
}

#left_site_side div > h3{
    width: 140px;
    line-height: 25px;
    background-color: #838383;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 700;
    font-family: Georgea;
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

#left_site_side a{
    display: block;
    color: #999999;
    font-family: Arial;
    text-decoration: none;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 11px;
    margin: 3px 3px 3px 0px;
}
.clear { clear: both; }
</style>
</head>
<body>
<center>
<div id="site">
    <div id="leftside">leftside</div>
    <div id="rightside">rightside</div>

    <div id="header">
        <div id="header_img">
            <div id="lang_links">
                <a href="index.html">ENG</a>
                <a href="index.html?">РУС</a>
            </div>
        
            <div id="head_date">
                March 7, Friday
            </div>
        </div>
    </div>

        <!--div id="search">

        </div-->

        
        <div id="left_site_side">
        left_site_side ghjklk gh hjkgh
        </div>
        
        <!--div id="content">
        
        </div>
        
        <div id="right_site_side">
        
        </div-->
        
<div class="clear"></div>        
site wqrqwerq qwerqwer
</div>
</center>
</body>
</html>

drpain

Дата 13.3.2008, 11:36 (ссылка)

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

Загрузка ...

Новичок

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

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

bars80080, Спасибо!!!

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