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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография Napoleon-007
    #7

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.2018
Топ 5 участников по репутации


Div на div

#1 Faracon

Faracon
  • Неактивные
  • 4 сообщений
  • Репутация: 0
0

Отправлено 26 November 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
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Тег div
  2. При наложении div блоков, появляется рамочка
  3. Html верстка на конкретном примере
  4. Как правильно разбить макет на блоки для div верстки
  5. Ширина блока div относительно размера страницы

#2 sae

sae
  • Неактивные
  • 269 сообщений
  • Репутация: 79

Отправлено 26 November 2012 - 01:39

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

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

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

  • 1

#3 Faracon

Faracon
    Topic Starter
  • Неактивные
  • 4 сообщений
  • Репутация: 0

Отправлено 26 November 2012 - 11:10

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

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

#4 WarEnek

WarEnek
  • Неактивные
  • 107 сообщений
  • Репутация: 9

Отправлено 26 November 2012 - 19:18

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

#5 sae

sae
  • Неактивные
  • 269 сообщений
  • Репутация: 79

Отправлено 28 November 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 November 2012 - 21:16

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


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