CSS нужна помощь

255

malls

7 сентября 2008, 11:44

479

Верстаю два вложенных блока:

[ATTACH]20646[/ATTACH]

все вроде норм как на картинке слева...

Как только добавляю отступы в:

DIV.2 {

padding: 100px 10 px 10px 10px;
}

получается картинка справа... т.е. родительский блок вытягивается вниз примерно на величину этих отступов...

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

Причем получается в Опере и в Лисе, Осел нормально переваривает...

чего то не могу врубиться почему так...

gif divs.gif

110

-L-

7 сентября 2008, 11:50

#1

DIV.1 отступы обнулял?

покажи полные стили и тогда мы не будем копирфильдами и поможем тебе

Есть сайт, паблик Вконтакте или Одноклассниках? Нет денег? Заработай здесь, просто размещая видеоролики в своих сообществах! (http://viboom.com/ru/invite/73)

255

malls

7 сентября 2008, 11:51

#2

т.е. вот так на самом деле:

[ATTACH]20650[/ATTACH]

(сорри за невольный ап)

gif divs2.gif

255

malls

7 сентября 2008, 11:51

#3

-L-:
DIV.1 отступы обнулял?

Нет - они должны быть по определению.

Потом повторюсь:

эффект появляется только после добавления указанной строчки... Никаких других изменений.

-L-:
покажи полные стили и тогда мы не будем копирфильдами и поможем тебе

DIV.1 {

position: absolute;
width: 984px;
height: auto;
background-image: url(img/fon.gif);

top: 207px;

left: 50%;
margin-left: -492;
margin-bottom: 15px;
padding: 28px 0px 8px 0px;
}

DIV.2 {

width: 968px;
height: 199px;
background-image: url(img/image.jpg);
background-repeat: no-repeat;

left: 50%;
margin-left: 8px;

padding: 115px 10px 10px 15px;

font-size: 10pt;
}

192

sabotage

7 сентября 2008, 12:20

#4

malls, поставил, во всех бродилках одинаковая картина, только правый край в осле отличается. (ie6, ff3, o9.27) Нужно смотреть остальные стили.

png malls.png

255

malls

7 сентября 2008, 12:30

#5

sabotage:
malls, поставил, во всех бродилках одинаковая картина, только правый край в осле отличается. (ie6, ff3, o9.27) Нужно смотреть остальные стили.

:)

так она и у меня раньше всегда была одинаковая - потому и не понимаю...

Остальные стили при чем тут? Если без указанной строчки все нормально...

192

sabotage

7 сентября 2008, 12:43

#6

malls:
получается картинка справа... т.е. родительский блок вытягивается вниз примерно на величину этих отступов...
содержимое DIV2 при этом как ему и положено смещается внутри блока на указанные значения...

Что не так на моем скриншоте? То есть, трабла же не вылазит.

255

malls

7 сентября 2008, 14:13

#7

sabotage:
Что не так на моем скриншоте? То есть, трабла же не вылазит.

sabotage так я верстаю не первый раз... и даже не сомневаюсь что у тебя все получается, т.к. разбуди меня ночью и спроси - скажу что так и должно быть... Я не понимаю почему у меня такой косяк вылезает (хотя и не должен)... Хоть плачь!

Потому и спрашиваю. Может кто сталкивался с такой траблой... Причем от Осла всегда ждешь приколов, но тут, наоборот: Опера и Лиса!!!

Причем ладно бы только Опреа - я бы искал глюк, но когда и в Лисе то же самое - руки опускаются...

Вот полный код если что, вдруг мысли будут (жирным выделена эта собака):

<html>

<head>
<title></title>

<style>
BODY {
/* margin: 5px 0px 14px 0px; */

background-image: url(img/black_fon.gif);

font-family: Georgia, Times, serif;
color: #4B2418;

}

DIV.top_hat {

position: absolute;
width: 984px;
height: 90px;
background-image: url(img/top_hat.jpg);
top: 14px;

left: 50%;
margin-left: -492;

padding: -10px 0px 0px 0px;
}

#houm {
position: absolute;
width: 30px;
height: 30px;

top: 5px;

left: 50%;
margin-left: -142;
}

#info {
position: absolute;
width: 30px;
height: 30px;

top: 5px;

left: 50%;
margin-left: -105;
}

#quest {
position: absolute;
width: 30px;
height: 30px;

top: 5px;

left: 50%;
margin-left: -68;
}

DIV.sub_advert {

position: absolute;
width: 968px;
height: 103px;
background-image: url(img/light_fon.gif);

top: 104px;

left: 50%;
margin-left: -484;

}

IMG.adv_left {

z-index: 5001;

position: absolute;
width: 231px;
height: 103px;

top: 104px;

left: 50%;
margin-left: -492;
}

IMG.adv_right {
z-index: 4999;

position: absolute;
width: 33px;
height: 103px;

top: 104px;

left: 50%;
margin-left: 459;

}

DIV.advert {

z-index: 5000;

position: absolute;
width: 728px;
height: 90px;
background-image: url(img/light_fon.gif);

top: 110px;

left: 50%;
margin-left: -250;

filter:#progid:#DXImageTransform.Microsoft.Alpha(opacity=70); /* IE 5.5+*/
-moz-opacity: 0.7; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.7; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.7; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

}

DIV.top_polosa {

z-index: 6000;

position: absolute;
width: 968px;
height: 28px;
background-image: url(img/top_polosa.jpg);

top: 207px;

left: 50%;
margin-left: -484;

}

DIV.content {

width: 968px;
height: auto;
background-image: url(img/light_fon.gif);

left: 50%;
margin-left: 8px;

}

DIV.footer {

width: 968px;
height: 199px;
background-image: url(img/footer.jpg);
background-repeat: no-repeat;

left: 50%;
margin-left: 8px;

/* ################## ВОТ ОНА ТЛЯ ТАКАЯ ####################### */
padding: 115px 10px 10px 15px;

font-size: 10pt;
}

DIV.content_border {

position: absolute;
width: 984px;
height: auto;
background-image: url(img/braun_fon.gif);

top: 207px;

left: 50%;
margin-left: -492;
margin-bottom: 15px;
padding: 28px 0px 8px 0px;

}

#lenta {

z-index: 60000;

position: absolute;
width: 423px;
height: 91px;

top: 197px;

left: 50%;
margin-left: 127;
}

#lenta_ten {

z-index: 59999;

position: absolute;
width: 423px;
height: 91px;

top: 205px;

left: 50%;
margin-left: 131;

filter:#progid:#DXImageTransform.Microsoft.Alpha(opacity=30); /* IE 5.5+*/
-moz-opacity: 0.3; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.3; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.3; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */

}

</style>

</head>

<body>

<div class=top_hat>

</div>
<img src=img/icon_houm.gif width=30 height=30 alt="на главную" id=houm>
<img src=img/icon_info.gif width=30 height=30 alt="о проекте" id=info>
<img src=img/icon_quest.gif width=30 height=30 alt="контакты" id=quest>

<div class=sub_advert>

</div>
<img src=img/niz_svechi.jpg alt="" width=231 height=103 class=adv_left>
<img src=img/right_border.jpg alt="" width=33 height=103 class=adv_right>

<div class=advert>
################## ADVERT#######################
</div>

<div class=top_polosa>

</div>

<div class=content_border>

<div class=content>
################## CONTENT #######################
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</div>

<div class=footer>
################## FOOTER #######################
</div>

</div>


</body>
</html>

192

sabotage

7 сентября 2008, 17:00

#8

malls:
sabotage так я верстаю не первый раз... и даже не сомневаюсь что у тебя все получается, т.к. разбуди меня ночью и спроси - скажу что так и должно быть... Я не понимаю почему у меня такой косяк вылезает (хотя и не должен)

malls, ты не понял - это твой код был на скриншоте. Посмотрел весь код, отступа, как описано в первом посте нет, но вылазит справа (см. скрин). Короче, самое простое решение:


...

<style>

DIV.footer p{

padding: 20px 10px 10px 15px;

}

</style>



...



<div class=footer>

<p>

################## FOOTER #######################

</p>

</div>

png malls-1.png

194

BrokenBrake

7 сентября 2008, 17:36

#9

Доктайп есть у HTML? Код валидный?

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы

Open AI тестирует память для ChatGPT