[X] Помощник

[Faracon Topic Starter]

Здраствуйте форумчане! У меня проблема и я прошу вас мне помочь в долгу не останусь - проблемка такова: 2 div блока лежащие друг за дружкой по вертикали в каждом хранится таблица 3 на 3 слева тоже div а точнее 2 вложенных друг в друга. Проблема вот в чем. Когда я записываю текст в таблицу, то оно налезает на нижний. Как можно избавиться от этой проблемы? подскажите кто знает? можете на картинку взглянуть!

html код

<div id='forum_body'>
<div id='ava'>
<div id='avatar'></div>
</div>
<div id='text_green'>
<table border='0' align='center' cellpadding="0" cellspacing="0">
<tr heigth='13'>
<td width='18' height='13' id='left_top'></td>
<td height='13' id='center_top'></td>
<td width='16' height='13' id='right_top'></td>
</tr>
<tr>
<td width='18' id='left_center'></td>
<td id='center'><p class='meseg'>HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!HELLO AMIGO!</p></td>
<td id='right_center'></td>
</tr>
<tr heigth='18'>
<td width='18' height='18' id='left_bottom'></td>
<td height='18' id='center_bottom'></td>
<td width='16' height='18' id='right_bottom'></td>
</tr>
</table>
</div>
</div>

<div id='forum_body'>
<div id='ava'>
<div id='avatar'></div>
</div>
<div id='text_green'>
<table border='0' align='center' cellpadding="0" cellspacing="0">
<tr heigth='13'>
<td width='18' height='13' id='left_top'></td>
<td height='13' id='center_top'></td>
<td width='16' height='13' id='right_top'></td>
</tr>
<tr>
<td width='18' id='left_center'></td>
<td id='center'><p class='meseg'>HELLO AMIGO! еше РАЗ!!!</p></td>
<td id='right_center'></td>
</tr>
<tr heigth='18'>
<td width='18' height='18' id='left_bottom'></td>
<td height='18' id='center_bottom'></td>
<td width='16' height='18' id='right_bottom'></td>
</tr>
</table>
</div>
</div>

css код

#forum_body{
width:490px;
position:relative;
border:#F00 1px solid;
padding:0 16px 0 16px;
}
#ava{
background-image:url(img_fon/gost_cniga/admin/ava.png);
width:102px;
height:102px;
float:left;
}
#avatar{
background-image:url(img_fon/gost_cniga/piople/faracon.jpg);
/*-moz-border-radius: 15px; //округление углов для mozilla
-webkit-border-radius: 15px; //округление углов для chrome safari*/
border-radius:10px;
width:88px;
height:88px;
margin:4px 0 0 5px;
border:2px solid #CCC;
}
#text_green{
width:495px;
height:50px;
margin:0 0 6px 0;
padding:50px 0 0 0;
}
.meseg{
position:relative;
margin:-8px -5px -9px -5px;
color:#333;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
font-weight:normal;
}
/* ВЕРХ
-----------------------------------------------------------------*/
#left_top{
background-image:url(img_fon/gost_cniga/piople/left_top.png);
}
#center_top{
background-image:url(img_fon/gost_cniga/piople/center_top.png);
}
#right_top{
background-image:url(img_fon/gost_cniga/piople/right_top.png);
}
/* ЦЕНТЕР
-----------------------------------------------------------------*/
#left_center{
background-image:url(img_fon/gost_cniga/piople/left_center.png);
}
#center{
background-image:url(img_fon/gost_cniga/piople/center.gif);
}
#right_center{
background-image:url(img_fon/gost_cniga/piople/right_center.png);
}
/* НИЗ
-----------------------------------------------------------------*/
#left_bottom{
background-image:url(img_fon/gost_cniga/piople/left_bottom.png);
}
#center_bottom{
background-image:url(img_fon/gost_cniga/piople/center_bottom.png);
}
#right_bottom{
background-image:url(img_fon/gost_cniga/piople/right_bottom.png);
}

Эскизы прикрепленных изображений

 

[sae]

У #text_green надо убрать height:50px

Не-не, надо заменить height:50px на min-height:50px;

Сообщение отредактировал sae - 26.11.2012, 2:42

[Faracon Topic Starter]

Спасибо чувак! У меня к тебе вопросик один возник, я вообще-то не хоте таблицу писать - хотел чтобы все на дивах было но проблемка выходит такая 3 блока по горезонтали с применением позиции float:left; должны быть зафиксированные так ведь ? а мне нужно чтобы средняя была резиновая- если я поставлю на среднюю min-width то прокатит ли оно ?

Да еще если взглянуть на картинку то видно что у аватарки углы закруглены но в IE 6,0 7,0 8,0 НЕ РАБОТАЕТ!!! что делать не подскажешь? Заранее спасибо ! если что обращайся тоже чем нибудь помогу!

[WarEnek_mw]

Почитай про border-radius. На том же htmlbook

[sae]

Faracon,

1. Сделай вложенные дивы со 100% шириной. Например:
<div общий фон>
--<div фон правого-верхнего угла>
----<div фон левого-верхнего угла>
------<div фон правого-нижнего угла>
--------<div фон левого-нижнего угла>

а тут уже контент

--------</div>
------</div>
----</div>
--</div>
</div>

2. Border-radius - это свойство css3, и IE чхать хотел на такую "мелочь". Поэтому можно воспользоваться фиксами: раз или два и еще полно...

[Evgeny_mw]

Когда начал изучать блочную версту, был поражен тем, что данный метод намного лучше прежнего (табличной).

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.