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



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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Тег div
  2. При наложении div блоков, появляется рамочка
  3. Html верстка на конкретном примере
  4. Как правильно разбить макет на блоки для div верстки
  5. Ширина блока div относительно размера страницы

#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