Обтікання тексту текстом

1 Тема від Betterthanyou 30.10.2014 23:26:36

Betterthanyou
TEAM
Поза форумом

Звідки: Київ
Дата реєстрації: 16.05.2014
Повідомлень: 1 695

: 1022

Тема: Обтікання тексту текстом

В мене виникла проблема при спробі розмістити текст який має обтікати текстом, в тексті по ліву сторону йдуть пропуски поки не закінчиться текст з правої сторони. Як це виправити ? я ще скинув картинку як я хочу зробить, і текст з права виділений лише тимчасово червоним полем щоб було більш зрозуміло де чиї поля
html

<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css\stil.css">
<title>Магазин мебилів</title>
</head>
<p class='fig'>
<img src='img\mebli.jpg' width='70%' height='80%'>
</p>

<p class='infa'>
Наша компанія створює містку, зручну і комфортну корпусні меблі на замовлення у Львові використовуючи тільки високоякісні матеріали і фурнітуру.

Ми надаємо повну інформацію про всілякі матеріали, фурнітуру, колірних спектрах і малюнках фасадів, дзеркал і маємо в своєму розпорядженні величезною базою фотоматеріалів готових меблевих рішень. Завдяки цьому, Ви можете підібрати найбільш відповідну саме Вам меблеву композицію, а наше завдання - втілити її в життя.

Ми можемо створити меблі Вашим ескізами, кресленнями, фотографій з журналів або сайтів, за простим замальовками або ж може опрацювати разом з Вами кілька варіантів меблів з яких Ви можете вибрати найбільш вподобану.
</p>

<p class='main_top'>
Столи
</p>
<p class='main'>
Стільці
</p>
<p class='main'>
Шафи
</p>
<p class='main'>
Тумбочки
</p>
<p class='main'>
Дівани
</p>
<p class='main_bottom'>
Кроваті
</p>
<!p class='virivn'>
<!img src='img\komputerni_stoli.jpg' width='28%' height='50%'>
<!/p>
<body>
</body>
</html>

css

.fig 
{
    text-align: center;
}
.virivn
{
    margin-left:10%;
}

.main_top
{
    background: #61C6BC;
    font-size: 36px;
    border-top: 2px solid #F456E7;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.main_bottom
{
    background: #61C6BC;
    font-size: 36px;
    border-bottom: 2px solid #F456E7;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.main
{
    background: #61C6BC;
    font-size: 36px;
    border-left: 2px solid #F456E7;
    border-right: 2px solid #F456E7;
    margin-right: 50%;
    margin-left: 15%;
    margin-top: 0px;
    margin-bottom: 0px;
    padding:  1%;
}

.infa
{
    margin-left: 51%;
    margin-right: 15%;
    margin-top: 0%;
    float: right;
    border: 2px solid red;
    font-size: 24px;
}

Post's attachments

сайт.png 8.37 kb, 229 downloads since 2014-10-30

Betterthanyou вебсайт

2 Відповідь від Key 31.10.2014 12:45:34

Key
Користувач
Поза форумом

Звідки: Lviv
Дата реєстрації: 27.12.2013
Повідомлень: 125

Репутація

: 85

Re: Обтікання тексту текстом

нічого складного тримай

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="row">
            <img src="top_img.jpg" height="320" width="960" alt="">
            <div class="sidebarmenu">
                <nav>
                    <ul>
                        <li>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                            <a href="#">Lorem ipsum.</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <p> Наша компанія створює містку, зручну і комфортну корпусні меблі на замовлення у Львові використовуючи тільки високоякісні матеріали і фурнітуру.</p>
            <p>Ми надаємо повну інформацію про всілякі матеріали, фурнітуру, колірних спектрах і малюнках фасадів, дзеркал і маємо в своєму розпорядженні величезною базою фотоматеріалів готових меблевих рішень. Завдяки цьому, Ви можете підібрати найбільш відповідну саме Вам меблеву композицію, а наше завдання - втілити її в життя.</p>
            <p> Ми можемо створити меблі Вашим ескізами, кресленнями, фотографій з журналів або сайтів, за простим замальовками або ж може     опрацювати разом з Вами кілька варіантів меблів з яких Ви можете вибрати найбільш вподобану.</p>
            <div class="autor">
                autor post autor post autor post
            </div>
        </div>
    </body>
</html>

і стилі незабудь підключити

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote: :before, blockquote: :after, q: :before, q: :after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
.row{
    width: 98%;
    max-width: 960px;
    margin: 0 auto;
}
.sidebarmenu{
    float: left;
    width: 40%;
    border: 1px solid #303030;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px;
    min-height: 30px;
    margin: 0 10px 10px 0;
}
.sidebarmenu li{
    float: left;
    list-style: none;
}
.sidebarmenu li a{
     color: #333;
    display: block;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
}
.row p{
    font: 400px 24px/28px sans-serif;
    color:#0303;
    padding-bottom: 10px;
}
.autor{
    float: left;
    width: 100%;
    border: 3px solid red;
    text-align: center;
    padding: 10px 0
}

*DRINK*