Jump to content
  • 0

Наезд блока на текст


Toxin_G
 Share

Question

Есть блок как на картинке

Screenshot_1.png

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

<div style="border: 1px #ccc solid; padding: 5px; margin-top: 1px; word-wrap: break-word; width: 500px;"  class="mess_list" id="mess_list_102">
<div style="float:left;">
<img src="/fw/s.jpg" width="80" height="80" alt="none" /><br />
<span class="indbox_text_color">28 сентября 2011<br />
(16:35:21)</span><br />
<span class="indbox_text_color">От:</span>
<a href="/fw/index.php/profile/1/">administrator</a>
</div>

<div class="del" style="float:right; width: 24px; height: 24px;">
<div id="delid_102">
<a href="/fw/index.php/profile/delete_message/102/" onclick="sendRequest('GET', '/fw/index.php/profile/delete_message/102/1/'); return false"><img src="/fw/files/icons/design/delete.png" style="float: right; " width="20" height="20" /></a>
</div>
</div>


<div style="overflow:hidden; zoom:1; padding: 5px;">

/* CSS Document */ a:link,a:active,a:visited { color: #1e70a4;text-decoration: none; } #button ul { list-style: none; margin: 0; padding: 0; border: none; width:140px; } #button li a { display: block; padding: 2px; color: #1e70a4; text-decoration: none; width: 100%; } body #button li a { width: 100%; } #button li a:hover { background-color: #dbf2fc; color: #1e70a4; } .row_easy { background-color:#edf7fc; border: #abe4ff solid 1px; border-left:0px; border-right:0px; } .button { height:20px; border-color:#208abc; border-style:solid; border-width:1px; background:#7dd0f6; cursor:pointer; color:#1d6684; } .textarea { border-radius: 10px; background-color:#fff; border:1px solid #208abc; padding:6px; font:11px Tahoma; font-weight:bold; margin-top:5%; } .LabelSelected { border:1px dotted black; } .blue { background-color:#cfeffe; } .headComm { background-color:#cfeffe; } small { color:#999; } .table { background-color:white; font-family: sans-serif; font-size: 12px; } .title { background: url("/fw/444.jpg"); background-color: #2a7ac7; border-bottom: 3px double #297cb0; border-left: 3px double #77c8fb; border-top: 3px double #77c8fb; border-right: 3px double #297cb0; fonta-family: Georgia, Times New Roman, Times, serif; font-size: 14px; font-weight: bold ; text-shadow: #fff 0px 0px 5px; border-radius:25; position: relative; z-index: 4; } .navigation { padding-top:1%; padding-left:1%; } .text { border: solid #ccc 1px; border-top:0px; margin:1%; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 150%; color:#333; padding:1px; background-color:#fff; } .borderRight { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } .signature { background-color: #5fccf9; height:20px; text-align:center; border:#00aff8 solid 1px; color:#1d6684; position:relative; } .floatLeft { float:left; } .code { border:1px dotted #ccc; padding: 5px; font:11px Tahoma; font-weight:bold; } .UserBlog { text-align:right; margin-right:2%; } .ImagesBlock { border:1px dotted #ccc; margin: 10px; padding: 10; } .Image { padding:10px; border:5px #ccc solid; margin:5px; } .quote { margin:4px; padding:5px; border:1px #ccc dotted; } .pagi a:link { background-color:#3bb0fb; text-decoration: none; color: #fff; border-width:medium; border: 1px solid #1d6684; padding:7px; padding-top:2px; padding-bottom:2px; border-radius:5; } .pagi a:visited { background-color:#3bb0fb; text-decoration: none; color: #fff; border-width:medium; border: 1px solid #1d6684; padding:7px; padding-top:2px; padding-bottom:2px; border-radius:5; } .pagi a:hover { background-color: #bfdefe; color:#1d6684; } .pagi strong { background-color:#fff; text-decoration: none; color: #3bb0fb; border-width:medium; border: 1px solid #1d6684; padding:7px; padding-top:2px; padding-bottom:2px; border-radius:5; } <br />
</div>
<div style="clear:both"></div>
<div class="likes" id="102" style="float:right;margin-top: -21px; width: 24px; height: 24px;border:ggg dashed 1px; position: relative;">

<div class="bubbleInfo" style="position: relative;">

<div style=" width: 100px; height: 24px; margin-top: 0px; margin-left: -60px;" class="like">

<div id="id_102">
<a href="/fw/index.php/profile/like/102/" onclick="sendRequest('GET', '/fw/index.php/profile/like/102/'); return false" style="font-size: 7pt;">Мне нравится<img src="/fw/files/icons/design/h2.png" id="img_102" width="20" height="20" style="vertical-align: middle; clear: both;" />2</a>
</div>
</div>
</div>
</div>

</div>

PS: код html это только набросок, потом доведу все до стандартов

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Вообще ничего не понятно. Что, откуда, какие стили? Текст позиционирован или зафлочен? Добавьте паддинг нижний родителю или маржин нижний тексту. Или в overflow все заверните.

В общем доведите "до стандартов" и решим проблему.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy