X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите решить проблему
Балдин
Балдин
Topic Starter сообщение 16.12.2010, 11:43; Ответить: Балдин
Сообщение #1


Проблема на картинке:
[attachment=37292:screen-talk-jinbo-quote-trouble.jpg]
Текст, что справа обтекает левую часть с информацией(ник, аватар и т.д.), а "Цитата"(background, border) растягивается на всю ширину div'a.. :nea: Нужно, чтобы эта "цитата" подстраивалась под свободное пространство и не была фиксированной.
<div id="talk-message">
<div style="float: left;">
<span class="postdetails"> <img src="/to_post_off.gif" border="0" style="padding-bottom:2px" /> Сегодня, 9:15</span>
</div>
<div align="right">
<span class="postdetails">Сообщение <a href="#" onclick="link_to_post(13); return false;">#4</a></span>
</div>
<div style="padding-top: 20px; padding-left: 20px;">
<div class="quotetop">
Цитата(Балдин @ 13.12.2010, 15:41) <a href="#"><img src="/post_snapback.gif" border="0" /></a>
</div>
<div class="quotemain">цитируемый текст</div> <br />
Сообщение пользователя
</div>
<div>
<div style="float: left; padding-left: 20px;">
<br /> <br /> -------------------- <br />
<div class="signature">Я тебя вижу...</div>
</div>
<div style="text-align: right;" id="talk-but">
<br /><a id="edit-but-13" href="#"><img src="/p_edit.gif" border="0" /></a> <a href="#"><img src="/p_quote.gif" border="0" /></a>
</div>
</div>
</div>

Ну и css:
[CSS]#talk-message{
font: 10pt Tahoma;
width: 95%;
}
.postdetails{
font-size: 10px;
line-height:140%;
}

.quotetop{
background: #E4EAF2 url(jinbo/css_img_quote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #8394B2;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 2px 5px 0 5px;
padding: 3px;
}

.quotemain{
background: #FAFCFE;
border: 1px dotted #000;
border-left: 4px solid #8394B2;
border-top: 0;
color: #465584;
padding: 4px;
margin: 0 5px 0 5px;
}

.signature{
background: transparent;
color: #339;
font-size: 10px;
line-height: 150%;
}

#talk-but a img{
padding-left: 20px;
}[/CSS]
Вроде всё... Буду примного благодарен за помощь.
Нужно, чтобы цитата получилась примерно так:
[attachment=37293:screen-talk-jinbo-quote-trouble-finish.jpg]
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 16.12.2010, 12:25; Ответить: FightInGlory
Сообщение #2


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#talk-message{
font: 10pt Tahoma;
width: 95%;
}
.postdetails{
font-size: 10px;
line-height:140%;
}

.quotetop{
background: #E4EAF2 url(jinbo/css_img_quote.gif) no-repeat right;
border: 1px dotted #000;
border-bottom: 0;
border-left: 4px solid #8394B2;
color: #000;
font-weight: bold;
font-size: 10px;
margin: 2px 5px 0 5px;
padding: 3px;
}

.quotemain{
background: #FAFCFE;
border: 1px dotted #000;
border-left: 4px solid #8394B2;
border-top: 0;
color: #465584;
padding: 4px;
margin: 0 5px 0 5px;
}

.signature{
background: transparent;
color: #339;
font-size: 10px;
line-height: 150%;
}

#talk-but a img{
padding-left: 20px;
}
</style>
</head>
<body>
<div id="talk-message" style="position:relative;">
<div style="float: left;">
<span class="postdetails"> <img src="/to_post_off.gif" border="0" style="padding-bottom:2px" /> Сегодня, 9:15</span>
</div>
<div align="right">
<span class="postdetails">Сообщение <a href="#" onclick="link_to_post(13); return false;">#4</a></span>
</div>
<div style="width:90px; height:90px; position:absolute;;"></div>
<div style="padding-top: 20px; padding-left: 110px;">
<div class="quotetop">
Цитата(Балдин @ 13.12.2010, 15:41) <a href="#"><img src="/post_snapback.gif" border="0" /></a>
</div>
<div class="quotemain">цитируемый текст</div>
Сообщение пользователя
</div>
<div>
<div style="float: left; padding-left: 20px;">
--------------------
<div class="signature">Я тебя вижу...</div>
</div>
<div style="text-align: right;" id="talk-but">
<a id="edit-but-13" href="#"><img src="/p_edit.gif" border="0" /></a> <a href="#"><img src="/p_quote.gif" border="0" /></a>
</div>
</div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 16.12.2010, 12:28; Ответить: Malganus
Сообщение #3


в стилях для quotetop попробуйте задать для margin четвертую величину, равную ширине аватара и всего что левее. Я если честно, не вижу какая там ширина, поэтому попробуйте начать с 100px
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Балдин
Балдин
Topic Starter сообщение 16.12.2010, 12:49; Ответить: Балдин
Сообщение #4


FightInGlory, по вашему примеру вместе с цитатой всё сообщение сдвигается в правую сторону, а мне нужно чтобы обтекало аватарку и информацию. И все всплывающие в сообщении теперь ниже на ~500px =(

Malganus, помогло, но к сожалению эта часть не фиксированная, и не хотелось бы задавать ей фиксированную величину. Тогда получится либо слишком большая, либо - маленькая. И если спустить цитату ниже, то отступ остаётся :(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 16.12.2010, 13:02; Ответить: Malganus
Сообщение #5


А Вы блоку с аватаркой задайте процентную ширину, к примеру 30%, а блоку
<div style="padding-top: 20px; padding-left: 20px;">
<div class="quotetop">
Цитата(Балдин @ 13.12.2010, 15:41) <a href="#"><img src="/post_snapback.gif" border="0" /></a>
</div>
<div class="quotemain">цитируемый текст</div>
Сообщение пользователя
</div>

задайте оставшиеся 70% или как Вам удобней будет
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
FightInGlory
FightInGlory
сообщение 16.12.2010, 13:55; Ответить: FightInGlory
Сообщение #6


Если я не ошибаюсь, подобное делает только скриптом, откуда блокам знать какая там ширина. Если просто зафлотить блоки с цитатами, то они будут брать размер текста, т.е. если текста мало, то они маленькие, если много то больше.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Malganus
Malganus
сообщение 16.12.2010, 14:06; Ответить: Malganus
Сообщение #7


(FightInGlory @ 16.12.2010, 15:55) *
Если я не ошибаюсь, подобное делает только скриптом, откуда блокам знать какая там ширина. Если просто зафлотить блоки с цитатами, то они будут брать размер текста, т.е. если текста мало, то они маленькие, если много то больше.


Ну почему же, поместить все в блок с шириной 100% и далее с подблоками играть как угодно можно, разве это не так? Причем у него в стилях для #talk-message ширина прописана 95%, вот от этой цифры и будут остальные подблоки отталкиваться

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 692 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 1695 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Исправить проблему в сайте, требуется помощь программиста
1 woolf 1141 14.10.2020, 14:47
автор: WoWeb
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
7 heisenberg_mw 2315 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
7 virtas 12401 24.7.2020, 17:02
автор: -JamesSmips-


 



RSS Текстовая версия Сейчас: 28.3.2024, 21:31
Дизайн