Html code:

<div id="new"> <img src="img/new.jpg" align="left" width="50" height="50"> <font color="#000000" size="5">Π‘Π²Π΅ΠΆΠΈΠ΅ новости</font> </div> <div id="message"> <img src="img/message.jpg" align="left" width="49" height="49"> <font color="#000000" size="5">НовыС сообщСния</font> </div>

Css code:

 #new{ border: 4px double black; margin-bottom: 50px; position: absolute; bottom: 50px; left: 385px; line-height: 50px; } #message{ border: 4px double black; margin-bottom: 50px; position: absolute; bottom: 50px; right: 385px; line-height: 50px; }

Well, the question itself. I want to display information under the "Latest News" and "New Posts". How best to do this? If you simply insert the text in these divas, then the whole picture is distorted, and it turns out not very nice. I would not want to create another 2 divas for this business. How else can you do?

    3 answers 3

    How do you like that?

     <div id="message"> <div class="mtitle">НовыС сообщСния</div> <div class="mtext">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ 1</div> <div class="mtext">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ 2</div> <div class="mtext">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ 3</div> <div class="mtext">Π‘ΠΎΠΎΠ±Ρ‰Π΅Π½ΠΈΠ΅ 4</div> </div> <style> #message{ border: 4px double black; margin-bottom: 50px; position: absolute; bottom: 50px; right: 385px; line-height: 50px; } #message .mtitle{ color: #000; font-size: 150%; padding: 0 10px 0 50px; background: url(img/message.jpg) left top no-repeat; } #message .mtext{ font-size: 80%; } </style>
    • The method is certainly good. But are there any other options (without using additional divs)? - HoPkInS
    • Here is a screen. Arrows I marked the places where messages-links will be displayed. s15.radikal.ru/i189/1104/67/53c38bd4f06b.jpg - HoPkInS
    • Of course. div.mtitle remains, the rest of the divas are removed. div # message registers the layout, stroke and style of the text; div.mtitle reassigned text style. But new messages, as I understand it, you will have links? This can also be used. - ling
    • Yes. New posts will be links. And how can this be used? And perhaps ask another question that would not create unnecessary topics. How do I press the footer to this block? s44.radikal.ru/i104/1104/24/a930f015e1ad.jpg Now I have the following footer: #footer {text-align: center; position: relative; bottom: 10px; width: 100%; border-top: 1px solid; padding: 5px; } - HoPkInS
    • You can use it like this: stretch the heading for the whole div, and give messages to indents. Try poke in ling06.narod.ru/templatemaker - you can do it by analogy: without the left and right menu and with your elements in the content. If you need to press the footer to the bottom of the page for any content - Google to help). - ling

    Yes, either the option is even simpler:

     <div class="news"> <h3>Π‘Π²Π΅ΠΆΠΈΠ΅ новости</h3> <div>ВСкст</div> <div>ВСкст</div> <div>ВСкст</div> <div>ВСкст</div> </div> <div class="messages"> <h3>БообщСния</h3> <div>ВСкст</div> <div>ВСкст</div> <div>ВСкст</div> <div>ВСкст</div> </div>

    But I would do this option if I would write for myself:

     <ul class="news"> <li class="h">title</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul>
    • If you do this, the title is crookedly displayed. Maybe I'm doing something wrong ... - HoPkInS
    • one
      H1-6 headers have margin and padding indents, they need to be corrected. In general, html is such a specific markup language in which any other element can be made :) - Alex Silaev
    • Well, if you write a style for the title, then for all such titles this style will be applied. Or can you prescribe a heading style only for a particular diva? - HoPkInS pm
    • You can, of course :) CSS - this is CASCADE style sheets :) Write this: .news h3 - describes the title only in the element with the class news. - Alex Silaev
    • Did not know this. thank you so much) - HoPkInS

    Here is even easier:
    For font make display:block and then all the text will be just below it.
    #new and #message blocks overflow:hidden , then everything will fit inside.

    But of course, the hard height of the blocks means that your new text will be limited in length, by the way, in my version, everything that does not fit will be hidden, very convenient!