Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Div на div

#1 Faracon

Faracon
  • Пользователь
  • 4 сообщений
  • Репутация: 0
0

Отправлено 26 Ноябрь 2012 - 01:08

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

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);
}

Прикрепленные изображения

  • Без-имени-1.gif

 

 

  • 0

#2 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 26 Ноябрь 2012 - 01:39

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

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

Сообщение отредактировал sae: 26 Ноябрь 2012 - 01:42

  • 1

#3 Faracon

Faracon
    Topic Starter
  • Пользователь
  • 4 сообщений
  • Репутация: 0

Отправлено 26 Ноябрь 2012 - 11:10

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

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

#4 WarEnek

WarEnek
  • Пользователь
  • 107 сообщений
  • Репутация: 9

Отправлено 26 Ноябрь 2012 - 19:18

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

#5 sae

sae
  • Пользователь
  • 269 сообщений
  • Репутация: 79

Отправлено 28 Ноябрь 2012 - 12:00

Faracon,

 

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

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

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

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


  • 0

#6 Evgeny

Evgeny
  • Пользователь
  • 8 сообщений
  • Репутация: 0

Отправлено 30 Ноябрь 2012 - 21:16

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


Оформление форума – IPBSkins.ru