This page is hosted for free by zzz.com.ua, if you are owner of this page, you can remove this message and gain access to many additional features by upgrading your hosting to PRO or VIP for just 32.50 UAH.

Веб мастер - Как сделать ?

Не работает? Начинай читать инструкцию.

Как заокруглить текст, разместить текст в овальном боксе

Однажды пришлось разместить текст в овальном боксе. Решил записать как это сделать.

Предлагаю ознакомиться с предложениями моих партнёров

Напишем css

div.text {
    background: none repeat scroll 0 0 rgba(68, 108, 171, 0.1);
    width: 99%;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
    margin: 10px 0;
    padding: 1px;
    position: relative;
}
div.text .box {
	margin: 10px;
    text-align: center;
}

Теперь код html

<div class="text">
<p class="box">Предлагаю Вам заказать сайт по оптимальной цене. Посетив разработанный мною сайт, у клиентов сложиться правильное впечатление о Вашем продукте или услуге, что приведет к увеличению прибыли.</p>
</div>

Результат

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

Второй вариант

Напишем css

div.textbox {
	background: none repeat scroll 0 0 rgba(68, 108, 171, 0.1);
    width: 99%;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
    margin: 10px 0;
    padding: 1px;
    position: relative;
}
div.textbox .bg {
    padding: 20px 0px 0px 10px;
}
div.textbox .title {
    font-size: 20px;
    background: none repeat scroll 0 0 rgba(68, 108, 171);
    color: #ffffff;
    font-weight: bold;
    left: 20px;
    padding: 7px 7px;
    position: absolute;
    top: -32px;
    border: 1px solid rgba(59, 59, 59, 0.5);
    border-radius: 20px;
} 

Теперь код html

<div class="textbox">
<p class="title ">Заказать сайт. Создание сайтов по оптимальной цене</p>
<p class="bg"><img src="images/palexa.png" alt="" style="float: left; margin-right: 10px; margin-left: 0px;" /><strong>Предлагаю Вам заказать сайт по оптимальной цене. Посетив разработанный мною сайт, у клиентов сложиться правильное впечатление о Вашем продукте или услуге, что приведет к увеличению прибыли.</strong></p>
</div>

Результат

Заказать сайт. Создание сайтов по оптимальной цене

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

Конечно можно поиграться с css для достижения других результатов отображения, но суть думаю ясна

Предлагаю ознакомиться с предложениями моих партнёров